/**
 * Horizon Core: THE EPISODE PAGE AND ARCHIVE BLOCKS (HORIZON-20260926-017, podcast build Phase 2).
 *
 * The STRUCTURE of the blocks Phase 2 added to src/Content/episode-render.php:
 * breadcrumb, chips, topic row, platform buttons, the guests grid and hosts line,
 * chapters, best lines, show notes, the folded transcript, previous/next, the
 * archive's search-and-filter row, the audio and fallback players.
 *
 * ⛔ Blocks that already existed (hero, card, featured, grid, the iframe embed,
 * the single guest card) keep their theme styling; this file touches them only
 * where a new child element needs a baseline (card hook, number, format).
 *
 * The SKIN belongs to the site: every colour and font is a --hp-* token, as in
 * hp-profile.css. HOW IT WINS: enqueued late (src/Content/episode-render.php) and
 * body-prefixed. Phones: running text 16px, nothing under 12px, taps 44px.
 */

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
body .hp-breadcrumb { padding-block: 12px 0; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }
body .hp-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
/* The separator lives INSIDE the item, so a wrap never strands a "/" at a line start. */
body .hp-breadcrumb__list li { display: inline-flex; align-items: center; white-space: nowrap; }
body .hp-breadcrumb__list li + li::before { content: "/"; opacity: 0.5; margin-right: 6px; }
body .hp-breadcrumb__list a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
body .hp-breadcrumb__list a:hover { color: var(--hp-gold, var(--hp-text, #fff)); }
@media (min-width: 768px) { body .hp-breadcrumb__list a { min-height: 0; } }

/* ── Hero additions ─────────────────────────────────────────────────────── */
body .hp-episode-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
body .hp-episode-hero__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
body .hp-episode-hero__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body .hp-episode-hero__topics .hp-chip { text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; }

/* ── Players ────────────────────────────────────────────────────────────── */
body .hp-embed--native { display: grid; gap: 16px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { body .hp-embed--native { grid-template-columns: 160px minmax(0, 1fr); } }
body .hp-embed--native .hp-embed__art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
body .hp-embed--native audio { width: 100%; min-height: 44px; }
body .hp-embed--fallback { position: relative; }
body .hp-embed--fallback .hp-embed__art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; }
body .hp-embed__note { margin: 10px 0 0; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }

/* ── Platform buttons ───────────────────────────────────────────────────── */
body .hp-episode-platforms { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
body .hp-episode-platforms--archive { margin: 18px 0 0; }
body .hp-episode-platforms__btn {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 8px 16px;
	border: 1px solid color-mix(in srgb, var(--hp-gold, currentColor) 55%, transparent);
	border-radius: 999px; background: transparent;
	color: var(--hp-text, #fff); font: inherit; font-size: var(--hp-text-sm, 0.875rem); font-weight: 600; letter-spacing: 0.02em;
	text-decoration: none; cursor: pointer;
	transition: border-color var(--hp-dur, 160ms) var(--hp-ease, ease), background-color var(--hp-dur, 160ms) var(--hp-ease, ease);
}
body .hp-episode-platforms__btn:hover { border-color: var(--hp-gold, currentColor); background: color-mix(in srgb, var(--hp-gold, currentColor) 12%, transparent); }
body .hp-episode-platforms__btn svg { flex: 0 0 auto; }
/*
 * Phones: ICONS, in one row that scrolls sideways (the notes: "labelled icons on
 * desktop, icons on phones"). Five stacked pills cost ~300px at 375. Each is a
 * 48px circle; the label stays in the DOM for the accessible name and the
 * tooltip. The copy button keeps a short label beside it because its glyph is
 * not self-explanatory.
 */
/*
 * Phones: ONE ROW that scrolls sideways, each pill an icon with a short label
 * that never wraps. A first cut used bare icons; the visual read found an
 * unlabelled row names no platform, and a label that wrapped to three lines.
 */
@media (max-width: 639px) {
	body .hp-episode-platforms { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
	body .hp-episode-platforms::-webkit-scrollbar { display: none; }
	body .hp-episode-platforms__btn { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; white-space: nowrap; font-size: 0.8125rem; }
	body .hp-episode-platforms__btn svg { width: 18px; height: 18px; }
	body .hp-episode-platforms__label { white-space: nowrap; }
}
/* The home / archive strip: the same buttons under a section title. */
body .hp-platform-strip { padding-block: clamp(24px, 4vw, 40px); }
body .hp-platform-strip__title { margin: 0 0 14px; font-family: var(--hp-font-display, inherit); font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
body .hp-platform-strip .hp-episode-platforms { margin-top: 0; }

/* ── Section titles ─────────────────────────────────────────────────────── */
body .hp-episode-section__title {
	font-family: var(--hp-font-display, inherit);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	margin: 40px 0 16px;
}

/* ── Guests and hosts ───────────────────────────────────────────────────── */
body .hp-episode-people__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { body .hp-episode-people__grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
body .hp-episode-guest { min-height: 44px; }
body .hp-episode-guest__photo--none {
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--hp-gold, #c9a34e) 18%, var(--hp-bg-surface, #111));
	border: 1px solid color-mix(in srgb, var(--hp-gold, #c9a34e) 45%, transparent);
	color: var(--hp-gold, #c9a34e); font-family: inherit; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1;
}
body .hp-episode-guest__bio { display: block; margin-top: 6px; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); line-height: 1.5; }
body .hp-episode-people__hosts { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--hp-text-base, 1rem); }
body .hp-episode-people__hosts-label { margin: 0; }
body .hp-episode-people__hosts-names a { color: var(--hp-text, #fff); text-decoration: none; }
body .hp-episode-people__hosts-names a:hover { color: var(--hp-gold, inherit); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { body .hp-episode-people__hosts-names a { display: inline-block; padding: 10px 0; } }

/* ── Chapters ───────────────────────────────────────────────────────────── */
body .hp-episode-chapters__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body .hp-episode-chapters__link {
	display: flex; align-items: center; gap: 14px;
	min-height: 44px; padding: 6px 10px; border-radius: 4px;
	color: var(--hp-text, #fff); text-decoration: none; font-size: var(--hp-text-base, 1rem);
}
body a.hp-episode-chapters__link:hover { background: color-mix(in srgb, var(--hp-gold, #c9a34e) 10%, transparent); }
body .hp-episode-chapters__time {
	flex: 0 0 auto; min-width: 4.5em; font-variant-numeric: tabular-nums;
	color: var(--hp-gold, #c9a34e); font-weight: 600;
}
body .hp-episode-chapters__link--static .hp-episode-chapters__time { color: var(--hp-text-muted, #9a9a9a); }

/* ── Best lines ─────────────────────────────────────────────────────────── */
body .hp-episode-quotes__quote {
	margin: 0 0 14px; padding: 4px 0 4px 18px;
	border-left: 2px solid var(--hp-gold, #c9a34e);
	font-family: var(--hp-font-display, inherit); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45;
}
body .hp-episode-quotes__quote p { margin: 0; }

/* ── Show notes and transcript ──────────────────────────────────────────── */
body .hp-episode-notes__body, body .hp-episode-transcript__body { font-size: var(--hp-text-base, 1rem); line-height: 1.7; }
body .hp-episode-notes__body a, body .hp-episode-transcript__body a { color: var(--hp-gold, inherit); word-break: break-word; }
body .hp-episode-notes__sponsor { margin-top: 14px; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }
body .hp-episode-transcript__fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px; }
body .hp-episode-transcript__fold > summary::-webkit-details-marker { display: none; }
body .hp-episode-transcript__hint { font-family: inherit; font-size: var(--hp-text-sm, 0.875rem); font-weight: 600; color: var(--hp-gold, #c9a34e); border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px; }
body .hp-episode-transcript__fold[open] > summary .hp-episode-transcript__hint { opacity: 0.6; }
body .hp-episode-transcript__body { max-height: none; }

/* ── Previous / next ────────────────────────────────────────────────────── */
/* Tight against the body: the ~100px gap under "Hosted by" was the body's own
   bottom padding plus this margin stacked. */
body .hp-episode-adjacent { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--hp-text, #fff) 12%, transparent); }
body .hp-episode-people { margin-bottom: 0; }
body .hp-episode-people__hosts { margin-bottom: 0; }
body .hp-episode-adjacent__inner { display: grid; gap: 12px; padding-block: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { body .hp-episode-adjacent__inner { grid-template-columns: 1fr 1fr; } }
body .hp-episode-adjacent__link { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 10px 0; color: var(--hp-text, #fff); text-decoration: none; }
body .hp-episode-adjacent__link--next { text-align: right; align-items: flex-end; }
body .hp-episode-adjacent__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); text-transform: uppercase; letter-spacing: 0.08em; }
body .hp-episode-adjacent__title { font-family: var(--hp-font-display, inherit); font-size: var(--hp-text-base, 1rem); }
body .hp-episode-adjacent__link:hover .hp-episode-adjacent__title { color: var(--hp-gold, inherit); }

/* ── Signup on the episode page ─────────────────────────────────────────── */
body .hp-episode-signup { margin-top: 32px; }

/* ── Archive: search and filters ────────────────────────────────────────── */
body .hp-episode-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
body .hp-episode-filters__search { flex: 1 1 240px; min-width: 0; }
body .hp-episode-filters__search .hp-archive-search { width: 100%; min-height: 44px; font-size: 16px; }
body .hp-episode-filters__select { flex: 0 1 auto; }
body .hp-episode-filters__select select {
	min-height: 44px; padding: 8px 36px 8px 12px; font-size: 16px; font: inherit;
	background: var(--hp-bg-surface, #111); color: var(--hp-text, #fff);
	border: 1px solid color-mix(in srgb, var(--hp-text, #fff) 25%, transparent); border-radius: 4px;
	/*
	 * A chevron, so it reads as a menu and not as a second text field.
	 * !important: the themes' form resets set `appearance` and `background`
	 * on `select` with rules that print later; measured still chevron-less
	 * on both podcast tenants after the first cut.
	 */
	-webkit-appearance: none !important; appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important;
}
body .hp-episode-filters__go { min-height: 44px; }
body .hp-episode-filters .hp-episode-filters__clear {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; line-height: 1;
	border: 1px solid color-mix(in srgb, var(--hp-text, #fff) 20%, transparent); border-radius: 999px;
	color: var(--hp-text-muted, #9a9a9a); font-size: var(--hp-text-sm, 0.875rem); text-decoration: none;
}
body .hp-episode-archive__results { font-size: var(--hp-text-base, 1rem); color: var(--hp-text-muted, #9a9a9a); }

/* ── Card additions ─────────────────────────────────────────────────────── */
body .hp-episode-card__hook { margin: 8px 0 0; font-size: var(--hp-text-sm, 0.875rem); line-height: 1.5; color: var(--hp-text-muted, #9a9a9a); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body .hp-episode-card__number { font-weight: 600; color: var(--hp-gold, inherit); }
body .hp-episode-featured__actions { margin-top: 16px; }
body .hp-episode-featured__actions .hp-btn { min-height: 44px; }

/* ── Listen & Follow: the show card (HORIZON-20260926-019) ──────────────── */
body .hp-show-card { padding-block: clamp(32px, 6vw, 72px); }
body .hp-show-card__inner { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { body .hp-show-card__inner { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); } }
body .hp-show-card__art { margin: 0; max-width: 360px; }
body .hp-show-card__art img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--hp-gold, #c9a34e) 35%, transparent); }
body .hp-show-card__name { font-family: var(--hp-font-display, inherit); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; margin: 0 0 10px; }
body .hp-show-card__tagline { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; color: var(--hp-text-muted, #9a9a9a); margin: 0 0 18px; max-width: 60ch; }
body .hp-episode-platforms--card { margin-top: 0; }
body .hp-latest-feature { padding-block: clamp(16px, 3vw, 32px); }

/* ── The featured block INSIDE the Listen page (HORIZON-20260926-024) ─────── */
/* Scoped to .hp-latest-feature on purpose: on /episodes/ each theme styles
   .hp-episode-featured itself and must keep winning. On /listen/ Trashy's theme
   does not load its episode sheet, so the block rendered as bare text with blue
   links and a stretched 4:3 YouTube still (measured 2026-09-26). */
body .hp-latest-feature .hp-episode-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; margin: 0; }
@media (min-width: 861px) { body .hp-latest-feature .hp-episode-featured { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
body .hp-latest-feature .hp-episode-featured__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--hp-gold, #c9a34e) 35%, transparent); background: var(--hp-bg-surface, #111); }
body .hp-latest-feature .hp-episode-featured__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .hp-latest-feature .hp-episode-featured__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hp-text, #fff); background: rgba(0, 0, 0, 0.35); }
body .hp-latest-feature .hp-episode-card__pill { display: inline-block; font-size: var(--hp-text-sm, 0.875rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-gold, #c9a34e); margin-right: 10px; }
body .hp-latest-feature .hp-episode-featured__eyebrow { display: inline-block; font-size: var(--hp-text-sm, 0.875rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-text-muted, #9a9a9a); }
body .hp-latest-feature .hp-episode-featured__title { font-family: var(--hp-font-display, inherit); font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.15; margin: 8px 0 10px; }
body .hp-latest-feature .hp-episode-featured__title a { color: var(--hp-text, #fff); text-decoration: none; }
body .hp-latest-feature .hp-episode-featured__title a:hover { color: var(--hp-gold, inherit); }
body .hp-latest-feature .hp-episode-card__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--hp-text-sm, 0.875rem); color: var(--hp-text-muted, #9a9a9a); }
body .hp-latest-feature .hp-episode-featured__desc { margin: 12px 0 0; font-size: var(--hp-text-base, 1rem); line-height: 1.6; color: var(--hp-text-muted, #9a9a9a); }

/* The "Video" / "Audio" pill in the featured block, EVERYWHERE it renders
   (HORIZON-20260926-041). Only the rule above styled it, so on a profile's
   "Featured appearance" (Phase 4) and on /episodes/ it was bare 17px body text
   on a line of its own: no theme styles it (computed on Trashy and the shell,
   2026-09-26). Same look as /listen/; the pill only, the rest of the block
   stays each theme's. */
body .hp-episode-featured__body > .hp-episode-card__pill { display: inline-block; font-size: var(--hp-text-sm, 0.875rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-gold, #c9a34e); margin-right: 10px; }

/* Phones (HORIZON-20260926-044). The mobile ratchet flagged the card hook as
   14px running text (text-small, podcast home at 375/390/768) and the /listen/
   featured title link as under 44px tall (tap-small, 375/390). Proposed by the
   podcast build thread, carried by the fleet page-speed thread. 768 inclusive,
   because the ratchet measures 768 and flagged the hook there too. */
@media (max-width: 768px) {
	body .hp-episode-card__hook { font-size: 16px; }
	body .hp-latest-feature .hp-episode-featured__title a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Filter select chevron, drawn by the WRAPPER (third attempt) ─────────── */
/* The themes' `select` resets kept removing the background-image; a
   pseudo-element on the label cannot be reset by a rule aimed at the select. */
body .hp-episode-filters__select { position: relative; display: inline-block; }
body .hp-episode-filters__select::after {
	content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; pointer-events: none;
	border-right: 2px solid var(--hp-text-muted, #9a9a9a); border-bottom: 2px solid var(--hp-text-muted, #9a9a9a);
	transform: translateY(-70%) rotate(45deg);
}

/* ── Archive pagination baseline (HORIZON-20260926-026) ─────────────────── */
/* 12 per page made the pager visible on Trashy for the first time, in the
   browser's default blue. Scoped to the episode archive; a theme's own pager
   rules still win ties on single-class selectors of equal weight. */
body .hp-episode-archive .pagination, body .hp-episode-archive .navigation.pagination { margin-top: clamp(24px, 4vw, 40px); }
body .hp-episode-archive .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body .hp-episode-archive .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--hp-text, #fff) 20%, transparent); border-radius: 999px;
	color: var(--hp-text, #fff); text-decoration: none; font-size: var(--hp-text-sm, 0.875rem); font-weight: 600;
}
body .hp-episode-archive .nav-links .page-numbers.current { border-color: var(--hp-gold, #c9a34e); color: var(--hp-gold, #c9a34e); }
body .hp-episode-archive .nav-links a.page-numbers:hover { border-color: var(--hp-gold, #c9a34e); }
body .hp-episode-archive .nav-links .page-numbers.dots { border: 0; min-width: 0; }
body .hp-episode-archive .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Card thumbnail: a 16:9 window that crops YouTube's letterbox (HORIZON-20260926-027)
   Core derives the card image from `hqdefault.jpg`, the one size YouTube generates for
   EVERY video (Media/embeds.php). It is 480×360, 4:3, with the 16:9 frame letterboxed:
   a black band of exactly 12.5% at the top and the bottom. a per-client podcast theme drew a
   16:10 box with no crop rule and the podcast shell a 16:10 box with `cover`, so the
   bands showed in full on one and as a sliver on the other (Alex: "rogue black bar on
   each video"). A 16:9 box with `object-fit: cover` scales the image to the width and
   crops 12.5% top and bottom, which is the band and nothing else. Structure, not skin:
   the theme keeps its background, border and play button. The `width="480"
   height="270"` the markup already declares is this ratio. ─────────────────────── */
body .hp-episode-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; }

/* ── Artwork with wide bands baked in (1.41.4, Content/episode-thumb-trim.php) ──────────────────────
   A picture whose bands would need more than 1.35x zoom (a vertical clip pillarboxed at 22% each side)
   has the bands CLIPPED off the <img>, and the frame behind them is filled with a blurred, darkened copy
   of the same picture, so the frame is always full (Alex, 2026-09-26: "a rule to fill the space rather
   than be slotted in"). isolation keeps the copy above the frame's own background and below the art. */
body .hp-art-backdrop { position: relative; isolation: isolate; }
body .hp-art-backdrop::before {
	content: '';
	position: absolute;
	inset: -24px;
	z-index: -1;
	/* Zoomed by the same factor as the bands, so the blur is made of the picture, not of its black bars. */
	background: var(--hp-art) center / calc(var(--hp-art-z, 1) * 100%) auto no-repeat;
	filter: blur(22px) brightness(0.7) saturate(1.1);
	pointer-events: none;
}
body .hp-episode-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ── Click to play (Core 1.41.12, HORIZON-20260927-003) ─────────────────────────────────────────────────
   The episode page prints the episode picture as a link; hp-episode-chapters.js swaps the YouTube player in
   on tap. The box repeats the themes' .hp-embed 16:9 frame so a theme without one still gets it. */
body .hp-embed--facade { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
body .hp-embed__facade { position: absolute; inset: 0; display: block; cursor: pointer; color: inherit; }
body .hp-embed__facade img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
body .hp-embed__facade-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hp-bg, #000) 72%, transparent);
	border: 2px solid color-mix(in srgb, var(--hp-gold, #fff) 75%, transparent);
	color: var(--hp-gold, #fff);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
body .hp-embed__facade-play svg { margin-left: 4px; }
body .hp-embed__facade:hover .hp-embed__facade-play,
body .hp-embed__facade:focus-visible .hp-embed__facade-play {
	transform: scale(1.06);
	background: var(--hp-gold, #fff);
	color: var(--hp-on-accent, #000);
}
body .hp-embed__facade:focus-visible { outline: 2px solid var(--hp-gold, #fff); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { body .hp-embed__facade-play { transition: none; } }
body .hp-embed__facade .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Touch screens: the episode page and archive (HORIZON-20261009-032) ─────────────────────────────────
   First measured when the mobile ratchet gained episode targets: on every podcast tenant the breadcrumb,
   the back link, the hero's guest links and topic chips, the host names and the archive's featured title were under the
   44px tap floor, and the note, guest bio and "Hosted by" label read as small running text. Touch, not a
   width (Alex, 2026-10-09): the ratchet measures 768 and 1024 as touch tablets, where the min-width:768
   breadcrumb rule above had set the height back to 0; a desktop mouse keeps the compact layout. */
/* The current page's crumb is the episode title: it may wrap, so a long one cannot push the page sideways. */
body .hp-breadcrumb__list li[aria-current] { white-space: normal; min-width: 0; max-width: 100%; align-items: baseline; }
/* A label on one line, not prose; the names beside it carry the reading size. */
body .hp-episode-people__hosts-label { white-space: nowrap; }
/* The topic chips print as .hp-chip--sm, 10px on the shell: under the 12px floor at every width. */
body .hp-episode-hero__topics .hp-chip { font-size: 0.8125rem; }
@media (pointer: coarse) {
	body .hp-episode-hero__topics .hp-chip { min-height: 44px; }
	body .hp-breadcrumb__list a { min-height: 44px; min-width: 44px; justify-content: center; }
	body .hp-episode-single .hp-backlink { display: inline-flex; align-items: center; min-height: 44px; }
	body .hp-episode-hero__guests a,
	body .hp-episode-people__hosts-names a {
		display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0;
		vertical-align: middle;
	}
	/* The 44px box would drop the meta link's bottom border far under the name; underline the text instead. */
	body .hp-episode-hero__guests a {
		border-bottom: 0; text-decoration: underline; text-underline-offset: 3px;
		text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	}
	body .hp-episode-featured__title a { display: inline-flex; align-items: center; min-height: 44px; }
	body .hp-embed__note, body .hp-episode-guest__bio, body .hp-episode-guest__sub { font-size: 16px; }
}