/* ==========================================================================
   Sovereign Terminal — main.css
   Burnt-amber LIGHT theme, gold accent: rounded editorial panels for finance
   news + podcast.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
/* Light rework: token names are unchanged from earlier revisions of this
   palette (so every var() reference below still applies) — only the values
   moved from a dark page ground to a light one. The signature surfaces
   (hero/subscribe/host panels, the footer, code blocks) stay a dark gradient
   on purpose, as a deliberate colour accent against the now-light page, so
   --wine-900…600, --on-wine and the panel sheen/bloom are unchanged. Only
   --wine-500 was retuned on its own: it doubles as small accent text
   everywhere OUTSIDE the panels, and the old bright value (tuned for
   contrast on a dark page) reads as too light against a white/cream card. */
:root {
	/* Wine — 900-600 stay a dark, saturated ramp for the panel gradient and
	   small dark accent chips (topbar, current-nav pill) which stay dark
	   regardless of the page theme; 500 is tuned separately to read clearly
	   as text/icons directly on the light page ground. */
	--wine-900: #34120A;
	--wine-800: #7A2A0F;
	--wine-700: #A83B10;
	--wine-600: #D6540F;
	--wine-500: #C6450D;

	/* Blush — the page ground. Lightest at 100, deepening toward 400 for
	   borders and dividers that need to actually stand out against it. */
	--blush-100: #FBF6EC;
	--blush-200: #F7F0E4;
	--blush-300: #EADDC5;
	--blush-400: #D6BE95;

	/* Peach — the single warm gold accent. Unchanged — it's used on dark
	   panels or inside its own button fill either way, never bare against
	   the page ground, so it didn't need to move with the rest. */
	--peach-300: #FFD98A;
	--peach-400: #FFC65C;
	--peach-500: #F2A83D;

	--white: #FFFFFF;

	--ink-900: #2B1B10;
	--ink-700: #5C4531;
	--ink-500: #85705D;
	--ink-300: #93806C;

	/* On-wine text — unchanged: the panel/footer/console surfaces stay dark
	   regardless of the page theme, so their light-on-dark text still holds. */
	--on-wine: #FFEDD9;
	--on-wine-dim: rgba(255, 237, 217, 0.72);
	--on-wine-faint: rgba(255, 237, 217, 0.44);

	/* Deepened from the dark-theme values — both now sit directly on the
	   white ticker bar instead of a dark one, and the old bright pastel
	   tones didn't have enough contrast there. */
	--up: #1E9E5D;
	--down: #E8435C;

	/* Panel gradient — the signature surface. */
	--panel: linear-gradient(135deg, var(--wine-800) 0%, var(--wine-600) 62%, var(--wine-500) 100%);
	--panel-flat: var(--wine-800);

	/* Metallic sheen — stacked over --panel, not replacing it, so the wine hue
	   is unchanged. Metal reads as anisotropic banding: several hard-edged
	   specular streaks at one angle plus a broad cross-lit sweep, rather than a
	   smooth blend. Kept in the low-alpha range so it polishes rather than
	   washes out the colour. */
	--panel-sheen:
		linear-gradient(101deg,
			transparent 4%,
			rgba(255, 235, 210, 0.10) 11%,
			rgba(255, 255, 255, 0.17) 13%,
			rgba(255, 235, 210, 0.05) 16%,
			transparent 24%,
			rgba(18, 8, 3, 0.16) 38%,
			transparent 47%,
			rgba(255, 235, 210, 0.08) 58%,
			rgba(255, 255, 255, 0.13) 60.5%,
			transparent 66%,
			rgba(18, 8, 3, 0.18) 79%,
			rgba(255, 235, 210, 0.07) 92%,
			transparent 97%),
		linear-gradient(76deg,
			rgba(18, 8, 3, 0.20) 0%,
			transparent 26%,
			rgba(255, 235, 210, 0.07) 49%,
			transparent 72%,
			rgba(18, 8, 3, 0.22) 100%);

	/* Type */
	--font-display: "Outfit", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;

	/* Radii — generous, consistent. */
	--r-panel: 34px;
	--r-card: 20px;
	--r-sm: 12px;
	--r-pill: 999px;

	/* Rhythm */
	--gap: 24px;
	--pad-section: 84px;
	--maxw: 1220px;
	--maxw-narrow: 840px;

	/* Much lower alpha than the dark theme used — a light page needs far less
	   shadow to read as "elevated," and the old heavy dark values looked
	   muddy sitting under a white card. */
	--shadow-card: 0 1px 3px rgba(43, 27, 16, 0.07), 0 10px 24px rgba(43, 27, 16, 0.09);
	--shadow-lift: 0 4px 10px rgba(43, 27, 16, 0.09), 0 20px 44px rgba(43, 27, 16, 0.13);
	--shadow-panel: 0 20px 60px rgba(43, 27, 16, 0.2);

	--ease: cubic-bezier(0.22, 0.8, 0.28, 1);

	--logo-h: 50px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--blush-200);
	color: var(--ink-900);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip, not hidden: `hidden` would make body a scroll container, which
	   silently breaks position:sticky on the header (it would pin to body
	   instead of the viewport). `clip` contains overflow without that. */
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

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

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--ink-900);
	/* A long headline word can otherwise push past its container on narrow
	   screens; this lets it break rather than overflow. */
	overflow-wrap: break-word;
}

p {
	margin: 0;
}

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

/* Browsers give blockquote a default `margin: 1em 40px` and figure `1em 40px`
   too — that 40px side inset showed up as stray padding inside quote cards.
   .entry-content re-applies its own spacing for article content. */
blockquote,
figure {
	margin: 0;
}

:focus-visible {
	outline: 3px solid var(--wine-500);
	outline-offset: 3px;
	border-radius: 4px;
}

.is-on-wine :focus-visible,
.panel :focus-visible {
	outline-color: var(--peach-300);
}

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

/* ── Utilities ──────────────────────────────────────────────────────────── */
.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: 24px;
}

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

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

/* A hairline between two plain-ground sections, so they don't just blend
   into one another. Skipped next to a .panel section (hero, host,
   subscribe) — its own coloured ground already separates it, and a line
   sitting right against that edge would just look redundant. */
.section-pad--divided {
	padding-top: 48px;
	border-top: 1px solid var(--blush-400);
}

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

.skip-link:focus {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 12px 20px;
	background: var(--wine-800);
	color: var(--on-wine);
	border-radius: var(--r-pill);
	font-weight: 600;
}

/* Live dot */
.badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--peach-400);
	display: inline-block;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(255, 217, 138, 0.7);
	animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 217, 138, 0.65);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(255, 217, 138, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 217, 138, 0);
	}
}

/* ── Section heading ────────────────────────────────────────────────────── */
.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap);
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.sec-head__title {
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

.sec-head__title em {
	font-style: normal;
	color: var(--wine-500);
}

.sec-head__sub {
	color: var(--ink-500);
	max-width: 46ch;
	margin-top: 10px;
	font-size: 1rem;
}

.sec-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sec-head--center .sec-head__sub {
	margin-inline: auto;
}

/* Underline mark — a peach brush under the heading word. A solid peach fill
   read fine against the old dark heading text, but against the now-light
   heading text it washed the word out where the two overlapped. A translucent
   wash keeps the warm accent while letting the dark page ground behind it
   keep the brush itself dark enough for light text to stay legible over it. */
.mark {
	position: relative;
	display: inline-block;
	z-index: 0;
}

.mark::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: 0.08em;
	height: 0.34em;
	background: rgba(255, 217, 138, 0.35);
	border-radius: var(--r-pill);
	z-index: -1;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 0;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

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

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

/* Peach — primary on wine and on blush alike. */
.btn--primary {
	background: var(--peach-300);
	color: var(--wine-900);
	box-shadow: 0 4px 16px rgba(181, 122, 45, 0.28);
}

.btn--primary:hover {
	background: var(--peach-400);
	box-shadow: 0 8px 24px rgba(181, 122, 45, 0.36);
}

/* Wine — primary on blush. */
.btn--wine {
	background: var(--wine-700);
	color: var(--on-wine);
	box-shadow: 0 4px 16px rgba(122, 42, 15, 0.24);
}

.btn--wine:hover {
	background: var(--wine-600);
	box-shadow: 0 8px 24px rgba(122, 42, 15, 0.32);
}

/* Outline on wine ground. */
.btn--ghost {
	background: transparent;
	color: var(--on-wine);
	box-shadow: inset 0 0 0 1.5px rgba(255, 237, 217, 0.34);
}

.btn--ghost:hover {
	background: rgba(255, 237, 217, 0.1);
	box-shadow: inset 0 0 0 1.5px rgba(255, 237, 217, 0.6);
}

/* Outline on blush ground. */
.btn--outline {
	background: transparent;
	color: var(--wine-500);
	box-shadow: inset 0 0 0 1.5px var(--blush-400);
}

.btn--outline:hover {
	background: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--wine-500);
}

.btn--on-deep {
	background: var(--peach-300);
	color: var(--wine-900);
}

.btn--on-deep:hover {
	background: var(--peach-400);
}

.btn--sm {
	padding: 9px 18px;
	font-size: 0.85rem;
}

/* The nav bar's Subscribe button runs at full button size. Declared after
   .btn--sm so it wins on source order despite equal specificity. */
.nav-cta {
	padding: 13px 26px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* The header itself does not stick — only the nav bar below does, so the
   utility strip scrolls away with the page. */
.site-header {
	position: relative;
	z-index: 100;
	padding-bottom: 4px;
}


/* Utility strip — an island too, so the whole header floats as one stack
   rather than a full-bleed band sitting on top of a rounded bar. */
.topbar {
	padding: 10px 24px 0;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 500;
}

.topbar__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 8px 26px;
	border-radius: var(--r-pill);
	background: var(--wine-900);
	color: var(--on-wine-dim);
	display: flex;
	align-items: center;
	gap: 20px;
}

.topbar__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--peach-300);
	font-weight: 600;
}

.topbar__date {
	color: var(--on-wine-faint);
}

.topbar__tagline {
	margin-left: auto;
	color: var(--on-wine-faint);
	letter-spacing: 0.05em;
	text-transform: none;
	font-size: 0.75rem;
}

/* Nav — a floating rounded bar. */
/* The sticky element. It carries the side padding that keeps .nav-inner inset
   from the viewport edge, so the sticky lives here rather than on the pill
   itself — a sticky .nav-inner would escape this padding as it pins.
   The blush ground is opaque so page content scrolls under the bar, not
   through the gap around it. */
/* No padding here — the pill below carries its own inset via margin, so that
   it keeps the same gap from the viewport edge once it pins. */
/* The sticky element — the floating nav bar. Pinning the wrapper (rather than
   the pill inside it) keeps the pill's side inset intact while pinned, since
   the inset comes from this element's padding. */
/* Transparent: the pill floats over the page, so content passes behind it and
   through the gap around it. Pointer events are disabled on the wrapper so its
   empty margins never swallow clicks meant for the page underneath. */
.nav-primary {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 14px 24px;
	pointer-events: none;
}

.nav-inner {
	max-width: var(--maxw);
	margin-inline: auto;
	background: var(--white);
	border-radius: var(--r-pill);
	padding: 10px 12px 10px 26px;
	display: flex;
	align-items: center;
	gap: var(--gap);
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.3s var(--ease);
	/* Restores interactivity — the transparent wrapper disables it. */
	pointer-events: auto;
}

/* Deeper lift once the bar is pinned, so it reads as floating above the page.
   Must follow the base .nav-inner rule above — that rule re-declares
   box-shadow, and a later declaration would otherwise win. */
.nav-primary.is-pinned .nav-inner {
	box-shadow: var(--shadow-lift);
}

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

.nav-brand img,
.custom-logo {
	max-height: var(--logo-h);
	/* Height alone doesn't stop a long, wide-aspect logo from stretching past
	   the nav bar — cap the width too, tighter on narrow screens below. */
	max-width: 250px;
	width: auto;
	object-fit: contain;
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -0.03em;
	color: var(--wine-500);
}

.nav-menu {
	margin-inline: auto;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
}

.nav-list li {
	position: relative;
}

.nav-list a {
	display: block;
	padding: 9px 17px;
	border-radius: var(--r-pill);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink-700);
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.nav-list a:hover {
	background: var(--blush-200);
	color: var(--wine-500);
}

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a {
	background: var(--wine-800);
	color: var(--on-wine);
}

/* Dropdowns */
.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 210px;
	background: var(--white);
	border-radius: var(--r-card);
	padding: 8px;
	list-style: none;
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
	z-index: 20;
}

.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-list .sub-menu a {
	white-space: nowrap;
	border-radius: var(--r-sm);
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--blush-200);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.nav-toggle__bar {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: var(--wine-500);
	transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE PANEL — the signature surface. Wine gradient, deep radius.
   ══════════════════════════════════════════════════════════════════════════ */
/* Sheen layers sit above the wine gradient in the same background shorthand —
   the colour underneath is untouched, the streaks just catch the light. */
.panel {
	position: relative;
	background: var(--panel-sheen), var(--panel);
	border-radius: var(--r-panel);
	color: var(--on-wine);
	overflow: hidden;
	box-shadow: var(--shadow-panel);
	isolation: isolate;
}

/* Optional photo background — set via the customizer (Hero / Subscribe) as
   the --bg-image custom property. A flat dark scrim keeps the panel's light
   text legible over whatever gets uploaded, wherever that text happens to
   sit — both panels place their copy top/centre, not bottom, so a directional
   fade (strong at one edge, weak at the other) would leave it unreadable
   against a bright photo half the time. It replaces the gradient rather than
   layering on top of it, so --panel/--panel-sheen stay the fallback whenever
   no image is set. */
.panel.has-bg-image {
	background-image:
		linear-gradient(rgba(10, 5, 2, 0.4), rgba(10, 5, 2, 0.4)),
		var(--bg-image);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* The fine metal-grain texture reads as noise over a photo rather than a
   deliberate finish, so it's dropped whenever a background image is set. */
.panel.has-bg-image::after {
	display: none;
}

/* Brushed-metal grain: very fine directional lines, the texture that separates
   polished metal from a plain gradient. Sits under the content, over the fill. */
.panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		101deg,
		rgba(255, 255, 255, 0.030) 0px,
		rgba(255, 255, 255, 0.030) 1px,
		transparent 1px,
		transparent 4px,
		rgba(0, 0, 0, 0.028) 4px,
		rgba(0, 0, 0, 0.028) 5px,
		transparent 5px,
		transparent 9px
	);
	pointer-events: none;
	z-index: -1;
}

/* Ambient bloom — one soft light source, top-right. */
.panel::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -12%;
	width: 62%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 140, 50, 0.28) 0%, transparent 68%);
	pointer-events: none;
	z-index: -1;
}

.panel h1,
.panel h2,
.panel h3,
.panel h4 {
	color: var(--on-wine);
}

/* Bare links on the panel take the light on-wine colour — but buttons carry
   their own ground and must keep their own text colour, so they are excluded.
   Without this, .panel a would override .btn--primary (equal specificity,
   later in the file) and put light text on a light peach button. */
.panel a:not(.btn) {
	color: var(--on-wine);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
	padding: 8px 24px 0;
}

/* Copy stacks on top, the player console rides below it — one centred column
   rather than a side-by-side split. */
.hero__panel {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(44px, 6vw, 84px) clamp(28px, 5vw, 68px) clamp(40px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(30px, 4vw, 46px);
}

/* No podcast published yet, so there is no console below to pad out for. */
.hero__panel--solo {
	padding-bottom: clamp(44px, 6vw, 84px);
}

.hero__copy {
	max-width: 700px;
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border-radius: var(--r-pill);
	background: rgba(255, 237, 217, 0.12);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--on-wine-dim);
	margin-bottom: 22px;
}

.hero__title {
	font-size: clamp(2rem, 4.6vw, 3.375rem); /* 3.375rem = 54px on desktop */
	line-height: 1.02;
	letter-spacing: -0.038em;
	margin-bottom: 20px;
}

.hero__title em {
	font-style: normal;
	color: var(--peach-300);
}

.hero__sub {
	color: var(--on-wine-dim);
	font-size: clamp(1rem, 1.4vw, 1.09rem);
	line-height: 1.6;
	margin: 0 auto 32px;
	max-width: 100%;
}

.hero__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Swaps its own icon with playback state, mirroring the console's play button. */
.hero__listen-pause,
.hero__listen.is-playing .hero__listen-play {
	display: none;
}

.hero__listen.is-playing .hero__listen-pause {
	display: block;
}

/* Player console rides full-width below the copy, centred and capped so it
   reads as a self-contained widget rather than a stretched bar. */
.hero__stage {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ── Player console ─────────────────────────────────────────────────────── */
.console {
	position: relative;
	width: 100%;
	max-width: 620px;
	padding: 22px 26px 26px;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 18px 46px rgba(12, 6, 2, 0.32);
	border: 1px solid rgba(255, 237, 217, 0.14);
	background: rgba(14, 7, 3, 0.34);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.console__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
}

.console__now {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--peach-300);
}

.console__runtime {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	font-size: 0.72rem;
}

.console__runtime-label {
	color: var(--on-wine-faint);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.64rem;
}

.console__runtime-val {
	color: var(--on-wine);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Equaliser */
.eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 13px;
}

.eq i {
	width: 2.5px;
	height: 40%;
	border-radius: 2px;
	background: var(--peach-300);
	transition: height 0.3s var(--ease);
}

.console.is-playing .eq i {
	animation: eq 1s ease-in-out infinite;
}

.console.is-playing .eq i:nth-child(2) {
	animation-delay: 0.18s;
}

.console.is-playing .eq i:nth-child(3) {
	animation-delay: 0.36s;
}

.console.is-playing .eq i:nth-child(4) {
	animation-delay: 0.1s;
}

@keyframes eq {
	0%,
	100% {
		height: 26%;
	}
	50% {
		height: 100%;
	}
}

/* Waveform scrubber */
.player__track {
	margin-bottom: 6px;
}

.player__bar {
	position: relative;
	height: 46px;
	cursor: pointer;
	touch-action: none;
	border-radius: 8px;
}

.wave-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	pointer-events: none;
}

.wave-bars i {
	flex: 1;
	min-width: 1px;
	height: var(--h);
	border-radius: 2px;
	background: rgba(255, 237, 217, 0.26);
	transition: background-color 0.2s var(--ease);
}

.player__bar-buffer {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 0;
	background: rgba(255, 237, 217, 0.07);
	border-radius: 8px;
	pointer-events: none;
}

.player__bar-fill {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	pointer-events: none;
}

/* The played copy is clipped by the fill's width, so its bars must stay the
   same width as the full set — hence the fixed-width inner track. */
.wave-bars--played {
	width: var(--wave-w, 100%);
}

.wave-bars--played i {
	background: var(--peach-300);
}

.player__bar-knob {
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--peach-300);
	box-shadow: 0 0 0 4px rgba(255, 217, 138, 0.22);
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.player__bar:hover .player__bar-knob,
.player__bar.is-scrubbing .player__bar-knob {
	opacity: 1;
}

.player__times {
	display: flex;
	justify-content: space-between;
	font-size: 0.72rem;
	color: var(--on-wine-faint);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

/* Transport */
.player__transport {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 16px;
}


.player__skip,
.player__rate {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 237, 217, 0.1);
	color: var(--on-wine);
	transition: background-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.player__skip:hover,
.player__rate:hover {
	background: rgba(255, 237, 217, 0.2);
	transform: scale(1.06);
}

/* .player__skip-num has no offsets of its own, so with no other rule it
   would take its "static" position — dead centre of the button, exactly
   where the flex layout also centres the arrow icon next to it. Pin the
   icon a touch above centre and the number under it so the two stop
   sitting on top of each other. */
.player__skip svg {
	transform: translateY(-4px);
}

.player__skip-num {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.53rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	pointer-events: none;
}

/* Pinned to the right of the transport row rather than pushed with an auto
   margin, so the rewind/play/forward trio stays centred on the console instead
   of being shunted left. */
.player__rate {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	min-width: 44px;
	padding-inline: 12px;
	border-radius: var(--r-pill);
	font-size: 0.78rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Re-declares the transform so the shared hover scale above does not drop the
   vertical centring. */
.player__rate:hover {
	transform: translateY(-50%) scale(1.06);
}

.player__play-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	background: var(--peach-300);
	color: var(--wine-900);
	box-shadow: 0 6px 20px rgba(255, 217, 138, 0.32);
	transition: transform 0.24s var(--ease), background-color 0.24s var(--ease);
}

.player__play-btn:hover {
	background: var(--peach-400);
	transform: scale(1.05);
}

.player__play-btn .icon-pause,
.player__play-btn.is-playing .icon-play {
	display: none;
}

.player__play-btn.is-playing .icon-pause {
	display: block;
}

/* ── Ticker ─────────────────────────────────────────────────────────────── */
/* Sits above the hero panel so the panel's drop shadow falls behind the rail
   rather than darkening its top edge. */
.ticker {
	position: relative;
	z-index: 2;
	max-width: var(--maxw);
	margin: 22px auto 0;
	display: flex;
	align-items: stretch;
	background: var(--white);
	border-radius: var(--r-pill);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.ticker__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 20px;
	background: var(--wine-800);
	color: var(--peach-300);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.ticker__viewport {
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* Short leading fade so items dissolve as they pass the LIVE tag instead of
	   being cut mid-letter by a hard edge; longer fade on the trailing side. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 40px), transparent);
}

.ticker__track {
	display: flex;
	gap: 34px;
	white-space: nowrap;
	will-change: transform;
	padding-inline: 24px;
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--ticker-to, -50%));
	}
}

.ticker__item {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-size: 0.82rem;
}

.ticker__label {
	font-weight: 700;
	color: var(--ink-900);
	letter-spacing: 0.05em;
	font-size: 0.72rem;
	text-transform: uppercase;
}

.ticker__val {
	color: var(--ink-700);
	font-variant-numeric: tabular-nums;
}

.ticker__delta {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
}

.ticker__delta--up {
	color: var(--up);
}

.ticker__delta--down {
	color: var(--down);
}

/* ── Intro (What is …) ──────────────────────────────────────────────────── */
.intro {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

/* One photo on a layered gradient card behind it, instead of a 3-shot
   collage — a quieter, more editorial frame. */
.intro__media {
	position: relative;
}

.intro__media::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	background: var(--panel);
	border-radius: var(--r-panel);
	z-index: -1;
}

.intro__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-card);
	box-shadow: var(--shadow-card);
	transition: transform 0.5s var(--ease);
}

.intro__media:hover img {
	transform: scale(1.03);
}

.intro__body p {
	color: var(--ink-500);
	margin-bottom: 16px;
	line-height: 1.75;
}

.intro__body .btn {
	margin-top: 12px;
}

/* ── Episode / post cards ───────────────────────────────────────────────── */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--gap);
}

.card-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Fixed column count, not auto-fill: auto-fill picks whatever number of tracks
   happens to fit, so a 4-item set lands as 3 + 1 orphan at some widths. A fixed
   2 x 2 keeps both rows full, and inside the ~796px content column it gives the
   cards roughly 386px each instead of the 181px a 4-across row would leave. */
.card-grid--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--r-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lift);
}

.card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--blush-300);
}

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

.card:hover .card__media img {
	transform: scale(1.05);
}

/* Wine scrim so the chip stays legible over any photo. */
.card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(52, 18, 10, 0.42) 0%, transparent 46%);
	pointer-events: none;
}

.card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: rgba(42, 22, 11, 0.94);
	color: var(--wine-500);
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
	flex: 1;
}

.card__title {
	font-size: 1.14rem;
	line-height: 1.28;
	letter-spacing: -0.02em;
}

.card__title a {
	background-image: linear-gradient(var(--wine-500), var(--wine-500));
	background-size: 0 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.32s var(--ease), color 0.22s var(--ease);
}

.card:hover .card__title a {
	background-size: 100% 1.5px;
	color: var(--wine-500);
}

.card__excerpt {
	color: var(--ink-500);
	font-size: 0.9rem;
	line-height: 1.62;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 12px;
	font-size: 0.76rem;
	color: var(--ink-300);
}

.card__meta time {
	font-variant-numeric: tabular-nums;
}

.card__dot {
	color: var(--blush-400);
}

/* Chips */
.chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.chip {
	display: inline-block;
	padding: 4px 11px;
	border-radius: var(--r-pill);
	background: var(--blush-200);
	color: var(--wine-500);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.chip:hover {
	background: var(--wine-800);
	color: var(--on-wine);
}

/* Feature card — the lead story, runs wide. */
.card--feature {
	grid-column: span 2;
	flex-direction: row;
	align-items: stretch;
}

.card--feature .card__media {
	flex: 0 0 46%;
	aspect-ratio: auto;
}

.card--feature .card__body {
	justify-content: center;
	padding: clamp(24px, 3vw, 40px);
}

.card--feature .card__title {
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
}

.card--feature .card__excerpt {
	font-size: 0.98rem;
}

/* ── Featured stories: lead + ledger ────────────────────────────────────── */
/* The homepage's one big editorial moment: a full-bleed lead story on the
   left with its headline set directly over the photo, and the rest of the
   week's stories as a numbered ledger on the right — closer to a market
   leaderboard than a repeated card grid. */
.feature-split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 44px);
	align-items: stretch;
}

.feature-lead {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--r-panel);
	overflow: hidden;
	min-height: 420px;
	box-shadow: var(--shadow-panel);
}

.feature-lead__media {
	position: absolute;
	inset: 0;
}

.feature-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.feature-lead:hover .feature-lead__media img {
	transform: scale(1.045);
}

.feature-lead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10, 5, 2, 0.94) 0%, rgba(10, 5, 2, 0.6) 34%, rgba(10, 5, 2, 0.08) 62%, transparent 78%);
}

.feature-lead__badge {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-self: flex-start;
	margin: 26px 0 0 26px;
	padding: 7px 15px;
	border-radius: var(--r-pill);
	background: var(--peach-300);
	color: var(--wine-900);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.feature-lead__body {
	position: relative;
	z-index: 1;
	min-width: 0;
	margin-top: auto;
	padding: clamp(22px, 3vw, 34px);
	color: var(--on-wine);
}

.feature-lead__title {
	/* The base h1-h4 rule sets color directly on every heading, so it wins
	   over inheriting on-wine from .feature-lead__body — inheritance never
	   competes with a rule that matches the element itself. .panel headings
	   dodge this via the higher-specificity ".panel h1…h4" rule, but this
	   card isn't a .panel, so it needs its own override. */
	color: var(--on-wine);
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin-bottom: 12px;
}

.feature-lead__title a {
	color: inherit;
}

.feature-lead__excerpt {
	color: var(--on-wine-dim);
	font-size: 0.98rem;
	line-height: 1.6;
	max-width: 52ch;
	margin-bottom: 16px;
}

.feature-lead__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.8rem;
	color: var(--on-wine-faint);
}

.feature-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--white);
	border-radius: var(--r-panel);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.feature-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--blush-300);
	transition: background-color 0.22s var(--ease);
}

.feature-row:last-child {
	border-bottom: 0;
}

.feature-row:hover {
	background: rgba(255, 122, 46, 0.06);
}

.feature-row__num {
	flex: 0 0 auto;
	width: 30px;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wine-500);
	opacity: 0.8;
}

.feature-row__media {
	flex: 0 0 64px;
	height: 64px;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--blush-300);
}

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

.feature-row__body {
	min-width: 0;
}

.feature-row__title {
	font-size: 0.96rem;
	line-height: 1.32;
	letter-spacing: -0.015em;
	transition: color 0.22s var(--ease);
}

.feature-row:hover .feature-row__title {
	color: var(--wine-500);
}

.feature-row__meta {
	display: block;
	margin-top: 5px;
	font-size: 0.72rem;
	color: var(--ink-300);
}

/* ── Desks — category strips ────────────────────────────────────────────── */
/* Full-width rows, not a 2x2 block: each desk reads as a shelf — a category
   label on the left, its three latest posts running across on the right. */
.desks__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.desk {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 40px);
	background: var(--white);
	border-radius: var(--r-card);
	padding: clamp(20px, 3vw, 28px);
	box-shadow: var(--shadow-card);
	transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}

.desk:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.desk__head {
	flex: 0 0 auto;
	width: clamp(140px, 15vw, 190px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding-right: clamp(20px, 3vw, 32px);
	border-right: 1px solid var(--blush-300);
	align-self: stretch;
	justify-content: center;
}

.desk__cat {
	font-family: var(--font-display);
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--wine-500);
	letter-spacing: -0.02em;
}

.desk__cat:hover {
	color: var(--peach-300);
}

.desk__count {
	font-size: 0.72rem;
	color: var(--ink-300);
	white-space: nowrap;
}

.desk__arrow {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--blush-200);
	color: var(--wine-500);
	flex-shrink: 0;
	transition: background-color 0.24s var(--ease), transform 0.24s var(--ease);
}

.desk:hover .desk__arrow {
	background: var(--wine-800);
	color: var(--peach-300);
	transform: translateX(3px);
}

.desk__leads {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.5vw, 24px);
}

.desk-lead {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.desk-lead__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--blush-300);
}

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

/* min-width:0 lets a long headline wrap instead of forcing the flex row wide. */
.desk-lead__body {
	min-width: 0;
}

.desk-lead__title {
	font-size: 0.92rem;
	line-height: 1.32;
	letter-spacing: -0.015em;
	transition: color 0.22s var(--ease);
}

.desk-lead:hover .desk-lead__title {
	color: var(--wine-500);
}

.desk-lead__date {
	display: block;
	margin-top: 5px;
	font-size: 0.72rem;
	color: var(--ink-300);
}

/* ── Coverage rail — horizontal scroll-snap ─────────────────────────────── */
/* A ranked, swipeable strip instead of another grid, so the second post list
   on the page reads differently from both the desk grid above and the
   lead+ledger split higher up. Right-edge mask hints there is more to scroll
   to without needing an explicit arrow control. */
/* Capped to the site's normal content width (not the full viewport) so a wide
   monitor doesn't leave a handful of cards stranded on the left with empty
   space beside them. */
.rail {
	position: relative;
	max-width: var(--maxw);
	margin-inline: auto;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
}

/* justify-content: center would look right, but centering an OVERFLOWING flex
   row risks stranding its start off-screen with no way to scroll back to it
   in some engines. "safe" falls back to start-alignment whenever centering
   would do that, so cards centre only when they actually fit the row. */
.rail__track {
	display: flex;
	justify-content: safe center;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 24px;
	padding: 4px 24px 18px;
	-webkit-overflow-scrolling: touch;
}

.rail__track::-webkit-scrollbar {
	height: 6px;
}

.rail__track::-webkit-scrollbar-thumb {
	background: var(--blush-400);
	border-radius: var(--r-pill);
}

.rail__track::-webkit-scrollbar-track {
	background: transparent;
}

.rail-card {
	position: relative;
	flex: 0 0 clamp(230px, 27vw, 290px);
	scroll-snap-align: start;
	background: var(--white);
	border-radius: var(--r-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.rail-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.rail-card__rank {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(10, 5, 2, 0.55);
	backdrop-filter: blur(3px);
	color: var(--peach-300);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9rem;
}

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

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

.rail-card__body {
	padding: 16px 18px 20px;
}

.rail-card__title {
	font-size: 0.98rem;
	line-height: 1.34;
	letter-spacing: -0.015em;
	margin-bottom: 8px;
	transition: color 0.22s var(--ease);
}

.rail-card:hover .rail-card__title {
	color: var(--wine-500);
}

.rail-card__meta {
	font-size: 0.74rem;
	color: var(--ink-300);
}

/* ── Host panel ─────────────────────────────────────────────────────────── */
/* Portrait on the left as a framed circle, the pull-quote promoted into the
   copy column instead of floating a card over the photo. */
.host {
	padding: clamp(34px, 4.5vw, 58px);
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.host__copy {
	min-width: 0;
}

.host__copy p {
	color: var(--on-wine-dim);
	line-height: 1.75;
	margin-bottom: 14px;
	font-size: 0.97rem;
}

.host__title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	margin-bottom: 18px;
}

.host__title em {
	font-style: normal;
	color: var(--peach-300);
}

.host__media {
	display: flex;
	justify-content: center;
}

.host__portrait {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid rgba(255, 237, 217, 0.14);
	box-shadow: 0 20px 50px rgba(12, 6, 2, 0.34);
}

/* Big pull-quote, promoted into the text column. */
.host__pullquote {
	position: relative;
	margin: 4px 0 20px;
	padding-left: 26px;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--on-wine);
}

.host__pullquote-mark {
	position: absolute;
	left: -6px;
	top: -0.3em;
	font-family: Georgia, serif;
	font-style: normal;
	font-size: 2.6em;
	color: var(--peach-300);
	opacity: 0.8;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
/* Intro parked in its own left column instead of centred above the list, so
   the accordion reads as a two-up reference layout rather than a stand-alone
   centred block. */
.faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.faq-layout__intro {
	position: sticky;
	top: 110px;
}

.faq-layout__intro .sec-head__sub {
	margin-top: 10px;
}

.faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq__item {
	background: var(--white);
	border-radius: var(--r-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: background 0.32s var(--ease);
}

.faq__item.is-open {
	background: var(--panel);
	box-shadow: var(--shadow-lift);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	border: 0;
	background: none;
	text-align: left;
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ink-900);
	transition: color 0.28s var(--ease);
}

.faq__item.is-open .faq__q {
	color: var(--on-wine);
}

.faq__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--blush-200);
	color: var(--wine-500);
	flex-shrink: 0;
	transition: background-color 0.28s var(--ease), color 0.28s var(--ease), transform 0.28s var(--ease);
}

.faq__item.is-open .faq__icon {
	background: var(--peach-300);
	color: var(--wine-900);
	transform: rotate(45deg);
}

/* Grid-rows trick: animates to auto height without a fixed max-height. */
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.34s var(--ease);
}

.faq__item.is-open .faq__a {
	grid-template-rows: 1fr;
}

.faq__a-inner {
	overflow: hidden;
}

.faq__a p {
	padding: 0 24px 22px;
	color: var(--on-wine-dim);
	font-size: 0.94rem;
	line-height: 1.7;
	max-width: 62ch;
}

/* ── Newsletter band ────────────────────────────────────────────────────── */
.brief {
	position: relative;
	margin-top: 56px;
	padding: clamp(30px, 4vw, 52px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.brief__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--peach-300);
	margin-bottom: 12px;
}

.brief__heading {
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	margin-bottom: 10px;
}

.brief__heading em {
	font-style: normal;
	color: var(--peach-300);
}

.brief__sub {
	color: var(--on-wine-dim);
	font-size: 0.95rem;
}

.brief__row {
	display: flex;
	gap: 9px;
	background: rgba(42, 22, 11, 0.97);
	border-radius: var(--r-pill);
	padding: 7px 7px 7px 8px;
}

.brief__row .newsletter-form__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 11px 14px;
	font-size: 0.93rem;
	color: var(--ink-900);
	border-radius: var(--r-pill);
}

.brief__row .newsletter-form__input:focus {
	outline: none;
}

.brief__row .newsletter-form__input::placeholder {
	color: var(--ink-300);
}

.newsletter-form__msg {
	margin-top: 11px;
	font-size: 0.85rem;
	font-weight: 500;
	padding-left: 4px;
}

.newsletter-form__msg--success {
	color: var(--peach-300);
}

.newsletter-form__msg--error {
	color: #FFB4B4;
}

/* On a light ground the message colours must flip. */
.sidebar-newsletter__inner .newsletter-form__msg--success {
	color: var(--up);
}

.sidebar-newsletter__inner .newsletter-form__msg--error {
	color: var(--down);
}

/* ── Subscribe section (full form) ──────────────────────────────────────── */
.subscribe {
	padding: 0 24px var(--pad-section);
}

/* Single centred column — a pitch header on top, the form card capped to a
   comfortable measure below it — rather than a two-up split panel. */
.subscribe__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(36px, 5vw, 66px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.subscribe__intro {
	max-width: 620px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.subscribe__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--peach-300);
	margin-bottom: 14px;
}

.subscribe__heading {
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	margin-bottom: 14px;
}

.subscribe__heading em {
	font-style: normal;
	color: var(--peach-300);
}

.subscribe__sub {
	color: var(--on-wine-dim);
	line-height: 1.7;
	margin: 0 auto 22px;
	max-width: 42ch;
}

.subscribe__points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
}

.subscribe__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--on-wine-dim);
}

.subscribe__points li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 217, 138, 0.2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD98A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 11px;
	background-repeat: no-repeat;
	background-position: center;
}

.subscribe__form-wrap {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	text-align: left;
	background: rgba(14, 7, 3, 0.65);
	border: 1px solid rgba(255, 237, 217, 0.13);
	border-radius: 26px;
	padding: clamp(22px, 3vw, 32px);
}

.subscribe__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 20px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.field__label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--on-wine-dim);
	padding: 0;
}

.field__optional {
	color: var(--on-wine-faint);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.field__input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(255, 237, 217, 0.18);
	border-radius: var(--r-sm);
	background: rgba(255, 237, 217, 0.07);
	color: var(--on-wine);
	font: inherit;
	font-size: 0.92rem;
	transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}

.field__input::placeholder {
	color: var(--on-wine-faint);
}

.field__input:focus {
	outline: none;
	border-color: var(--peach-300);
	background: rgba(255, 237, 217, 0.11);
}

.subscribe__group {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
}

.subscribe__group legend {
	margin-bottom: 11px;
}

.topics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	gap: 9px;
}

.topic {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-size: 0.87rem;
	color: var(--on-wine-dim);
	transition: color 0.2s var(--ease);
}

.topic:hover {
	color: var(--on-wine);
}

.topic__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.topic__box {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 6px;
	border: 1.5px solid rgba(255, 237, 217, 0.28);
	color: transparent;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.topic__box svg {
	width: 11px;
	height: 11px;
}

.topic__input:checked + .topic__box {
	background: var(--peach-300);
	border-color: var(--peach-300);
	color: var(--wine-900);
}

.topic__input:focus-visible + .topic__box {
	outline: 3px solid var(--peach-300);
	outline-offset: 2px;
}

.cadence {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.cadence__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.cadence__pill {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--r-pill);
	border: 1.5px solid rgba(255, 237, 217, 0.22);
	font-size: 0.85rem;
	color: var(--on-wine-dim);
	cursor: pointer;
	transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}

.cadence__opt:hover .cadence__pill {
	border-color: rgba(255, 237, 217, 0.44);
	color: var(--on-wine);
}

.cadence__input:checked + .cadence__pill {
	background: var(--peach-300);
	border-color: var(--peach-300);
	color: var(--wine-900);
	font-weight: 600;
}

.cadence__input:focus-visible + .cadence__pill {
	outline: 3px solid var(--peach-300);
	outline-offset: 2px;
}

.subscribe__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.subscribe__submit {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.subscribe__privacy {
	font-size: 0.79rem;
	color: var(--on-wine-faint);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Full-bleed band, unlike the other signature surfaces (hero/host/subscribe)
   which stay inset as rounded .panel cards — the footer runs edge to edge,
   with its content still lined up to the site's normal container width. */
.site-footer {
	background: linear-gradient(180deg, var(--wine-900) 0%, var(--wine-800) 100%);
	color: var(--on-wine);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
	color: var(--on-wine);
}

.site-footer a:not(.btn) {
	color: var(--on-wine);
}

.footer-container {
	padding-top: clamp(38px, 5vw, 60px);
	padding-bottom: 28px;
}

.footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.2fr);
	gap: clamp(26px, 3.5vw, 52px);
	padding-bottom: 34px;
}

.footer-brand__logo img,
.footer-brand__logo .custom-logo {
	max-height: 50px;
	width: auto;
}

/* Falling back to the header logo on the dark footer needs it forced white.
   A dedicated footer logo (uploaded via the customizer) is already coloured
   for a dark background, so it's excluded from the filter. */
.footer-brand__logo--fallback img,
.footer-brand__logo--fallback .custom-logo {
	filter: brightness(0) invert(1);
}

.footer-brand__name {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--on-wine);
}

.footer-brand__desc {
	margin-top: 14px;
	color: var(--on-wine-dim);
	font-size: 0.9rem;
	line-height: 1.7;
	max-width: 34ch;
}

.footer-col__heading {
	font-size: 0.98rem;
	color: var(--on-wine);
	margin-bottom: 15px;
}

.footer-col__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.footer-col__list a {
	color: var(--on-wine-dim);
	font-size: 0.89rem;
	transition: color 0.2s var(--ease), padding-left 0.24s var(--ease);
}

.footer-col__list a:hover {
	color: var(--peach-300);
	padding-left: 4px;
}

/* Footer newsletter */
.footer-signup__heading {
	font-size: 0.98rem;
	color: var(--on-wine);
	margin-bottom: 8px;
}

.footer-signup__sub {
	color: var(--on-wine-dim);
	font-size: 0.86rem;
	line-height: 1.6;
	margin-bottom: 14px;
}

.footer-signup__form {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.footer-signup__form .newsletter-form__input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(255, 237, 217, 0.18);
	border-radius: var(--r-pill);
	background: rgba(255, 237, 217, 0.08);
	color: var(--on-wine);
	font: inherit;
	font-size: 0.89rem;
}

.footer-signup__form .newsletter-form__input::placeholder {
	color: var(--on-wine-faint);
}

.footer-signup__form .newsletter-form__input:focus {
	outline: none;
	border-color: var(--peach-300);
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 237, 217, 0.14);
	font-size: 0.82rem;
	color: var(--on-wine-faint);
}

.footer-legal {
	display: flex;
	gap: 18px;
}

.footer-legal a:hover {
	color: var(--peach-300);
}

/* ── Archive ────────────────────────────────────────────────────────────── */
.archive-hero {
	padding: 8px 24px 0;
	margin-bottom: 48px;
}

.archive-hero__panel {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(40px, 5.5vw, 72px) clamp(28px, 5vw, 60px);
	text-align: center;
}

.archive-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 15px;
	border-radius: var(--r-pill);
	background: rgba(255, 237, 217, 0.12);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--on-wine-dim);
	margin-bottom: 18px;
}

.archive-hero__title {
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	letter-spacing: -0.035em;
}

.archive-hero__desc {
	margin: 16px auto 0;
	max-width: 58ch;
	color: var(--on-wine-dim);
	line-height: 1.7;
}

.archive-hero__count {
	margin-top: 14px;
	font-size: 0.85rem;
	color: var(--on-wine-faint);
}

.archive-hero__count strong {
	color: var(--peach-300);
}

.archive-main .container {
	padding-bottom: var(--pad-section);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination,
.navigation.pagination {
	margin-top: 48px;
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 14px;
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--ink-700);
	font-size: 0.9rem;
	font-weight: 500;
	box-shadow: var(--shadow-card);
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-numbers:hover {
	transform: translateY(-2px);
	color: var(--wine-500);
}

.page-numbers.current {
	background: var(--wine-800);
	color: var(--on-wine);
}

.page-numbers.dots {
	background: none;
	box-shadow: none;
}

/* ── Single post ────────────────────────────────────────────────────────── */
.single-main,
.page-main {
	padding-block: 40px var(--pad-section);
}

.single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.single-article {
	background: var(--white);
	border-radius: var(--r-panel);
	padding: clamp(28px, 4vw, 54px);
	box-shadow: var(--shadow-card);
}

.article-header {
	margin-bottom: 28px;
}

.article-header__chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.article-header__title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.article-header__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	margin-top: 16px;
	font-size: 0.85rem;
	color: var(--ink-300);
}

.article-hero {
	margin: 0 0 32px;
	border-radius: var(--r-card);
	overflow: hidden;
}

.article-hero__img {
	width: 100%;
	object-fit: cover;
}

.article-hero__caption {
	margin-top: 10px;
	font-size: 0.8rem;
	color: var(--ink-300);
	text-align: center;
}

/* Article body */
.entry-content {
	font-size: 1.05rem;
	line-height: 1.78;
	color: var(--ink-700);
}

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

.entry-content h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	margin-top: 2em;
	color: var(--ink-900);
}

.entry-content h3 {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	margin-top: 1.7em;
	color: var(--ink-900);
}

.entry-content a {
	color: var(--wine-500);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.entry-content a:hover {
	color: var(--peach-300);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
}

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

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

.entry-content blockquote {
	margin: 2em 0;
	padding: 22px 28px;
	border-left: 3px solid var(--peach-400);
	background: var(--blush-100);
	border-radius: var(--r-sm);
	font-size: 1.08rem;
	font-style: italic;
	color: var(--ink-900);
}

.entry-content blockquote p + p {
	margin-top: 0.8em;
}

.entry-content code {
	padding: 2px 7px;
	border-radius: 6px;
	background: var(--blush-200);
	font-size: 0.9em;
	color: var(--wine-500);
}

.entry-content pre {
	padding: 20px;
	border-radius: var(--r-card);
	background: var(--wine-900);
	color: var(--on-wine);
	overflow-x: auto;
}

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

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.entry-content th,
.entry-content td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--blush-300);
	text-align: left;
}

.entry-content th {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink-900);
}

/* Post nav */
.article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--blush-300);
}

.article-nav__next {
	text-align: right;
}

.article-nav__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ink-300);
	margin-bottom: 6px;
}

.article-nav__link {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--ink-900);
	transition: color 0.22s var(--ease);
}

.article-nav__link:hover {
	color: var(--wine-500);
}

/* Related */
.related-posts {
	margin-top: 56px;
}

.related-posts__heading {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin-bottom: 24px;
}

/* Sidebar */
/* Clears the pinned nav pill (its height plus the bar's own padding). */
.single-sidebar {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sidebar-panel {
	background: var(--white);
	border-radius: var(--r-card);
	padding: 24px;
	box-shadow: var(--shadow-card);
}

.sidebar-panel__heading,
.widget-title {
	font-size: 1rem;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--blush-300);
}

.side-article + .side-article {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--blush-200);
}

.side-article__title {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: -0.015em;
	transition: color 0.22s var(--ease);
}

.side-article__title a:hover {
	color: var(--wine-500);
}

.side-article__time {
	display: block;
	margin-top: 5px;
	font-size: 0.72rem;
	color: var(--ink-300);
}

.sidebar-newsletter__inner {
	background: var(--panel);
	border-radius: var(--r-card);
	padding: 24px;
	color: var(--on-wine);
	box-shadow: var(--shadow-card);
}

.sidebar-newsletter__heading {
	color: var(--on-wine);
	font-size: 1.05rem;
	margin-bottom: 8px;
}

.sidebar-newsletter__sub {
	color: var(--on-wine-dim);
	font-size: 0.86rem;
	line-height: 1.6;
	margin-bottom: 16px;
}

.sidebar-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sidebar-newsletter__form .newsletter-form__input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(255, 237, 217, 0.2);
	border-radius: var(--r-pill);
	background: rgba(255, 237, 217, 0.09);
	color: var(--on-wine);
	font: inherit;
	font-size: 0.89rem;
}

.sidebar-newsletter__form .newsletter-form__input::placeholder {
	color: var(--on-wine-faint);
}

.sidebar-newsletter__form .newsletter-form__input:focus {
	outline: none;
	border-color: var(--peach-300);
}

.sidebar-newsletter__inner .newsletter-form__msg--success {
	color: var(--peach-300);
}

.sidebar-newsletter__inner .newsletter-form__msg--error {
	color: #FFB4B4;
}

.widget + .widget {
	margin-top: 20px;
}

/* ── Static page ────────────────────────────────────────────────────────── */
/* Short pages (a nearly-empty Privacy Policy, a one-line About) would
   otherwise leave the footer riding up right under the content instead of
   sitting at the bottom of the viewport. `.page` is the body class WordPress
   adds for anything rendered by page.php, so this only affects that
   template — scoped by content type, not a guessed pixel height. */
body.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.page .site-main {
	flex: 1 0 auto;
}

.static-page {
	background: var(--white);
	border-radius: var(--r-panel);
	padding: clamp(28px, 4vw, 54px);
	box-shadow: var(--shadow-card);
}

.page-header {
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--blush-300);
}

.page-header__title {
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	letter-spacing: -0.035em;
}

.page-header__updated {
	display: block;
	margin-top: 12px;
	font-size: 0.83rem;
	color: var(--ink-300);
}

.page-hero {
	margin: 0 0 28px;
	border-radius: var(--r-card);
	overflow: hidden;
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.error-main {
	padding: 8px 24px var(--pad-section);
}

.error-panel {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(46px, 6vw, 86px) clamp(28px, 5vw, 60px);
	text-align: center;
}

.error-code {
	font-family: var(--font-display);
	font-size: clamp(4.5rem, 15vw, 9rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 217, 138, 0.5);
	margin-bottom: 18px;
}

.error-title {
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	margin-bottom: 14px;
}

.error-desc {
	max-width: 52ch;
	margin: 0 auto 28px;
	color: var(--on-wine-dim);
	line-height: 1.7;
}

.error-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.error-recent {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 237, 217, 0.14);
	text-align: left;
}

.error-recent__heading {
	font-size: 1.05rem;
	margin-bottom: 18px;
	text-align: center;
}

.error-recent__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.error-recent__list li a {
	display: block;
	padding: 14px 18px;
	border-radius: var(--r-sm);
	background: rgba(255, 237, 217, 0.08);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.93rem;
	line-height: 1.35;
	transition: background-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.error-recent__list li a:hover {
	background: rgba(255, 237, 217, 0.16);
	transform: translateY(-2px);
}

.error-recent__list time {
	display: block;
	margin-top: 5px;
	font-size: 0.72rem;
	color: var(--on-wine-faint);
	font-weight: 400;
}

/* ── Empty states ───────────────────────────────────────────────────────── */
.no-results,
.no-posts {
	text-align: center;
	padding: 64px 24px;
	color: var(--ink-500);
}

.no-results .btn {
	margin-top: 18px;
}

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

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

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text {
	font-size: 0.8rem;
	color: var(--ink-300);
	text-align: center;
	margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
	:root {
		--pad-section: 68px;
		--r-panel: 28px;
	}

	/* minmax(0, 1fr), not a bare 1fr: a bare fr track has an automatic minimum
	   of min-content, so the column refuses to shrink below its widest child
	   and the content spills out of the panel on narrow screens. */
	.intro,
	.host,
	.brief,
	.feature-split,
	.faq-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.faq-layout__intro {
		position: static;
	}

	.feature-lead {
		min-height: 340px;
	}

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

	.single-sidebar {
		position: static;
	}

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

	.card--feature {
		grid-column: span 1;
		flex-direction: column;
	}

	.card--feature .card__media {
		flex: none;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 860px) {
	.topbar__tagline {
		display: none;
	}

	/* The tagline carried the margin-left:auto that pushed the strip apart, so
	   hiding it leaves the date stranded next to the status. Move the push onto
	   the date itself. */
	.topbar__date {
		margin-left: auto;
	}

	/* Mobile nav — the list drops into a card below the bar. */
	.nav-toggle {
		display: flex;
	}

	/* The toggle button now shares the bar with the logo, so a long logo
	   needs a tighter cap here than the 250px desktop allows. */
	.nav-brand img,
	.custom-logo {
		max-width: 200px;
	}

	/* Anchored to .nav-primary, so the inset matches that element's padding
	   and the panel lines up with the pill above it. */
	.nav-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 24px;
		right: 24px;
		background: var(--white);
		border-radius: var(--r-card);
		padding: 12px;
		box-shadow: var(--shadow-lift);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
		max-height: 70vh;
		overflow-y: auto;
	}

	.nav-menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

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

	.nav-list a {
		padding: 12px 16px;
		border-radius: var(--r-sm);
	}

	/* Dropdowns become static sub-lists on touch. */
	.nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0 0 0 14px;
		background: none;
	}

	.nav-cta {
		display: none;
	}

	/* The menu is absolutely positioned here, so it no longer takes up flow
	   space and can't push the actions across. This does it explicitly, keeping
	   the toggle hard against the right edge of the pill. */
	.nav-actions {
		margin-left: auto;
	}

	.hero__copy {
		max-width: none;
	}

	/* The category label and its 3-across leads get cramped below this width —
	   stack the label above and let the leads keep their own row. */
	.desk {
		flex-direction: column;
		align-items: stretch;
	}

	.desk__head {
		width: auto;
		flex-direction: row;
		align-items: center;
		align-self: stretch;
		border-right: 0;
		border-bottom: 1px solid var(--blush-300);
		padding-right: 0;
		padding-bottom: 16px;
		margin-bottom: 4px;
	}

	.desk__count {
		margin-left: auto;
	}

	.desk__leads {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

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

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

	.article-nav__next {
		text-align: left;
	}
}

@media (max-width: 620px) {
	:root {
		--pad-section: 52px;
		--r-panel: 24px;
		--gap: 16px;
	}

	body {
		font-size: 15px;
	}

	.container,
	.hero,
	.subscribe,
	.archive-hero,
	.error-main {
		padding-inline: 16px;
	}

	/* The panel's own clamp bottoms out at 28px a side, which leaves too little
	   room for the headline on a 320px screen and pushed content past the edge. */
	.hero__panel,
	.subscribe__inner,
	.archive-hero__panel,
	.error-panel {
		padding-inline: 20px;
	}

	.hero__title {
		font-size: clamp(1.6rem, 7.3vw, 2rem);
	}

	/* Narrower still, so the logo always leaves room for the toggle button
	   on a phone-width screen. */
	.nav-brand img,
	.custom-logo {
		max-width: 200px;
	}

	/* Tighter inset on small screens. */
	.nav-primary {
		padding-inline: 16px;
	}

	.nav-inner {
		padding-left: 18px;
	}

	.nav-menu {
		left: 16px;
		right: 16px;
	}

	.topbar__inner {
		padding-inline: 16px;
		font-size: 0.66rem;
		gap: 12px;
	}

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

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

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

	.footer-bottom {
		justify-content: center;
		text-align: center;
	}

	.ticker__tag {
		padding-inline: 14px;
		font-size: 0.62rem;
	}

	.player__transport {
		gap: 10px;
	}

	/* Back into the flow at this width: the console is too narrow to hold a
	   centred trio and a pinned button without them overlapping. */
	.player__rate {
		position: static;
		transform: none;
	}

	.player__rate:hover {
		transform: scale(1.06);
	}
}