/*
Theme Name: Podcast Stream Theme
Theme URI: https://michaelferrari.net
Author: Michael Ferrari
Author URI: https://michaelferrari.net
Description: A streaming-platform-inspired WordPress theme for podcasts. Big featured episode hero, horizontal scroll rows, click-to-modal episode details, guest tag filtering, and a persistent bottom Spotify player.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: podcast-stream-theme
*/

/* ==================================================================
   DESIGN TOKENS
   Signature: waveform bars — used as the play affordance, hover state,
   and section dividers. Palette nods to a studio "ON AIR" sign against
   near-black broadcast walls.
   ================================================================== */
:root {
	--color-bg: #0B0B0D;
	--color-surface: #16161A;
	--color-surface-hover: #1F1F24;
	--color-border: #26262C;
	--color-accent: #E8B04B;
	--color-accent-dim: #B98A38;
	--color-accent-soft: rgba(232, 176, 75, 0.14);
	--color-text: #F5F5F0;
	--color-text-muted: #9A9AA2;
	/* Dimmest text colour, so it sets the floor for WCAG AA (4.5:1): #84848C
	   is 5.3:1 on --color-bg and 4.9:1 on --color-surface. The old #616168
	   was 3.2:1 / 2.9:1 and failed. Don't darken this. */
	--color-text-faint: #84848C;

	--font-display: 'Archivo Black', 'Helvetica Neue', sans-serif;
	--font-body: 'Inter', -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', 'Courier New', monospace;

	--radius-sm: 4px;
	--radius-md: 8px;
	--container-pad: clamp(20px, 5vw, 64px);
	--player-height: 92px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.5;
	padding-bottom: 0;
}
body.pst-player-active { padding-bottom: var(--player-height); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.pst-container { padding-left: var(--container-pad); padding-right: var(--container-pad); }

/* "Skip to content": off-screen until a keyboard user tabs to it. */
.pst-skip-link {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 200;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: #17130A;
	font-weight: 700;
	font-size: 14px;
	transform: translateY(-150%);
}
.pst-skip-link:focus { transform: none; }
/* The skip link focuses <main>; a ring round the whole page isn't useful. */
.pst-main:focus { outline: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==================================================================
   WAVEFORM SIGNATURE ELEMENT
   ================================================================== */
.pst-waveform {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
}
.pst-waveform span {
	width: 3px;
	background: var(--color-accent);
	border-radius: 1px;
	animation: pst-wave 1s ease-in-out infinite;
}
.pst-waveform span:nth-child(1) { height: 40%; animation-delay: -0.9s; }
.pst-waveform span:nth-child(2) { height: 100%; animation-delay: -0.6s; }
.pst-waveform span:nth-child(3) { height: 65%; animation-delay: -0.3s; }
.pst-waveform span:nth-child(4) { height: 85%; animation-delay: -0.15s; }
.pst-waveform span:nth-child(5) { height: 50%; animation-delay: 0s; }
@keyframes pst-wave {
	0%, 100% { transform: scaleY(0.4); }
	50% { transform: scaleY(1); }
}

.pst-divider {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 18px;
	opacity: 0.5;
	margin: 0 0 20px;
}
.pst-divider span {
	width: 2px;
	background: var(--color-text-faint);
	border-radius: 1px;
}
.pst-divider span:nth-child(odd) { height: 60%; }
.pst-divider span:nth-child(even) { height: 100%; }

/* ==================================================================
   HEADER
   ================================================================== */
.pst-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px var(--container-pad);
	/* Dark enough behind the menu text (mid-height) to keep 4.5:1 even over
	   bright hero artwork; it was ~0.7 there, which dropped to 2.7:1. */
	background: linear-gradient(to bottom, rgba(11,11,13,0.95) 0%, rgba(11,11,13,0.88) 70%, transparent 100%);
	backdrop-filter: blur(6px);
	/* Backstop for dropdowns wider than the screen: never let them add a
	   sideways scrollbar. `clip` (unlike `hidden`) leaves them free to hang
	   down below the header. */
	overflow-x: clip;
}
.pst-logo {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 0.5px;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: 10px;
}
.pst-logo .pst-waveform span { background: var(--color-accent); }
/* Optional logo from Customizer -> Site Identity. Sized by height so any
   shape of image lines up with the title; very wide logos are capped. */
.pst-logo-img {
	height: 36px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	flex: none;
}
@media (max-width: 640px) {
	.pst-logo { font-size: 18px; gap: 8px; }
	.pst-logo-img { height: 28px; max-width: 110px; }
}
.pst-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Top level only — a bare `.pst-nav ul` rule used to lay the dropdown lists
   out inline too, spilling child links into the bar. */
.pst-nav > ul {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted);
}
.pst-nav a:hover { color: var(--color-text); }
.pst-nav a.pst-active { color: var(--color-accent); }

/* ---------- Dropdowns ---------- */
.pst-nav li { position: relative; }

/* Chevron on any item that has children. */
.pst-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pst-nav .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.pst-nav .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: -14px;
	z-index: 50;
	min-width: 200px;
	padding: 8px 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	/* The short visibility delay stops the menu vanishing when the pointer
	   briefly overshoots on its way down into it. */
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
/* Invisible bridge over the gap, so moving from the link to the menu
   doesn't count as leaving the item. */
.pst-nav .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -13px;
	height: 13px;
}
.pst-nav li:hover > .sub-menu,
.pst-nav li:focus-within > .sub-menu,
.pst-nav li.pst-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}
.pst-nav .sub-menu a {
	display: flex;
	justify-content: space-between;
	padding: 9px 16px;
	white-space: nowrap;
}
.pst-nav .sub-menu a:hover,
.pst-nav .sub-menu a:focus-visible {
	color: var(--color-text);
	background: var(--color-surface-hover);
	outline: none;
}

/* Third level and deeper fly out sideways, with the chevron pointing right. */
.pst-nav .sub-menu .sub-menu {
	top: -9px;
	left: 100%;
}
.pst-nav .sub-menu .sub-menu::before { display: none; }
.pst-nav .sub-menu .menu-item-has-children > a::after {
	transform: rotate(-45deg);
}

/* Set by js/theme.js when a menu would run off the right of the screen. */
.pst-nav .sub-menu.pst-submenu-flip {
	left: auto;
	right: -14px;
}
.pst-nav .sub-menu .sub-menu.pst-submenu-flip {
	right: 100%;
}
.pst-nav .sub-menu li:has(> .sub-menu.pst-submenu-flip) > a::after {
	transform: rotate(135deg);
}

.pst-header-right {
	display: flex;
	align-items: center;
	gap: 22px;
}
.pst-services {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pst-svc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--color-text-muted);
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--color-border);
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pst-svc svg { width: 18px; height: 18px; }
.pst-svc:hover, .pst-svc:focus-visible {
	color: var(--svc-color, var(--color-accent));
	border-color: var(--svc-color, var(--color-accent));
	background: rgba(255,255,255,0.12);
	transform: translateY(-2px);
	outline: none;
}
@media (max-width: 640px) {
	.pst-svc { width: 30px; height: 30px; }
	.pst-svc svg { width: 16px; height: 16px; }
	.pst-header-right { gap: 10px; }
}

/* ==================================================================
   HERO (Featured / Latest episode)
   ================================================================== */
.pst-hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
	margin-top: -76px;
	padding-top: 130px;
	background-size: cover;
	background-position: center 20%;
}
.pst-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--color-bg) 2%, rgba(11,11,13,0.15) 45%, rgba(11,11,13,0.55) 100%),
		/* Holds dark behind the whole text column (max 640px + padding)
		   before fading, so the description keeps 4.5:1 on any artwork —
		   with a percentage fade it fell to ~1.7:1 over a light image. */
		linear-gradient(to right, rgba(11,11,13,0.9) 0, rgba(11,11,13,0.87) 720px, rgba(11,11,13,0.15) 1100px);
}
.pst-hero-content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding: 0 var(--container-pad) 64px;
}
.pst-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-accent);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.pst-hero-title {
	font-family: var(--font-display);
	font-size: clamp(36px, 6vw, 64px);
	line-height: 1.02;
	margin: 0 0 18px;
	text-transform: uppercase;
}
.pst-hero-desc {
	color: var(--color-text-muted);
	font-size: 16px;
	max-width: 52ch;
	margin: 0 0 20px;
}
.pst-hero-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-muted);
}
.pst-hero-meta .pst-guest-tag { font-family: var(--font-body); }

.pst-hero-actions { display: flex; gap: 14px; }

.pst-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 15px;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.pst-btn:active { transform: scale(0.97); }
.pst-btn-play {
	background: var(--color-accent);
	color: #17130A;
}
.pst-btn-play:hover { background: #f0bd63; }
.pst-btn-outline {
	background: rgba(154,154,162,0.18);
	color: var(--color-text);
	border-color: rgba(245,245,240,0.25);
}
.pst-btn-outline:hover { background: rgba(154,154,162,0.3); }
.pst-btn svg { width: 16px; height: 16px; }

/* ==================================================================
   ROWS + CARDS
   ================================================================== */
.pst-row-section { margin: 0 0 44px; }
.pst-row-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 0 var(--container-pad);
	margin-bottom: 14px;
}
/* "View All" beside a row title. */
.pst-row-link {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.4;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pst-row-link:hover,
.pst-row-link:focus-visible {
	color: var(--color-accent);
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
}
.pst-row-title {
	font-family: var(--font-display);
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}
.pst-row-title .pst-row-title-sub {
	font-family: var(--font-body);
	font-weight: 400;
	text-transform: none;
	color: var(--color-text-muted);
	font-size: 14px;
	margin-left: 8px;
	letter-spacing: 0;
}

.pst-row-scroller {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 4px var(--container-pad) 16px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
}
.pst-row-scroller::-webkit-scrollbar { height: 6px; }
.pst-row-scroller::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.pst-card {
	flex: 0 0 auto;
	width: 260px;
	scroll-snap-align: start;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: transform 0.2s ease, border-color 0.2s ease;
	text-align: left;
	padding: 0;
	color: var(--color-text);
	/*
	 * The card is a <button>, and buttons centre their content vertically.
	 * In a grid or slider every card is stretched to the tallest one in the
	 * row, so a card with a short title had its whole content block pushed
	 * down and its artwork sat lower than its neighbours'. Laying the card
	 * out as a column pins the content to the top instead.
	 */
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.pst-card:hover, .pst-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--color-accent-dim);
	outline: none;
}
.pst-card-media {
	position: relative;
	aspect-ratio: 16/9;
	flex: 0 0 auto;
	background: var(--color-surface-hover) center/cover no-repeat;
}
.pst-card-media .pst-waveform {
	position: absolute;
	bottom: 10px;
	left: 12px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.pst-card:hover .pst-card-media .pst-waveform,
.pst-card:focus-visible .pst-card-media .pst-waveform { opacity: 1; }
.pst-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.65), transparent 55%);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.pst-card:hover .pst-card-media::after,
.pst-card:focus-visible .pst-card-media::after { opacity: 1; }
.pst-card-duration {
	position: absolute;
	top: 10px;
	right: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	background: rgba(11,11,13,0.9); /* 0.75 let bright artwork drop it to 3.3:1 */
	padding: 3px 7px;
	border-radius: 3px;
	color: var(--color-text-muted);
}
.pst-card-type {
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 8px;
	border-radius: 3px;
	font-weight: 600;
}
.pst-card-type-quick_dive { background: rgba(232,176,75,0.85); color: #17130A; }
/* Solid, and a deeper red: white on the old translucent #D65050 was 4.1:1
   at best and ~3.5:1 over light artwork. #B83E3E is 5.5:1 everywhere. */
.pst-card-type-special { background: #B83E3E; color: #fff; }
/* Takes the leftover height so the artwork above it never shifts. */
.pst-card-body {
	padding: 12px 14px 14px;
	flex: 1 1 auto;
}
.pst-card-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Always reserve both lines, so a one-line title doesn't pull the guest
	   line up out of step with the cards either side of it. */
	min-height: 2.7em;
}
.pst-card-guests {
	font-size: 12px;
	color: var(--color-text-faint);
	font-family: var(--font-mono);
}

/* ==================================================================
   SLIDER ROWS (Quick Dives / Special) — 4 visible, arrow-paged
   ================================================================== */
.pst-slider-section { margin: 0 0 44px; }
.pst-slider-viewport { position: relative; padding: 0 var(--container-pad); }
.pst-slider-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 0 8px;
}
.pst-slider-track::-webkit-scrollbar { display: none; }
.pst-slider-track .pst-card {
	flex: 0 0 calc(25% - 10.5px);
	width: auto;
	scroll-snap-align: start;
}
.pst-slider-arrow {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(11,11,13,0.88);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.pst-slider-arrow:hover { background: var(--color-surface-hover); }
.pst-slider-arrow[disabled] { opacity: 0.2; pointer-events: none; }
.pst-slider-prev { left: 6px; }
.pst-slider-next { right: 6px; }

@media (max-width: 900px) {
	.pst-slider-track .pst-card { flex: 0 0 calc(50% - 7px); }
}
@media (max-width: 560px) {
	.pst-slider-track .pst-card { flex: 0 0 82%; }
	.pst-slider-arrow { display: none; }
}

/* ==================================================================
   ALL EPISODES GRID (4 columns, infinite scroll)
   ================================================================== */
.pst-all-episodes-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 0 var(--container-pad) 10px;
}
.pst-all-episodes-grid .pst-card { width: 100%; }
@media (max-width: 900px) {
	.pst-all-episodes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.pst-all-episodes-grid { grid-template-columns: 1fr; }
}

.pst-load-sentinel {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 30px var(--container-pad) 80px;
	color: var(--color-text-faint);
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.pst-load-sentinel.pst-hidden { display: none; }

/* ==================================================================
   GUEST TAGS
   ================================================================== */
.pst-guest-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--color-accent-soft);
	color: var(--color-accent);
	font-size: 12px;
	font-weight: 600;
	margin: 0 6px 6px 0;
	transition: background 0.15s ease;
}
.pst-guest-tag:hover { background: rgba(232,176,75,0.28); }

/* ==================================================================
   MODAL
   ================================================================== */
.pst-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(6,6,7,0.8);
	backdrop-filter: blur(3px);
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pst-modal-overlay.pst-open { display: flex; }
.pst-modal {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	max-width: 620px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
}
.pst-modal-media {
	aspect-ratio: 16/9;
	background: var(--color-surface-hover) center/cover no-repeat;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pst-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(11,11,13,0.8);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.pst-modal-body { padding: 24px; }
.pst-modal-title {
	font-family: var(--font-display);
	font-size: 24px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.pst-modal-duration {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.pst-modal-desc {
	color: var(--color-text-muted);
	font-size: 14.5px;
	margin-bottom: 18px;
}
.pst-modal-guests { margin-bottom: 20px; }
.pst-modal-actions { display: flex; gap: 12px; }

/* ==================================================================
   BOTTOM PLAYER
   ================================================================== */
.pst-player {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	height: var(--player-height);
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	display: none;
	align-items: center;
	gap: 16px;
	padding: 0 var(--container-pad);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}
.pst-player.pst-open { display: flex; transform: translateY(0); }
.pst-player-thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--color-surface-hover) center/cover no-repeat;
	flex: 0 0 auto;
}
.pst-player-meta {
	flex: 0 0 auto;
	max-width: 180px;
	display: none;
}
.pst-player-meta-title {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pst-player-meta-label {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.pst-player-frame-wrap {
	flex: 1 1 auto;
	height: 80px;
	overflow: hidden;
}
.pst-player-frame-wrap iframe {
	width: 100%;
	border: none;
}
.pst-player-close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-surface-hover);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 16px;
}
@media (min-width: 720px) {
	.pst-player-meta { display: block; }
}

/* ==================================================================
   SINGLE EPISODE PAGE
   ================================================================== */
.pst-single-hero {
	position: relative;
	height: 46vh;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	margin-top: -76px;
}
.pst-single-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--color-bg), transparent 60%);
}
.pst-single-wrap {
	max-width: 760px;
	margin: -40px auto 80px;
	padding: 0 var(--container-pad);
	position: relative;
	z-index: 2;
}
.pst-single-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4.5vw, 42px);
	text-transform: uppercase;
	margin: 0 0 14px;
}
.pst-single-meta {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 18px;
}
.pst-single-actions { display: flex; gap: 12px; margin-bottom: 30px; }
.pst-single-desc {
	color: var(--color-text-muted);
	font-size: 16px;
	margin-bottom: 30px;
}
.pst-single-desc p { margin: 0 0 1em; }
/* ==================================================================
   PAGES & POSTS (page.php / single.php)
   ================================================================== */
.pst-page {
	padding-bottom: 80px;
}
.pst-page-header {
	padding: 120px var(--container-pad) 24px;
}
.pst-page-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 5vw, 44px);
	text-transform: uppercase;
	margin: 0 0 8px;
}
.pst-page-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-text-faint);
}
.pst-page-content {
	padding: 0 var(--container-pad);
	color: var(--color-text);
	line-height: 1.7;
}
/* Body copy stays readable, but a full-bleed block — the episode web most of
   all — is allowed to use the whole column. */
.pst-page-content > * {
	max-width: 820px;
}
.pst-page-content > .pst-web,
.pst-page-content > .pst-episode-list,
.pst-page-content > .wp-block-image,
.pst-page-content > .alignwide,
.pst-page-content > .alignfull {
	max-width: none;
}
/* The web and the episode grid bring their own horizontal padding. */
.pst-page-content > .pst-web,
.pst-page-content > .pst-episode-list {
	margin-left: calc(var(--container-pad) * -1);
	margin-right: calc(var(--container-pad) * -1);
}
/* [episode_list]: undo the article typography below, which would otherwise
   restyle the row heading and the card titles. */
.pst-episode-list { line-height: 1.5; margin-bottom: 20px; }
.pst-episode-list .pst-row-title { font-size: 18px; margin: 0; }
.pst-episode-list .pst-card-title { font-size: 14px; margin: 0 0 4px; }
.pst-episode-list-empty {
	padding: 0 var(--container-pad);
	color: var(--color-text-muted);
}
.pst-page-content h2 { font-size: 26px; margin: 36px 0 12px; }
.pst-page-content h3 { font-size: 20px; margin: 28px 0 10px; }
.pst-page-content p { margin: 0 0 18px; }
.pst-page-content a { color: var(--color-accent); text-decoration: underline; }
.pst-page-content ul,
.pst-page-content ol { margin: 0 0 18px; padding-left: 22px; }
.pst-page-content li { margin-bottom: 6px; }
.pst-page-content img { border-radius: var(--radius-md); }
.pst-page-content blockquote {
	margin: 0 0 18px;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--color-accent);
	color: var(--color-text-muted);
}
.pst-page-links { margin-top: 20px; font-family: var(--font-mono); font-size: 13px; }

.pst-spotify-embed-wrap { margin-bottom: 30px; border-radius: var(--radius-md); overflow: hidden; }
.pst-spotify-embed-wrap iframe { width: 100%; border: none; border-radius: var(--radius-md); }

/* Click-to-load panel shown in place of the Spotify iframe, so nothing is
   requested from Spotify until a visitor actually asks for the player. */
.pst-spotify-consent {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 152px;
	padding: 20px 24px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-align: left;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.pst-spotify-consent:hover,
.pst-spotify-consent:focus-visible {
	border-color: var(--color-accent);
	background: var(--color-surface-hover);
	outline: none;
}
.pst-spotify-consent-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #17130A;
}
.pst-spotify-consent-icon svg { width: 22px; height: 22px; margin-left: 2px; }
.pst-spotify-consent-text { display: flex; flex-direction: column; gap: 3px; }
.pst-spotify-consent-text strong { font-size: 15px; font-weight: 700; }
.pst-spotify-consent-text small {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--color-text-muted);
}
.pst-single-guests-label {
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-text-faint);
	margin-bottom: 10px;
	display: block;
}

/* ==================================================================
   ARCHIVE / GUEST FILTER PAGE
   ================================================================== */
.pst-archive-header {
	padding: 120px var(--container-pad) 30px;
}
.pst-archive-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 5vw, 44px);
	text-transform: uppercase;
	margin: 0 0 8px;
}
.pst-archive-sub { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 13px; }
.pst-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	padding: 0 var(--container-pad) 80px;
}
.pst-archive-grid .pst-card { width: 100%; }

/* ==================================================================
   FOOTER
   ================================================================== */
.pst-footer {
	padding: 50px var(--container-pad);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-faint);
	font-size: 13px;
	margin-top: 40px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Mobile */
@media (max-width: 640px) {
	.pst-hero { min-height: 88vh; }
	.pst-hero-content { max-width: 100%; }
	.pst-nav { display: none; }
	.pst-card { width: 210px; }
	:root { --player-height: 76px; }
	.pst-player-frame-wrap { height: 64px; }
}