/* ==========================================================================
   Sovereign Terminal — main.css
   Wine & Blush: rounded editorial panels for finance news + podcast.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
	/* Wine — the brand ground. Panels, footer, hero. */
	--wine-900: #5C0A2C;
	--wine-800: #7A0E3C;
	--wine-700: #93124A;
	--wine-600: #B41A5F;
	--wine-500: #C93571;

	/* Blush — the page ground. */
	--blush-100: #FBF6F8;
	--blush-200: #F6EDF1;
	--blush-300: #EFE0E7;
	--blush-400: #E3CCD7;

	/* Peach — the single warm accent. Buttons, marks, highlights. */
	--peach-300: #F6D9AF;
	--peach-400: #EFC98E;
	--peach-500: #E3B26A;

	--cream: #FFF9F0;
	--white: #FFFFFF;

	--ink-900: #1A0B12;
	--ink-700: #3D2530;
	--ink-500: #6B5560;
	--ink-300: #9C8993;

	/* On-wine text */
	--on-wine: #FFF1F6;
	--on-wine-dim: rgba(255, 241, 246, 0.72);
	--on-wine-faint: rgba(255, 241, 246, 0.44);

	--up: #1F9D6B;
	--down: #D94A5C;

	/* 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, 226, 240, 0.10) 11%,
			rgba(255, 255, 255, 0.17) 13%,
			rgba(255, 226, 240, 0.05) 16%,
			transparent 24%,
			rgba(90, 8, 40, 0.16) 38%,
			transparent 47%,
			rgba(255, 228, 242, 0.08) 58%,
			rgba(255, 255, 255, 0.13) 60.5%,
			transparent 66%,
			rgba(72, 6, 32, 0.18) 79%,
			rgba(255, 224, 240, 0.07) 92%,
			transparent 97%),
		linear-gradient(76deg,
			rgba(58, 4, 26, 0.20) 0%,
			transparent 26%,
			rgba(255, 232, 244, 0.07) 49%,
			transparent 72%,
			rgba(58, 4, 26, 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: 760px;

	--shadow-card: 0 2px 4px rgba(90, 20, 50, 0.04), 0 12px 32px rgba(90, 20, 50, 0.07);
	--shadow-lift: 0 6px 12px rgba(90, 20, 50, 0.07), 0 24px 56px rgba(90, 20, 50, 0.13);
	--shadow-panel: 0 24px 70px rgba(70, 10, 40, 0.22);

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

	--logo-h: 40px;
}

/* ── 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-600);
	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);
}

.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(246, 217, 175, 0.7);
	animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(246, 217, 175, 0.65);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(246, 217, 175, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(246, 217, 175, 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-600);
}

.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. */
.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: var(--peach-300);
	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(196, 140, 70, 0.28);
}

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

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

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

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

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

/* Outline on blush ground. */
.btn--outline {
	background: transparent;
	color: var(--wine-800);
	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-600);
}

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

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

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

/* 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, 200, 225, 0.24) 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;
}

.hero__panel {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(40px, 6vw, 78px) clamp(28px, 5vw, 68px) clamp(48px, 6vw, 78px);
	display: grid;
	/* Even split: the copy column gets a full half of the panel. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

/* The grid column is already half the panel; this only stops the measure from
   running past it on very wide screens. */
.hero__copy {
	max-width: 100%;
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border-radius: var(--r-pill);
	background: rgba(255, 241, 246, 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(2.5rem, 5.6vw, 4.15rem);
	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-bottom: 32px;
	max-width: 44ch;
}

.hero__actions {
	display: flex;
	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;
}

/* Hero right column — the console. */
.hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ── Episode: cover art + console as one shell ──────────────────────────── */
.episode {
	position: relative;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 18px 46px rgba(40, 4, 22, 0.32);
	/* One border around the pair; the console below drops its own top edge. */
	border: 1px solid rgba(255, 241, 246, 0.14);
	background: rgba(20, 4, 12, 0.34);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.episode__cover {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wine-900);
}

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

/* Wine wash + bottom fade so the caption reads and the art hands off to the
   console below without a visible seam. */
.episode__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(92, 10, 44, 0.12) 0%, rgba(92, 10, 44, 0.55) 62%, rgba(26, 6, 16, 0.9) 100%);
	pointer-events: none;
}

.episode__caption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.episode__num {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--peach-300);
}

.episode__name {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.9vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.15;
	color: var(--on-wine);
}

/* ── Player console ─────────────────────────────────────────────────────── */
/* Inside .episode the console is the lower half of a shared shell, so it
   carries no border, radius or shadow of its own. */
.console {
	position: relative;
	padding: 20px 24px 24px;
}

.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, 241, 246, 0.26);
	transition: background-color 0.2s var(--ease);
}

.player__bar-buffer {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 0;
	background: rgba(255, 241, 246, 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(246, 217, 175, 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, 241, 246, 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, 241, 246, 0.2);
	transform: scale(1.06);
}

.player__skip-num {
	position: absolute;
	font-size: 0.53rem;
	font-weight: 700;
	letter-spacing: 0;
	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(246, 217, 175, 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;
}

/* Unmute prompt */
/* Sits over the cover art just above the console. Anchored from the bottom so
   it never collides with the "on air" row, and kept inside the episode shell,
   which clips overflow — a negative offset here would cut the prompt in half. */
/* Top-right of the cover art. Measured from the console's top edge upward, so
   it clears the episode caption that runs along the bottom of the artwork. */
.unmute {
	position: absolute;
	bottom: calc(100% + 62px);
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--peach-300);
	color: var(--wine-900);
	font-size: 0.78rem;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(40, 4, 22, 0.28);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
	z-index: 3;
}

.unmute.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.unmute__icon {
	display: inline-flex;
}

.unmute__icon-loud {
	display: none;
}

.unmute__pulse {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(246, 217, 175, 0.6);
	animation: pulse 2.2s var(--ease) infinite;
	pointer-events: none;
}

/* Hero dossier — the numbers under the console. */
.dossier {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.dossier__item {
	flex: 1;
	min-width: 100px;
	padding: 13px 15px;
	border-radius: var(--r-sm);
	background: rgba(255, 241, 246, 0.09);
	border: 1px solid rgba(255, 241, 246, 0.1);
}

.dossier__label {
	font-size: 0.63rem;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--on-wine-faint);
	font-weight: 600;
}

.dossier__val {
	margin: 3px 0 0;
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--on-wine);
	/* Wrap the label under a long value instead of overflowing the tile. */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

/* The value can be a number ("1/6") or a word ("ChatGPT"), so it needs a real
   word-space before the trailing label rather than a hairline margin. */
.dossier__num {
	color: var(--peach-300);
	margin-right: 0.35em;
	font-size: 1.24rem;
}

/* Synopsis */
.synopsis {
	margin-top: 26px;
	max-width: 56ch;
}

.synopsis__text {
	color: var(--on-wine-dim);
	font-size: 0.95rem;
	line-height: 1.7;
}

.synopsis__more .synopsis__text {
	margin-top: 12px;
}

.synopsis__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--peach-300);
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.synopsis__toggle:hover {
	color: var(--peach-400);
}

.synopsis__toggle svg {
	transition: transform 0.28s var(--ease);
}

.synopsis__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ── 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;
}

.intro__media {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.intro__shot {
	border-radius: var(--r-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	background: var(--blush-300);
}

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

.intro__shot:hover img {
	transform: scale(1.04);
}

/* Spans both rows and takes its height from them, so its bottom edge lines up
   with the second wide shot. A fixed aspect-ratio here would leave the column
   short of the stack beside it. */
.intro__shot--tall {
	grid-row: span 2;
}

.intro__shot--wide {
	aspect-ratio: 4 / 3;
}

.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(92, 10, 44, 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(255, 249, 240, 0.94);
	color: var(--wine-800);
	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-600), var(--wine-600));
	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-700);
}

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

/* ── Desks — category strips ────────────────────────────────────────────── */
/* Two columns — the four desks read as a 2x2 block. */
.desks__stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
}

.desk {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--r-card);
	padding: 24px;
	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 {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--blush-300);
}

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

.desk__cat:hover {
	color: var(--wine-600);
}

.desk__count {
	margin-left: auto;
	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-700);
	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-lead {
	display: flex;
	gap: 14px;
	margin-bottom: 14px;
}

.desk-lead__media {
	flex: 0 0 82px;
	height: 66px;
	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.98rem;
	line-height: 1.32;
	letter-spacing: -0.015em;
	transition: color 0.22s var(--ease);
}

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

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

.desk__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
}

.desk__list-link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	margin-inline: -12px;
	border-radius: var(--r-sm);
	transition: background-color 0.22s var(--ease);
}

.desk__list-link:hover {
	background: var(--blush-200);
}

.desk__list-title {
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink-700);
}

.desk__list-link:hover .desk__list-title {
	color: var(--wine-700);
}

.desk__list-time {
	font-size: 0.7rem;
	color: var(--ink-300);
}

/* ── Host panel ─────────────────────────────────────────────────────────── */
.host {
	padding: clamp(34px, 4.5vw, 58px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.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 {
	position: relative;
}

.host__portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-card);
	box-shadow: 0 20px 50px rgba(40, 4, 22, 0.34);
}

/* Pull quote floating over the portrait. */
.host__quote {
	position: absolute;
	top: 18px;
	right: -12px;
	max-width: 210px;
	padding: 15px 18px;
	background: var(--cream);
	color: var(--ink-900);
	border-radius: var(--r-card);
	font-size: 0.85rem;
	line-height: 1.5;
	font-style: italic;
	box-shadow: var(--shadow-lift);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq {
	max-width: 860px;
	margin-inline: auto;
	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-800);
	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;
}

/* ── Quotes marquee ─────────────────────────────────────────────────────── */
.quotes {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.quotes__track {
	display: flex;
	gap: 18px;
	width: max-content;
	animation: quote-drift 46s linear infinite;
}

.quotes:hover .quotes__track,
.quotes:focus-within .quotes__track {
	animation-play-state: paused;
}

/* Travels by the measured distance between the two identical sets, set as
   --quote-shift by main.js. A -50% translate is subtly wrong: the flex gap
   between the two sets is not part of either half, so -50% undershoots by half
   a gap and the loop visibly jumps each cycle. */
@keyframes quote-drift {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(var(--quote-shift, -50%));
	}
}

.quote {
	flex: 0 0 265px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 22px 20px;
	border-radius: var(--r-card);
	background: var(--panel);
	color: var(--on-wine);
	box-shadow: var(--shadow-card);
}

/* Alternate cards in cream, so the row reads as a set rather than a block. */
.quote:nth-child(even) {
	background: var(--cream);
	color: var(--ink-900);
}

.quote__text {
	font-size: 0.9rem;
	line-height: 1.58;
	font-style: italic;
}

.quote__by {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--peach-300);
}

.quote:nth-child(even) .quote__by {
	color: var(--wine-700);
}

/* ── 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(255, 249, 240, 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);
}

.subscribe__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(36px, 5vw, 66px);
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 62px);
	align-items: start;
}

.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-bottom: 22px;
	max-width: 42ch;
}

.subscribe__points {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.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(246, 217, 175, 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='%23F6D9AF' 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 {
	background: rgba(20, 4, 12, 0.24);
	border: 1px solid rgba(255, 241, 246, 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, 241, 246, 0.18);
	border-radius: var(--r-sm);
	background: rgba(255, 241, 246, 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, 241, 246, 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, 241, 246, 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, 241, 246, 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, 241, 246, 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 ─────────────────────────────────────────────────────────────── */
.site-footer {
	padding: 0 24px 24px;
}

.footer-panel {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(38px, 5vw, 60px) clamp(28px, 4vw, 54px) 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: 44px;
	width: auto;
	/* Logos are dark-on-light; on wine they need inverting. */
	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, 241, 246, 0.18);
	border-radius: var(--r-pill);
	background: rgba(255, 241, 246, 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, 241, 246, 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, 241, 246, 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-700);
}

.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-700);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.entry-content a:hover {
	color: var(--wine-600);
}

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

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

/* 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-700);
}

.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, 241, 246, 0.2);
	border-radius: var(--r-pill);
	background: rgba(255, 241, 246, 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 ────────────────────────────────────────────────────────── */
.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(246, 217, 175, 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, 241, 246, 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, 241, 246, 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, 241, 246, 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. */
	.hero__panel,
	.intro,
	.host,
	.brief,
	.subscribe__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.host__media {
		max-width: 420px;
		margin-inline: auto;
	}

	.host__quote {
		right: 0;
	}

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

	/* 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;
	}

	/* Two desk columns get cramped below this width. */
	.desks__stack {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.host__quote {
		position: static;
		max-width: none;
		margin-top: 14px;
	}

	.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,
	.site-footer,
	.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,
	.footer-panel,
	.archive-hero__panel,
	.error-panel {
		padding-inline: 20px;
	}

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

	/* 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);
	}

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

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

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

	.quote {
		flex: 0 0 230px;
	}

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

	/* The button's aria-label still names it, so the visible text can go. */
	.unmute__text {
		display: none;
	}

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