/*
Theme Name: Spokesman Podcast
Theme URI: https://example.com/spokesman-podcast
Author: Spokesman USA
Author URI: https://example.com
Description: An editorial, broadcast-inspired full site editing block theme built for the Spokesman USA podcast. Strong typography, accessible color contrast, and native WordPress blocks throughout — no page builder required.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spokesman-podcast
Tags: block-theme, full-site-editing, podcast, editorial, accessibility-ready, blog, one-column, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Spokesman Podcast is a block theme. It relies primarily on theme.json for
global styles and on the patterns/ and templates/ directories for markup.
This stylesheet supplies the small amount of CSS that theme.json cannot
express: the skip link, visually-hidden helper text, the mobile navigation
toggle, and a handful of layout details for the bundled patterns.
*/

/* -----------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	background: var(--wp--preset--color--navy, #000000);
	color: var(--wp--preset--color--base, #fff);
	padding: 0.85em 1.5em;
	position: fixed;
	top: -100px;
	left: 0;
	z-index: 100000;
	text-decoration: none;
	transition: top 0.15s ease-in-out;
}

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

/* Consistent, visible focus states everywhere, including inside patterns
   where theme.json element outlines do not reach (e.g. custom anchors).
   The site is charcoal by default, so warm white is the default focus
   ring — signal red only reaches ~2.6:1 against charcoal, well under the
   3:1 AA minimum for UI components, so it's reserved for buttons/fills
   rather than outlines or text on the dark background. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--base, #f3eee6);
	outline-offset: 2px;
}

/* Standard text-entry form controls (search, comments) keep a light,
   high-contrast surface for legibility regardless of the page's dark
   background. Their focus ring switches to red, which reads clearly
   against a light field (unlike against the page's charcoal). */
input[type="email"],
input[type="text"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border, #d8d5ce);
	border-radius: 2px;
}

input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="url"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--red, #b3122b);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------------------------------------------------------------
   Base element polish not covered by theme.json
   -------------------------------------------------------------------- */

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

/* Keep long words/URLs from breaking layout on narrow screens. */
.entry-content,
.wp-block-post-content {
	overflow-wrap: break-word;
}

hr.wp-block-separator {
	opacity: 1;
}

/* -----------------------------------------------------------------------
   Site header / primary navigation
   -------------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--hairline-dark, #ffffff26);
}

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

.site-logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 52px;
}

.site-header .wp-block-navigation {
	--wp--custom--nav-link-padding: 0.5rem 0.75rem;
}

.site-header .wp-block-navigation-item > a {
	padding: 0.5rem 0.75rem;
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	padding: 0.5rem;
}

/* Mobile nav overlay: the wp:navigation block has no overlayBackgroundColor
   / overlayTextColor set, so WordPress core falls back to its own default
   — an opaque white panel with black text — which clashes hard with the
   rest of the site's dark theme. Replace it with a translucent, blurred
   dark panel (so the page shows through instead of a flat block of
   color) and light up whichever link the visitor is on — hover, keyboard
   focus, or the current page — in a neon blue rather than a plain color
   swap. !important is needed throughout to beat the specificity of core's
   own generated block-library CSS, which loads after this stylesheet. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(2, 3, 6, 0.82) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base) !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon path {
	fill: var(--wp--preset--color--base) !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: #39e0ff !important;
	text-shadow: 0 0 8px rgba(57, 224, 255, 0.8), 0 0 20px rgba(57, 224, 255, 0.45);
}

/* Podcast platform links: one ghost pill per place the show is published
   (Apple Podcasts, RSS, YouTube, YouTube Music, Amazon Music, iHeartRadio,
   Spotify, Facebook, TikTok). Icon + visible label rather than icon-only
   circles, so the row stays readable and accessible without relying on
   tooltips; wraps gracefully at any width. */
.podcast-platform-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.podcast-platform-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.55em 1.1em;
	border: 1px solid var(--wp--preset--color--hairline-dark);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.podcast-platform-link:hover,
.podcast-platform-link:focus-visible {
	border-color: var(--wp--preset--color--red);
	background: rgba(179, 18, 43, 0.16);
}

.podcast-platform-icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	transition: filter 0.25s ease, transform 0.25s ease;
}

/* The logo lights up before you click it — a soft warm-white glow plus a
   small scale bump, echoing the same "light hitting things" language as
   the hero's mic spotlight, rather than introducing an unrelated color. */
.podcast-platform-link:hover .podcast-platform-icon,
.podcast-platform-link:focus-visible .podcast-platform-icon {
	filter: drop-shadow(0 0 3px rgba(243, 238, 230, 0.9)) drop-shadow(0 0 10px rgba(243, 238, 230, 0.55)) brightness(1.4);
	transform: scale(1.1);
}

/* -----------------------------------------------------------------------
   Hero pattern
   -------------------------------------------------------------------- */

/* Shawn Ryan-style hero: a host photograph anchors the right side against
   the charcoal background, sized as a supporting presence rather than the
   focal point — the podcast itself (eyebrow, headline, CTAs) stays the
   dominant element. The charcoal-scrim gradient (defined in theme.json)
   sits between the photo and the text so the eyebrow, headline, and
   buttons on the left stay legible at AA contrast regardless of how light
   or dark the photo is underneath. */
.podcast-hero {
	position: relative;
	overflow: hidden;
	min-height: 76vh;
	display: flex;
	align-items: center;
	padding: 5rem 1.5rem;
}

.podcast-hero__portrait-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	/* Top-anchored (not bottom) so his head lines up with the headline —
	   the padding-top approximates where the vertically-centered content
	   column starts. The photo is tall enough that its lower half bleeds
	   past the section's bottom edge, where .podcast-hero's own
	   overflow: hidden quietly clips it — same full-bleed look as before,
	   just anchored from the head down instead of the feet up. */
	align-items: flex-start;
	padding-top: clamp(2.5rem, 9vh, 6.5rem);
	padding-right: clamp(1.5rem, 5vw, 5rem);
	pointer-events: none;
}

.podcast-hero__portrait {
	display: block;
	/* Scales with viewport height (instead of a fixed px cap) so the photo
	   stays proportionate to the hero section — which itself is sized off
	   viewport height (76vh) — on everything from a laptop screen to a
	   large external studio monitor. The clamp() floor/ceiling keep it from
	   shrinking away on short viewports or ballooning into "too large"
	   territory on very tall ones. */
	height: clamp(460px, 78vh, 760px);
	width: auto;
	max-width: 38%;
	object-fit: contain;
	object-position: top right;
}

/* Structural wrapper around the mic/spotlight/watermark decorative cluster
   (see patterns/homepage-hero.php and the podcast-page-header templates —
   page.html, single.html, archive.html, home.html). display: contents
   removes this element from the box tree on desktop, so its children keep
   resolving position: absolute against .podcast-hero exactly as if this
   wrapper didn't exist — none of the desktop absolute-positioning math
   below changes. Its only job is giving the mobile media query below a
   single element to turn into a real, sized, position: relative box that
   the same children can be re-staged against as a compact banner above the
   text instead of beside it. */
.podcast-hero__graphic {
	display: contents;
}

/* A real cutout of the studio mic (transparent PNG, no background) standing
   in the open black space to the left of the host photo. Earlier this was
   a rectangular photo crop, which — even with a fade mask — painted an
   opaque box over anything behind it, including the watermark letters in
   .podcast-hero__logo-mark. A true cutout means only the mic's own
   silhouette blocks what's behind it; the transparent space around it
   (and the gap above it, since it's bottom-anchored rather than filling
   the full height) lets the watermark and the spotlight glow show through
   normally. z-index 4 keeps it above both the scrim (2) and the spotlight
   glow (3) so it reads as a crisp object sitting in front of the light,
   not washed out by it. Re-centered and resized as part of the compact
   graphic banner below 1100px — see .podcast-hero__graphic and the
   max-width: 1099px rules below. */
.podcast-hero__mic {
	position: absolute;
	z-index: 4;
	left: clamp(1rem, 4vw, 3rem);
	bottom: 0;
	height: clamp(320px, 62vh, 620px);
	width: auto;
	pointer-events: none;
}

.podcast-hero__mic img {
	display: block;
	height: 100%;
	width: auto;
	object-fit: contain;
	object-position: bottom left;
}

/* A soft, warm-white glow behind the mic's head, like a practical light
   aimed down at it — replaces the ambient light that used to be baked
   into the old mic photograph. hero-parallax.js drives --spotlight-
   intensity from 0 (top of the hero) to 1 (scrolled a full hero-height
   past it) on scroll, so the light visibly grows as the visitor scrolls
   in, instead of the static, non-moving glow that was tried (and
   rejected) earlier. With JS not running (reduced motion, or disabled)
   the custom property is simply unset, and the calc()s below fall back to
   their base values — a fixed, subtle glow rather than no glow at all.
   mix-blend-mode: screen makes it read as light hitting the scene rather
   than a flat colored circle. Sits above the scrim (2) so it's actually
   visible in the scrim's opaque zone, but below the mic (4) so the mic
   reads as a solid object in front of it. Re-centered behind the mic in
   the compact graphic banner below 1100px, same as the mic itself. */
.podcast-hero__spotlight {
	position: absolute;
	z-index: 3;
	left: clamp(-2rem, 3vw, 3rem);
	top: clamp(3rem, 12vh, 8rem);
	width: clamp(320px, 30vw, 560px);
	height: clamp(320px, 30vw, 560px);
	background: radial-gradient(
		circle,
		rgba(230, 236, 255, 0.75) 0%,
		rgba(184, 202, 255, 0.4) 35%,
		rgba(120, 150, 220, 0) 70%
	);
	filter: blur(4px);
	opacity: calc(0.18 + var(--spotlight-intensity, 0) * 0.9);
	transform: scale(calc(1 + var(--spotlight-intensity, 0) * 0.3));
	mix-blend-mode: screen;
	pointer-events: none;
	will-change: opacity, transform;
}

/* A thin red accent line under the mic's base — a small brand flourish
   (same red as the buttons) rather than a fix for anything; the new
   cutout's base is naturally rounded and complete, with no crop to
   disguise. Fades out to the right. Re-centered under the mic in the
   compact graphic banner below 1100px, same as the mic itself. */
.podcast-hero__mic-line {
	position: absolute;
	z-index: 3;
	left: clamp(1rem, 4vw, 3rem);
	bottom: 0;
	width: clamp(160px, 16vw, 260px);
	height: 3px;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--red) 0%,
		var(--wp--preset--color--red) 45%,
		rgba(179, 18, 43, 0) 100%
	);
	pointer-events: none;
}

/* A large, very faint logo watermark that spans the width of the hero and
   drifts side to side on scroll (see assets/js/hero-parallax.js) — purely
   decorative. Anchored from the LEFT edge (rather than centered and
   bled off both sides) so the word "SPOKESMAN" always starts complete —
   previously it was centered and oversized specifically to bleed past
   both edges, which cropped its own opening letters off-canvas. It still
   runs wide enough to bleed off the right edge, keeping the "spans the
   hero" look. Sits BEHIND the host photo (z-index 0, vs. the photo's
   z-index 1) so the opaque photo covers it cleanly instead of the letters
   floating on top of his face and suit. That means it's also behind the
   scrim's opaque zone on the left, so it's mostly invisible there except
   right around/above the photo where the scrim already fades, and behind
   the spotlight where .podcast-hero__logo-mark-glow (below) boosts it
   back up. Repositioned (not hidden) below 1100px — see the max-width:
   1099px rules below, which give it a shorter compact-banner box to
   drift across instead. */
.podcast-hero__logo-mark {
	position: absolute;
	z-index: 0;
	top: 10%;
	left: 0;
	width: 108%;
	max-width: none;
	opacity: 0.06;
	pointer-events: none;
	will-change: transform;
}

.podcast-hero__logo-mark img {
	display: block;
	width: 100%;
	height: auto;
}

/* A second copy of the same watermark, masked down to a soft patch
   roughly where .podcast-hero__spotlight sits, at higher opacity — so the
   letters caught under the light read a bit brighter than the rest of
   the watermark instead of the light passing over them with no effect.
   hero-parallax.js applies the exact same scroll-drift transform to this
   layer as it does to the base layer above, so the two stay perfectly
   stacked and the whole watermark (dim + bright patch together) sweeps
   as one piece instead of the highlight looking frozen in place. The
   mask position (17% 69%) approximates the spotlight's default position
   converted into this element's own box, measured against the current
   mic/spotlight/contentSize numbers — retune both together if any of
   those move again. (This drifted out of sync once already: earlier
   hero edits moved the spotlight down without updating this mask, which
   left the glow patch lighting up empty space to the upper-left of
   "SPOKESMAN" while the real spotlight sat over the dim, un-boosted
   base layer — reading as the light sitting on top of/erasing the text
   rather than illuminating it. See the max-width: 1099px block below for
   the separate mobile/tablet mask position — that layout re-centers the
   mic/spotlight horizontally, so it needs its own alignment rather than
   inheriting this one.) */
.podcast-hero__logo-mark-glow {
	position: absolute;
	/* Above the scrim (2), unlike the base watermark layer — the whole
	   point is for these letters to read through the scrim's opaque zone
	   where the base layer is otherwise fully hidden. Still behind the mic
	   (4), and behind .podcast-hero__content despite the tied z-index (4)
	   since content comes later in the markup. */
	z-index: 3;
	top: 10%;
	left: 0;
	width: 108%;
	max-width: none;
	opacity: 0.24;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(
		ellipse 24% 90% at 17% 69%,
		#000 0%,
		#000 35%,
		rgba(0, 0, 0, 0) 85%
	);
	mask-image: radial-gradient(
		ellipse 24% 90% at 17% 69%,
		#000 0%,
		#000 35%,
		rgba(0, 0, 0, 0) 85%
	);
}

.podcast-hero__logo-mark-glow img {
	display: block;
	width: 100%;
	height: auto;
}

.podcast-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--wp--preset--gradient--charcoal-scrim);
	pointer-events: none;
}

.podcast-hero__content {
	position: relative;
	z-index: 4;
	width: 100%;
	/* WordPress's "constrained" layout support centers this block (and/or
	   its children) horizontally within the hero using auto inline
	   margins. That's fine at most widths, but on common laptop/desktop
	   viewports it pushes the headline far enough right that its huge
	   colossal-size text collides with the host photo bleeding in from
	   the right (see .podcast-hero__headline below). !important is needed
	   to reliably beat the specificity of WordPress's own generated
	   layout CSS, which loads after this stylesheet.
	   Pulling it all the way to the hero's own edge (margin-left: 0)
	   overcorrects the other way — the text column then lands on top of
	   the mic's own opaque silhouette.
	   This used to be computed off a stale width formula left over from
	   an earlier, rectangular mic photo — it no longer matched the real
	   transparent cutout's shape and left the text sitting much further
	   right than it needed to (a big empty gap between the mic and the
	   text). Recomputed directly from the CURRENT mic geometry instead:
	   .podcast-hero__mic's own left offset, plus a fraction of its
	   rendered width (height * the cutout's real 347:836 aspect ratio).
	   0.65 plus the 12px buffer was chosen by rendering the hero and
	   nudging the value against actual screenshots — the mic's silhouette
	   has a wider band around its mounting knobs partway down (~79-86% of
	   its own width, measured from podcast-mic-cutout.png's alpha
	   channel), but that band sits low enough, and far enough from the
	   text's actual left edge at this fraction, that visual proofing
	   showed no overlap even though the raw alpha measurement alone would
	   suggest cutting it closer. Retune by re-checking screenshots (not
	   just the alpha math) if the mic art changes. */
	margin-left: calc(
		clamp(1rem, 4vw, 3rem) + clamp(320px, 62vh, 620px) * 0.415 * 0.65 + 12px
	) !important;
}

/* The margin-left above only pins the CONTENT GROUP's own left edge clear
   of the mic — it does nothing about how wide each child inside it is
   allowed to grow, or where WordPress positions a child that's narrower
   than the group. "constrained" layout centers every direct child
   individually within the group's own box (margin-left/right: auto up to
   that child's max-width), rather than left-aligning them all to a shared
   edge. The headline has its own max-width: 16ch (see below) so it reads
   as roughly left-aligned by luck, but the paragraph and the buttons row
   have no such cap — WordPress lets them grow to the group's full
   contentSize (patterns/homepage-hero.php), and since the content group
   itself stretches well past that width on real viewports (it's a flex
   child filling the hero's remaining width, not just 28rem wide), centering
   a 28rem-wide paragraph inside a much wider box drifts its right edge back
   toward the host photo on the right — on some viewports far enough to sit
   on top of his face, which is the actual bug: the headline cleared the
   photo, but the paragraph/buttons beneath it, being wider and centered
   rather than left-aligned, didn't.
   Forcing margin-left: 0 (with margin-right staying auto) flushes every
   child to the SAME left edge the margin-left rule above already proved
   clear of the mic, instead of each child finding its own centered
   position — and combined with shrinking contentSize from 38rem to 28rem
   (see the pattern file), keeps the now-flush-left paragraph and buttons
   comfortably short of where the photo starts on every supported desktop
   width (1100px and up — below that, see the 1099px breakpoint below,
   which re-stages the mic/spotlight/watermark above the text instead of
   beside it and doesn't need this left-clearance math at all). !important
   for the same
   specificity reason as above: WordPress's own constrained-layout CSS
   loads after this stylesheet. */
.podcast-hero__content.is-layout-constrained > * {
	margin-left: 0 !important;
}

.podcast-hero .podcast-hero__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--metallic);
	background: rgba(2, 3, 6, 0.45);
	border: 1px solid rgba(154, 150, 140, 0.5);
	padding: 0.35em 0.9em;
}

.podcast-hero__headline {
	max-width: 16ch;
	/* Deliberately NOT the shared --colossal preset (5.5rem at desktop
	   widths). "Conversations" is one 13-letter word that can't wrap, and
	   at 5.5rem it's wide enough to run into the host photo even after
	   left-pinning the content column above. This custom clamp tops out
	   lower (4.5rem) so the word reliably clears the photo, while still
	   reading as a big, bold hero headline. */
	font-size: clamp(2.75rem, 4vw, 4.5rem);
}

/* This hero breakpoint is intentionally wider than the theme's usual
   781px mobile cutoff (see the unrelated 781px blocks elsewhere in this
   file, e.g. the episode-card grid — those are untouched). Between
   ~782px and ~1024px there isn't enough horizontal room for the
   headline, the mic photo, and the host photo to all coexist SIDE BY SIDE
   the way the desktop layout runs them — so below 1100px the whole hero
   switches from a flex ROW (mic | text | photo) to a stacked column: a
   short graphic banner (mic + growing spotlight + drifting watermark, the
   same elements and the same hero-parallax.js animation as desktop, just
   re-centered and sized down — see .podcast-hero__graphic below) sits
   above the text instead of beside it. The host photo keeps its existing
   small-faint-accent treatment further down. */
@media (max-width: 1099px) {
	.podcast-hero {
		/* Desktop lays .podcast-hero__graphic, .podcast-hero__content and
		   the host photo out with display: flex (row) so text and photo
		   can sit beside the mic. Here they need to STACK instead —
		   flex-direction: column won't do that cleanly on its own, because
		   .podcast-hero__graphic's own children are all position: absolute
		   and contribute no intrinsic size, so as a flex item with no
		   in-flow content it would shrink to 0 width even with align-items
		   stretched. display: block sidesteps that entirely: both
		   .podcast-hero__graphic and .podcast-hero__content become normal
		   block boxes that each fill the available width by default. */
		display: block;
		min-height: 0;
		padding: 2.5rem 1.25rem 3rem;
	}

	/* The photo shrinks to a small, faint accent anchored bottom-right on
	   narrow screens rather than competing with the text for room — mobile
	   visitors get the headline and CTAs first, not a wall of photo. The
	   scrim goes nearly opaque to guarantee the text stays readable. */
	.podcast-hero__portrait-wrap {
		justify-content: flex-end;
		align-items: flex-end;
		opacity: 0.28;
	}

	.podcast-hero__portrait {
		height: auto;
		max-height: none;
		width: 42%;
		max-width: 220px;
	}

	.podcast-hero__scrim {
		background: rgba(2, 3, 6, 0.88);
	}

	.podcast-hero__headline {
		max-width: none;
		font-size: var(--wp--preset--font-size--xx-large);
	}

	/* .podcast-hero__graphic is display: contents on desktop (see its base
	   rule above), which puts it out of the box tree entirely — here it
	   becomes a real, sized, position: relative box instead, so it can act
	   as the positioning context the mic/spotlight/watermark below re-stage
	   themselves against, with overflow: hidden so the watermark's
	   108%-wide image can't push the section wider than the viewport.
	   Every element below keeps the exact same class name as the desktop
	   layout, so hero-parallax.js's querySelector() calls and the
	   --spotlight-intensity scroll-driven glow keep working completely
	   unchanged on mobile — only the position/size numbers here differ. */
	.podcast-hero__graphic {
		display: block;
		position: relative;
		height: clamp(200px, 55vw, 320px);
		margin: 0 0 2rem;
		overflow: hidden;
	}

	.podcast-hero__mic {
		left: 50%;
		bottom: 0;
		height: clamp(160px, 42vw, 240px);
		transform: translateX(-50%);
	}

	.podcast-hero__mic-line {
		left: 50%;
		bottom: 0;
		width: clamp(100px, 24vw, 160px);
		transform: translateX(-50%);
	}

	/* Same radial-gradient glow as desktop, just recentered — the scale()
	   half of this transform is the same scroll-driven growth
	   hero-parallax.js already drives via --spotlight-intensity, so adding
	   translateX(-50%) into the SAME transform declaration (rather than a
	   competing left/margin trick) keeps that working unchanged. */
	.podcast-hero__spotlight {
		left: 50%;
		top: 0;
		width: clamp(180px, 48vw, 280px);
		height: clamp(180px, 48vw, 280px);
		transform: translateX(-50%) scale(calc(1 + var(--spotlight-intensity, 0) * 0.3));
	}

	.podcast-hero__logo-mark,
	.podcast-hero__logo-mark-glow {
		top: 8%;
		left: 0;
		width: 108%;
	}

	/* The compact mobile/tablet banner centers the mic/spotlight
	   horizontally (left: 50% above) instead of offsetting them near the
	   left edge like desktop — so the glow patch's own mask needs a
	   different center to match, not the desktop 17% 69% above. Measured
	   against this breakpoint's own geometry (400–1099px); the vertical
	   fit isn't exact at every width since the banner's proportions shift
	   a fair amount across that range, but it lands the bright patch on
	   the letters behind the mic instead of well off to one side. */
	.podcast-hero__logo-mark-glow {
		-webkit-mask-image: radial-gradient(
			ellipse 34% 80% at 47% 60%,
			#000 0%,
			#000 35%,
			rgba(0, 0, 0, 0) 85%
		);
		mask-image: radial-gradient(
			ellipse 34% 80% at 47% 60%,
			#000 0%,
			#000 35%,
			rgba(0, 0, 0, 0) 85%
		);
	}

	/* The desktop-only left offset above exists to dodge the mic photo,
	   which now sits in its own banner above the text instead of beside
	   it — so it's just wasted space here. */
	.podcast-hero__content {
		margin-left: 0 !important;
	}
}

/* -----------------------------------------------------------------------
   Compact page header — the same mic-with-growing-spotlight-and-drifting-
   watermark treatment as the homepage hero (.podcast-hero above), reused
   as a short banner at the top of every other template (Pages, the
   episodes archive/index, single episodes) so they read as part of the
   same show instead of a bare title on flat black. Every element this
   relies on (.podcast-hero__mic, __spotlight, __logo-mark(-glow),
   __mic-line, __content) is styled above and animated by the same
   assets/js/hero-parallax.js — this block only resizes the section itself
   and shrinks the mic/spotlight/offset to page-header scale. Markup always
   carries BOTH "podcast-hero" and "podcast-page-header" classes so it
   picks up the shared rules above plus these overrides. Desktop-only
   (min-width: 1100px, mirroring the hero's own 1099px cutoff): below that
   the ordinary .podcast-hero mobile rules already apply (the stacked
   graphic-banner-above-text layout — see the max-width: 1099px block
   above) since this section carries the .podcast-hero class too; the
   small block right after this one just scales that banner down further
   for page-header use. */
@media (min-width: 1100px) {
	.podcast-page-header {
		min-height: clamp(300px, 40vh, 420px);
		padding: 4.5rem 1.5rem 4rem;
	}

	/* Scaled down from the homepage hero's mic (clamp(320px, 62vh, 620px))
	   to suit a much shorter section. */
	.podcast-page-header .podcast-hero__mic {
		height: clamp(220px, 34vh, 340px);
	}

	.podcast-page-header .podcast-hero__spotlight {
		width: clamp(220px, 20vw, 360px);
		height: clamp(220px, 20vw, 360px);
		top: clamp(1.5rem, 8vh, 4rem);
	}

	.podcast-page-header .podcast-hero__mic-line {
		width: clamp(120px, 12vw, 200px);
	}

	/* Same dodge-the-mic formula as .podcast-hero__content above, recomputed
	   for this section's smaller mic height so the title doesn't sit any
	   further right than it needs to. */
	.podcast-page-header .podcast-hero__content {
		margin-left: calc(
			clamp(1rem, 4vw, 3rem) + clamp(220px, 34vh, 340px) * 0.415 * 0.65 + 12px
		) !important;
	}
}

/* Same idea as the main hero's own max-width: 1099px stacked-graphic
   banner above, just scaled down further to match .podcast-page-header's
   already-more-compact scale (a Page/archive/single title, not the
   homepage's full headline). */
@media (max-width: 1099px) {
	.podcast-page-header .podcast-hero__graphic {
		height: clamp(150px, 42vw, 220px);
		margin-bottom: 1.5rem;
	}

	.podcast-page-header .podcast-hero__mic {
		height: clamp(120px, 32vw, 170px);
	}

	.podcast-page-header .podcast-hero__spotlight {
		width: clamp(130px, 36vw, 200px);
		height: clamp(130px, 36vw, 200px);
	}

	.podcast-page-header .podcast-hero__mic-line {
		width: clamp(80px, 18vw, 120px);
	}
}

/* Smaller than the homepage's colossal "Conversations that matter." —
   this is a page header, not the main hero, so it doesn't need the same
   scale to read as a headline. Compound selector (not source order) so it
   reliably wins over .podcast-hero__headline's own font-size/max-width
   regardless of where either rule sits in this file. */
.podcast-hero__headline.podcast-page-header__title {
	font-size: clamp(2.25rem, 3.4vw, 3.5rem);
	max-width: none;
}

/* -----------------------------------------------------------------------
   Episode cards (Latest Episodes / archive query loops)
   -------------------------------------------------------------------- */

/* Cards are deliberately border-free on the dark page background — a
   thin hairline would compete with the cover art. The image sits flush
   at full bleed and does the work; a subtle surface panel only appears
   under the text, and a hover lift/glow gives the thumbnail focus
   without any motion for prefers-reduced-motion users (handled above). */
.episode-card {
	height: 100%;
	background: var(--wp--preset--color--surface);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.episode-card:hover,
.episode-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.episode-card .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--navy);
}

.episode-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.episode-card:hover .wp-block-post-featured-image img,
.episode-card:focus-within .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.episode-card .episode-card__number {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--metallic);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* -----------------------------------------------------------------------
   Featured guest pattern
   -------------------------------------------------------------------- */

.featured-guest__portrait {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* The inauguration video is a 9:16 vertical recording — cropping it to the
   square photo ratio above cuts off subtitles and heads. Show it at its
   native aspect ratio instead, letterboxed if needed but never cropped. */
video.featured-guest__portrait {
	aspect-ratio: 9 / 16;
	object-fit: contain;
	background: var(--wp--preset--color--navy, #000000);
}

/* -----------------------------------------------------------------------
   Newsletter signup pattern
   -------------------------------------------------------------------- */

.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 32rem;
}

.newsletter-form__field {
	flex: 1 1 14rem;
	min-width: 0;
}

.newsletter-form label {
	display: block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.4rem;
}

.newsletter-form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border, #d8d5ce);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--medium);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.newsletter-form input[type="email"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

.newsletter-form button[type="submit"] {
	flex: 0 0 auto;
	align-self: flex-end;
	cursor: pointer;
	border: none;
	font-family: inherit;
}

/* -----------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer a {
	color: var(--wp--preset--color--base);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--wp--preset--color--metallic);
}

/* -----------------------------------------------------------------------
   Responsive helpers
   -------------------------------------------------------------------- */

@media (max-width: 599px) {
	.podcast-hero {
		text-align: left;
	}

	.newsletter-form button[type="submit"] {
		width: 100%;
		align-self: stretch;
	}
}

/* Force episode-card query loop grids to collapse on smaller screens,
   independent of any per-block column setting. */
@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* -----------------------------------------------------------------------
   Homepage intro splash
   Markup starts `hidden` (see patterns/intro-splash.php); intro-splash.js
   reveals and plays it only when JavaScript runs, the visitor doesn't
   prefer reduced motion, and it hasn't already played this session.
   -------------------------------------------------------------------- */

.intro-splash {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--contrast, #020306);
	opacity: 1;
	transition: opacity 0.45s ease;
}

.intro-splash[hidden] {
	display: none;
}

.intro-splash.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.intro-splash__video {
	width: 100%;
	height: 100%;
	/* `contain`, not `cover`: the wordmark and red line flourishes sit close
	   to the frame edges, so cropping to fill the viewport (cover) clipped
	   them on any window that isn't exactly 16:9 and could blow the logo up
	   too large. Contain always shows the full frame; the near-black video
	   background blends into the matching page background either way. */
	object-fit: contain;
	background: var(--wp--preset--color--contrast);
}

.intro-splash__skip {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 1;
	background: rgba(20, 22, 28, 0.55);
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 0.6em 1.25em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.intro-splash__skip:hover,
.intro-splash__skip:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Prevent background scroll while the splash is on screen. */
html.has-intro-splash {
	overflow: hidden;
}

/* Belt-and-suspenders: even if this rule is somehow reached, reduced-motion
   visitors never see the splash rendered (intro-splash.js already refuses
   to un-hide it for them). */
@media (prefers-reduced-motion: reduce) {
	.intro-splash {
		display: none !important;
	}
}

/* -----------------------------------------------------------------------
   Cursor glow — a faint navy-metallic-blue light that trails the pointer
   site-wide (see assets/js/cursor-glow.js, which creates and moves this
   element; the CSS here is just its look). Deliberately subtle: this is
   ambient texture, not a spotlight. JS already skips creating the element
   for reduced-motion visitors and coarse/touch pointers (no persistent
   cursor to glow); the media query below is belt-and-suspenders in case
   the element somehow ends up in the DOM on such a device anyway. */
.cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(96, 128, 184, 0.55) 0%,
		rgba(42, 58, 92, 0.38) 40%,
		rgba(18, 24, 38, 0) 72%
	);
	filter: blur(3px);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 100020;
	opacity: 0;
	transition: opacity 0.3s ease;
	will-change: transform, opacity;
}

.cursor-glow.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	.cursor-glow {
		display: none !important;
	}
}

/* -----------------------------------------------------------------------
   About page — "Behind the scenes" photo collage, closing with a larger
   portrait of Dr. Chaudhry and his signature. Markup lives in
   patterns/about-page-content.php as raw wp:html blocks (a CSS grid isn't
   expressible with core layout blocks alone).

   The collage is 3 studio photos in an asymmetric grid: one tall portrait
   tile on the left spanning both rows, two landscape tiles stacked on the
   right — deliberately not a plain 3-up row, since the source photos are
   two different aspect ratios and object-fit: cover lets each one keep its
   own crop instead of being squashed to match. */
.about-collage {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	grid-template-rows: 1fr 1fr;
	gap: 0.85rem;
	height: 480px;
	margin-bottom: 0;
}

.about-collage__item {
	overflow: hidden;
	border-radius: 8px;
	position: relative;
}

.about-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.about-collage__item:hover img {
	transform: scale(1.04);
}

.about-collage__item--tall {
	grid-row: 1 / span 2;
}

/* This tile's cell is much wider than it is tall, so object-fit: cover's
   default centered crop trims a lot off the top and bottom — enough to cut
   off heads in a group photo. Bias the crop toward the top of the frame
   instead, since that's where faces sit. */
.about-collage__item--top img {
	object-position: center top;
}

@media (max-width: 781px) {
	.about-collage {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		height: auto;
	}

	.about-collage__item,
	.about-collage__item--tall {
		grid-row: auto;
		height: 62vw;
		max-height: 340px;
	}
}