/**
 * Horizon Theme — Dark Luxury: the podcast skeleton's look.
 *
 * `HORIZON-20260921-046`. Styles (1) the three podcast home sections
 * (`template-parts/triple-threat.php`, `latest-drops.php`, `meet-the-chaos.php`)
 * and (2) the markup Core emits for people and episodes
 * (`hp_render_person_profile/archive/card`, `hp_render_episode_single/archive/card`),
 * which this theme frames but does not write.
 *
 * ⭐ EVERY COLOUR, FONT, RADIUS AND SHADOW IS A TOKEN. The tenant's skin sets
 * them, so the same rules render blue-on-navy under `midnight`, gold-on-black
 * under `dark-luxury`, and so on. A literal colour here would pin the page to
 * one skin (doctrine 23: a skin is tokens only).
 *
 * ⭐ DARK LUXURY'S OWN IDIOM, not a port of Trashy Imports' synthwave extras:
 * rounded `--hp-r-md` cards, hairline `--hp-border`, `--hp-shadow-card`,
 * lift-on-hover, display face for names and titles. No clip-paths, no neon.
 *
 * ⛔ LOADED ONLY WHERE NEEDED. `hp_dl_podcast_assets_needed()` gates the
 * enqueue to podcast tenants and person/episode routes, so a `star` tenant
 * on this theme ships no extra bytes and renders byte-identically.
 */

/* ==========================================================================
   0. Fixed-header clearance
   ========================================================================== */

/*
 * This theme has no global header offset: the header is fixed and every
 * page-level block clears it for itself (`.hp-page-header` does the same in
 * hp-base.css). Home pages carry a full-bleed hero and need nothing here.
 */
.hp-profile,
.hp-person-archive,
.hp-episode-archive,
.hp-episode-single {
  padding-top: var(--hp-header-h);
}

/* ==========================================================================
   1. Triple Threat — watch / listen / shop
   ========================================================================== */

.hp-triple-threat__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-sp-4);
}

@media (min-width: 640px) {
  .hp-triple-threat__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hp-triple-threat__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.hp-triple-threat__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-sp-3);
  padding: var(--hp-sp-8) var(--hp-sp-5);
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  box-shadow: var(--hp-shadow-card);
  text-align: center;
  text-decoration: none;
  color: var(--hp-text);
  transition: border-color var(--hp-dur) var(--hp-ease), transform var(--hp-dur) var(--hp-ease);
}

.hp-triple-threat__tile:hover,
.hp-triple-threat__tile:focus-visible {
  border-color: var(--hp-gold);
  transform: translateY(-2px);
}

.hp-triple-threat__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--hp-r-full);
  background: var(--hp-bg-raised);
  border: 1px solid var(--hp-border-strong);
  color: var(--hp-gold);
}

.hp-triple-threat__icon svg {
  width: 28px;
  height: 28px;
}

.hp-triple-threat__label {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-2xl);
  line-height: 1.1;
  color: var(--hp-text);
}

.hp-triple-threat__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--hp-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

.hp-triple-threat__tile:hover .hp-triple-threat__cta { color: var(--hp-gold); }

/* ==========================================================================
   2. Episode cards and grids (Core's `.hp-episode-card` contract)
   ========================================================================== */

.hp-episode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-sp-5);
}

@media (min-width: 640px) {
  .hp-episode-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .hp-episode-grid { grid-template-columns: repeat(3, 1fr); }
}

.hp-episode-card {
  display: flex;
  flex-direction: column;
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  box-shadow: var(--hp-shadow-card);
  overflow: hidden;
  transition: border-color var(--hp-dur) var(--hp-ease), transform var(--hp-dur) var(--hp-ease);
}

.hp-episode-card:hover,
.hp-episode-card:focus-within {
  border-color: var(--hp-border-strong);
  transform: translateY(-2px);
}

.hp-episode-card__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hp-media-well);
}

.hp-episode-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-episode-card__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hp-r-full);
  background: var(--hp-card-veil, rgba(0, 0, 0, 0.55));
  border: 1px solid var(--hp-border-strong);
  color: var(--hp-text);
}

.hp-episode-card__play--overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hp-episode-card__play svg {
  width: 14px;
  height: 14px;
}

.hp-episode-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-2);
  padding: var(--hp-sp-4) var(--hp-sp-5) var(--hp-sp-5);
}

.hp-episode-card__meta {
  display: flex;
  gap: var(--hp-sp-2);
  font-size: var(--hp-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  font-variant-numeric: tabular-nums;
}

.hp-episode-card__meta .hp-episode-card__duration { color: var(--hp-gold); }

.hp-episode-card__title {
  margin: 0;
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-xl);
  line-height: 1.2;
}

.hp-episode-card__title a {
  color: var(--hp-text);
  text-decoration: none;
}

.hp-episode-card__title a:hover { color: var(--hp-gold); }

.hp-episode-card__guest {
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
}

/* ==========================================================================
   3. Meet the hosts — host grid + guest strip
   ========================================================================== */

.hp-host-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hp-sp-5);
}

@media (min-width: 560px) {
  .hp-host-grid--2,
  .hp-host-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .hp-host-grid--3 { grid-template-columns: repeat(3, 1fr); }
  /* Two hosts read as a pair, not as two thirds of a row. */
  .hp-host-grid--2 { max-width: 760px; }
}

.hp-guest-strip {
  margin-top: var(--hp-sp-8);
  padding-top: var(--hp-sp-6);
  border-top: 1px solid var(--hp-border);
}

.hp-guest-strip__eyebrow {
  margin-bottom: var(--hp-sp-3);
}

.hp-guest-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-2);
}

.hp-guest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--hp-sp-2) var(--hp-sp-4);
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-full);
  background: var(--hp-bg-surface);
  color: var(--hp-text-subtle);
  font-size: var(--hp-text-sm);
  text-decoration: none;
  transition: border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}

.hp-guest-chip:hover,
.hp-guest-chip:focus-visible {
  border-color: var(--hp-gold);
  color: var(--hp-text);
}

.hp-guest-chip--all {
  color: var(--hp-gold);
  border-style: dashed;
}

/* ==========================================================================
   4. Person profile (Core's `.hp-profile` contract)
   ========================================================================== */

.hp-profile__back {
  max-width: var(--hp-content-max);
  margin-inline: auto;
  padding: var(--hp-sp-5) var(--hp-content-pad) 0;
}

.hp-backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-sp-2);
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
  text-decoration: none;
}

.hp-backlink:hover { color: var(--hp-gold); }

.hp-backlink svg {
  width: 14px;
  height: 14px;
}

.hp-profile-hero {
  padding: var(--hp-sp-6) 0 var(--hp-sp-8);
}

.hp-profile-hero__grid {
  display: grid;
  gap: var(--hp-sp-8);
  /* Fixed photo column; the text takes the rest, so a long bio never
     squeezes the portrait into a stamp. */
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
}

/* Without a photo the text must not sit in a half-width column beside dead
   space. */
.hp-profile-hero__grid--nophoto {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--hp-prose-max);
}

@media (max-width: 860px) {
  .hp-profile-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-sp-5);
  }
}

.hp-profile-hero__photo {
  margin: 0;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-md);
  overflow: hidden;
  background: var(--hp-media-well);
  box-shadow: var(--hp-shadow-photo-glow);
}

.hp-profile-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.hp-profile-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-2);
  margin-bottom: var(--hp-sp-4);
}

.hp-profile-hero__name {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-4xl);
  line-height: 1.05;
  margin: 0 0 var(--hp-sp-3);
  color: var(--hp-text);
}

.hp-profile-hero__location {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-2);
  margin: 0 0 var(--hp-sp-4);
  color: var(--hp-text-muted);
  font-size: var(--hp-text-sm);
  letter-spacing: 0.04em;
}

.hp-profile-hero__bio {
  margin: 0 0 var(--hp-sp-5);
  color: var(--hp-text-subtle);
  font-size: var(--hp-text-lg);
  max-width: var(--hp-prose-max);
}

.hp-profile-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-sp-2);
}

/* --- Chips (profile tags, archive filters, episode type) ---------------- */

.hp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-sm);
  background: var(--hp-bg-raised);
  color: var(--hp-text-subtle);
  font-size: var(--hp-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.hp-chip--sm {
  padding: 2px 7px;
  font-size: 10px;
}

/* --- Body: long bio + sidebar ------------------------------------------- */

.hp-profile-body {
  padding: 0 0 var(--hp-sp-10);
}

.hp-profile-body__grid {
  display: grid;
  gap: var(--hp-sp-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: start;
}

.hp-profile-body__grid--noside {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--hp-prose-max);
}

@media (max-width: 860px) {
  .hp-profile-body__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hp-sp-6);
  }
}

.hp-profile-body__content {
  color: var(--hp-text-subtle);
  max-width: var(--hp-prose-max);
}

.hp-profile-body__content p { margin: 0 0 var(--hp-sp-4); }

.hp-profile-body__sidebar {
  display: grid;
  gap: var(--hp-sp-6);
  padding: var(--hp-sp-5);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  background: var(--hp-bg-surface);
}

.hp-profile-sidebar__title {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 var(--hp-sp-3);
}

.hp-profile-awards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hp-sp-2);
}

.hp-profile-awards li {
  position: relative;
  padding-left: var(--hp-sp-4);
  color: var(--hp-text-subtle);
  font-size: var(--hp-text-sm);
}

.hp-profile-awards li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--hp-r-full);
  background: var(--hp-gold);
}

.hp-profile-links {
  margin: 0;
  display: grid;
  gap: var(--hp-sp-3);
}

.hp-profile-links dt {
  font-size: var(--hp-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

.hp-profile-links dd {
  margin: 2px 0 0;
  font-size: var(--hp-text-sm);
  overflow-wrap: anywhere;
}

/* Explicit: GeneratePress's `.entry-content a` would otherwise win on
   specificity and render these browser-default blue. */
.hp-profile-links dd a {
  color: var(--hp-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--hp-dur) var(--hp-ease);
}

.hp-profile-links dd a:hover,
.hp-profile-links dd a:focus-visible { border-bottom-color: currentColor; }

/* --- Related people ----------------------------------------------------- */

.hp-profile-related {
  padding: var(--hp-sp-8) 0 var(--hp-sp-12);
  border-top: 1px solid var(--hp-border);
}

.hp-profile-related__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-2xl);
  margin: 0 0 var(--hp-sp-6);
  color: var(--hp-text);
}

.hp-profile-related__grid {
  display: grid;
  gap: var(--hp-sp-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* --- The person card (directory, related, home hosts) ------------------- */

.hp-profile-card {
  display: block;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  overflow: hidden;
  background: var(--hp-bg-surface);
  box-shadow: var(--hp-shadow-card);
  text-decoration: none;
  transition: border-color var(--hp-dur) var(--hp-ease), transform var(--hp-dur) var(--hp-ease);
}

.hp-profile-card:hover,
.hp-profile-card:focus-visible {
  border-color: var(--hp-border-strong);
  transform: translateY(-2px);
}

.hp-profile-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--hp-media-well);
}

/* A person with no photo still gets a designed surface rather than a flat
   well: a soft radial in the accent over the media background. */
.hp-profile-card__media:empty {
  background:
    radial-gradient(60% 50% at 50% 35%, var(--hp-gold-muted, var(--hp-bg-raised)) 0%, transparent 70%),
    var(--hp-media-well);
}

.hp-profile-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-profile-card__body {
  display: grid;
  gap: 6px;
  padding: var(--hp-sp-4) var(--hp-sp-5) var(--hp-sp-5);
}

.hp-profile-card__eyebrow {
  font-size: var(--hp-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

.hp-profile-card__name {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-xl);
  color: var(--hp-text);
  line-height: 1.2;
}

.hp-profile-card__location {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hp-profile-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.hp-profile-card__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--hp-sp-2);
  font-size: var(--hp-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-gold);
}

/* ==========================================================================
   5. Roster directory (Core's `.hp-person-archive` contract)
   ========================================================================== */

.hp-archive-header {
  background: var(--hp-bg-surface);
  border-bottom: 1px solid var(--hp-border);
  padding: var(--hp-sp-12) 0 var(--hp-sp-8);
}

.hp-archive-header__eyebrow {
  display: block;
  font-size: var(--hp-text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin-bottom: var(--hp-sp-3);
}

.hp-archive-header__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-4xl);
  line-height: 1.05;
  margin: 0 0 var(--hp-sp-3);
  color: var(--hp-text);
}

.hp-archive-header__lead {
  margin: 0;
  max-width: var(--hp-prose-max);
  color: var(--hp-text-subtle);
  font-size: var(--hp-text-lg);
}

.hp-archive-search__wrap { margin-top: var(--hp-sp-6); }

.hp-archive-search {
  width: 100%;
  padding: var(--hp-sp-3) var(--hp-sp-4);
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-md);
  background: var(--hp-bg-raised);
  color: var(--hp-text);
  font-size: var(--hp-text-base);
}

.hp-archive-search::placeholder { color: var(--hp-text-muted); }

.hp-archive-search:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
}

.hp-archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-2);
  margin-top: var(--hp-sp-4);
}

.hp-archive-filter {
  padding: 6px 14px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-full);
  background: transparent;
  color: var(--hp-text-subtle);
  font-size: var(--hp-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}

.hp-archive-filter:hover { border-color: var(--hp-gold); }

.hp-archive-filter.is-active {
  background: var(--hp-gold);
  border-color: var(--hp-gold);
  color: var(--hp-on-accent, var(--hp-bg));
}

.hp-archive-filter:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
}

.hp-archive-body { padding: var(--hp-sp-8) 0 var(--hp-sp-12); }

.hp-archive-grid {
  display: grid;
  gap: var(--hp-sp-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.hp-archive-empty,
.hp-archive-noresults {
  margin: 0;
  color: var(--hp-text-muted);
  font-size: var(--hp-text-lg);
}

/* ==========================================================================
   6. Episodes — directory and detail (Core's contract)
   ========================================================================== */

.hp-episode-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--hp-sp-6);
  align-items: center;
  margin-bottom: var(--hp-sp-10);
}

@media (max-width: 860px) {
  .hp-episode-featured { grid-template-columns: minmax(0, 1fr); }
}

.hp-episode-featured__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-md);
  overflow: hidden;
  background: var(--hp-media-well);
  box-shadow: var(--hp-shadow-photo-glow);
}

.hp-episode-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-episode-featured__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--hp-text);
  background: var(--hp-card-veil, rgba(0, 0, 0, 0.35));
}

.hp-episode-featured__eyebrow {
  display: block;
  font-size: var(--hp-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: var(--hp-sp-3) 0 var(--hp-sp-2);
}

.hp-episode-featured__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-3xl);
  line-height: 1.1;
  margin: 0 0 var(--hp-sp-3);
}

.hp-episode-featured__title a { color: var(--hp-text); text-decoration: none; }
.hp-episode-featured__title a:hover { color: var(--hp-gold); }

.hp-episode-featured__desc {
  margin: var(--hp-sp-3) 0 0;
  color: var(--hp-text-subtle);
}

.hp-episode-archive__subtitle {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-xl);
  margin: 0 0 var(--hp-sp-5);
  color: var(--hp-text);
}

/* --- Single: hero over the artwork -------------------------------------- */

.hp-episode-hero {
  position: relative;
  padding: var(--hp-sp-10) 0 var(--hp-sp-8);
  overflow: hidden;
}

.hp-episode-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hp-episode-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A backdrop, not a picture: blurred and dimmed so the title stays legible
     over artwork of any brightness. */
  filter: blur(18px) brightness(0.28) saturate(1.1);
  transform: scale(1.1);
}

.hp-episode-hero--has-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0%, var(--hp-bg) 100%);
}

.hp-episode-hero__inner {
  position: relative;
  z-index: 1;
}

.hp-episode-hero__type { margin: var(--hp-sp-4) 0 var(--hp-sp-3); }

.hp-episode-hero__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-3xl);
  line-height: 1.1;
  margin: 0 0 var(--hp-sp-3);
  color: var(--hp-text);
}

.hp-episode-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-4);
  color: var(--hp-text-muted);
  font-size: var(--hp-text-sm);
}

.hp-episode-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Single: body ------------------------------------------------------- */

.hp-episode-body { padding: var(--hp-sp-8) 0 var(--hp-sp-10); }

.hp-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  overflow: hidden;
  margin: 0 0 var(--hp-sp-6);
}

.hp-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hp-embed--audio {
  aspect-ratio: auto;
  height: 152px; /* the standard compact audio embed height */
}

.hp-episode-body__content {
  margin-top: var(--hp-sp-6);
  max-width: var(--hp-prose-max);
  color: var(--hp-text-subtle);
}

.hp-episode-body__content p { margin: 0 0 var(--hp-sp-4); }

.hp-episode-guest {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4);
  margin-top: var(--hp-sp-8);
  padding: var(--hp-sp-4);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  background: var(--hp-bg-surface);
  text-decoration: none;
  max-width: var(--hp-prose-max);
  transition: border-color var(--hp-dur) var(--hp-ease);
}

.hp-episode-guest:hover { border-color: var(--hp-gold); }

.hp-episode-guest__photo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--hp-r-full);
  overflow: hidden;
  background: var(--hp-media-well);
}

.hp-episode-guest__photo img { width: 100%; height: 100%; object-fit: cover; }

.hp-episode-guest__body { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }

.hp-episode-guest__eyebrow {
  font-size: var(--hp-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

.hp-episode-guest__name {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-xl);
  color: var(--hp-text);
}

.hp-episode-guest__sub { font-size: var(--hp-text-sm); color: var(--hp-text-muted); }
.hp-episode-guest__go { flex: 0 0 auto; color: var(--hp-gold); }

.hp-episode-related {
  padding: var(--hp-sp-8) 0 var(--hp-sp-12);
  border-top: 1px solid var(--hp-border);
}

.hp-episode-related__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-2xl);
  margin: 0 0 var(--hp-sp-6);
  color: var(--hp-text);
}

/* ==========================================================================
   7. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hp-triple-threat__tile,
  .hp-episode-card,
  .hp-profile-card,
  .hp-guest-chip,
  .hp-archive-filter,
  .hp-episode-guest { transition: none; }

  .hp-triple-threat__tile:hover,
  .hp-episode-card:hover,
  .hp-profile-card:hover { transform: none; }
}