/* ==========================================================================
   VIP Room theme: template styles
   Loaded after style.css. Everything new lives here so the original
   homepage comp CSS stays untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared utilities
   -------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--orange);
  color: #111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.vip-kicker {
  display: block;
  margin: 0 0 14px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.vip-display {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(48px, 6vw, 104px);
  line-height: .94;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
}

.vip-lede {
  margin: 20px 0 0;
  max-width: 760px;
  color: rgba(244, 237, 225, .74);
  font-size: 18px;
  line-height: 1.72;
}

.vip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 4px;
  background: var(--orange);
  color: #111;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.vip-btn:hover {
  transform: translateY(-2px);
  background: #ff7a24;
}

.vip-btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244, 237, 225, .28);
}

.vip-btn--ghost:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: #111;
}

.vip-btn--cream {
  background: var(--cream);
  color: #111;
}

.vip-btn--cream:hover {
  background: #fff;
}

.vip-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   2. Header: navigation menu, dropdowns, mobile toggle
   -------------------------------------------------------------------------- */

.header-links > ul,
.header-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-links > ul {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.header-links li {
  position: relative;
}

.header-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: rgba(244, 237, 225, .82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .18s ease;
}

.header-links a:hover,
.header-links .current-menu-item > a,
.header-links .current-menu-ancestor > a,
.header-links .current_page_item > a {
  color: var(--orange);
}

.header-links .menu-item-has-children > a::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.header-links .sub-menu {
  position: absolute;
  left: -18px;
  top: calc(100% + 18px);
  z-index: 40;
  min-width: 232px;
  padding: 10px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .12);
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .48);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.header-links li:hover > .sub-menu,
.header-links li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-links .sub-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  letter-spacing: .12em;
  color: rgba(244, 237, 225, .78);
}

.header-links .sub-menu a:hover {
  background: rgba(243, 106, 34, .14);
  color: var(--orange);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(244, 237, 225, .28);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.8px;
  margin: 4px auto;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(5.8px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-5.8px) rotate(-45deg);
}

.header-logo img {
  width: 260px;
  height: auto;
}

.listen-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.header-mobile-listen {
  display: none;
}

@media (max-width: 1024px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 14px 0;
  }

  .nav-toggle {
    display: block;
    order: 1;
    justify-self: start;
  }

  .header-logo {
    order: 2;
  }

  .header-logo img {
    width: 200px;
  }

  .listen-icons {
    order: 3;
    justify-self: end;
    gap: 8px;
  }

  .listen-icons .listen-icon {
    display: none;
  }

  .header-links {
    order: 4;
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    padding: 10px 0 18px;
  }

  .nav-open .header-links {
    display: block;
  }

  .header-links > ul {
    display: block;
  }

  .header-links > ul > li {
    border-bottom: 1px solid rgba(244, 237, 225, .08);
  }

  .header-links > ul > li > a {
    padding: 14px 0;
    width: 100%;
  }

  .header-links .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 12px;
    padding: 4px 0 4px 14px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(243, 106, 34, .4);
    border-radius: 0;
    box-shadow: none;
  }

  .nav-open .header-mobile-listen {
    display: flex;
    order: 5;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 18px;
  }
}

@media (max-width: 560px) {
  .header-logo img {
    width: 158px;
  }

  .header-subscribe {
    padding: 0 16px;
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   3. Homepage adjustments for dynamic content
   -------------------------------------------------------------------------- */

.sponsor-badge {
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

a.sponsor-badge:hover {
  transform: translateY(-3px);
  box-shadow: 7px 10px 0 rgba(243, 106, 34, .34);
}

.sponsor-badge img {
  max-height: 34px;
  width: auto;
  object-fit: contain;
}

.ticker-track--static {
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.episode-top {
  background-size: cover !important;
  background-position: center !important;
}

/* This pseudo element is the play triangle in the base stylesheet, where it is
   centred with a transform and drawn out of borders. Reusing it as the image
   darkening layer means clearing both, otherwise the gradient is shifted up and
   left by half its size and only its corner shows. */
.episode-top::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .10) 0%, rgba(8, 8, 8, .82) 100%);
  z-index: 1;
}

.episode-grid--cards .episode-top::after {
  display: block;
}

.feature-showcase-art img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.hosts-panorama img {
  width: 100%;
  height: auto;
}

.host-card {
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease;
}

a.host-card:hover {
  transform: translateY(-5px);
  border-color: rgba(243, 106, 34, .5);
}

.host-card-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.host-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor a little below the top edge. center top crops from the very top,
     which cut off the lower face when the card got shorter or narrower. */
  object-position: center 22%;
}

.host-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .12) 0%, rgba(8, 8, 8, .58) 46%, rgba(8, 8, 8, .95) 100%);
}

.host-card-role {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.info {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .18s ease, box-shadow .18s ease;
}

a.info:hover {
  transform: translateY(-4px);
  box-shadow: 12px 14px 0 rgba(243, 106, 34, .22);
}

.info-link-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.info-link-more::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}

.about-current-copy .highlight,
.entry-content .highlight {
  color: #111;
  background: var(--orange);
  padding: 0 .14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.about-current-copy h2 .highlight {
  display: inline-block;
  padding: .02em .14em 0;
}

.review-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: rgba(244, 237, 225, .52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.review-source a {
  color: inherit;
  text-decoration: none;
}

.review-source a:hover {
  color: var(--orange);
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}

/* --------------------------------------------------------------------------
   4. Interior page shell
   -------------------------------------------------------------------------- */

.page-shell {
  background:
    radial-gradient(circle at 82% 4%, rgba(243, 106, 34, .12), transparent 26%),
    linear-gradient(180deg, #0a0808 0%, #080808 100%);
  color: var(--cream);
}

.page-hero {
  position: relative;
  padding: 84px 0 62px;
  background:
    radial-gradient(ellipse 58% 70% at 50% 0%, rgba(243, 106, 34, .26) 0%, rgba(243, 106, 34, .05) 46%, rgba(243, 106, 34, 0) 74%),
    linear-gradient(180deg, #150806 0%, #0a0605 74%, #080808 100%);
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 54px;
  background: #080808;
  clip-path: polygon(0 100%, 100% 24%, 100% 100%);
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
}

.page-hero--center .page-hero-inner {
  margin: 0 auto;
  text-align: center;
}

.page-hero--center .vip-lede {
  margin-left: auto;
  margin-right: auto;
}

.page-hero--center .vip-btn-row {
  justify-content: center;
}

.page-hero h1 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(52px, 6.4vw, 116px);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.page-hero h1 span,
.page-hero h1 .highlight {
  display: inline-block;
  color: #111;
  background: var(--orange);
  padding: .02em .14em 0;
}

.vip-breadcrumbs {
  margin: 0 0 18px;
  color: rgba(244, 237, 225, .52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.vip-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.vip-breadcrumbs a:hover {
  color: var(--orange);
}

.vip-breadcrumbs span + span::before {
  content: "/";
  margin: 0 8px;
  color: rgba(244, 237, 225, .3);
}

.page-body {
  padding: 72px 0 104px;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

.page-layout--narrow {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
}

/* --------------------------------------------------------------------------
   5. Editor content typography
   -------------------------------------------------------------------------- */

.entry-content {
  font-size: 17px;
  line-height: 1.78;
  color: rgba(244, 237, 225, .8);
}

.entry-content > * {
  max-width: 860px;
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-table {
  max-width: none;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin: 46px 0 16px;
  color: var(--cream);
  font-family: "Bebas Neue", Impact, sans-serif;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.entry-content h2 {
  font-size: clamp(36px, 3.6vw, 56px);
}

.entry-content h3 {
  font-size: clamp(28px, 2.6vw, 40px);
}

.entry-content h4 {
  font-size: 26px;
  color: var(--orange);
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content p {
  margin: 0 0 22px;
}

.entry-content a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.entry-content a:hover {
  color: #ff8a2c;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.entry-content li {
  margin-bottom: 10px;
}

.entry-content ul li::marker {
  color: var(--orange);
}

.entry-content blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: #0f0f0f;
  border-left: 3px solid var(--orange);
  border-radius: 0 18px 18px 0;
  color: var(--cream);
  font-size: 19px;
  line-height: 1.66;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content img,
.entry-content figure img {
  height: auto;
  border-radius: 18px;
}

.entry-content figure {
  margin: 32px 0;
}

.entry-content figcaption {
  margin-top: 10px;
  color: rgba(244, 237, 225, .5);
  font-size: 13px;
}

.entry-content hr {
  margin: 44px 0;
  border: 0;
  height: 1px;
  background: rgba(244, 237, 225, .12);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 15px;
}

.entry-content th,
.entry-content td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(244, 237, 225, .1);
  text-align: left;
}

.entry-content th {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.entry-content code,
.entry-content kbd {
  padding: 2px 7px;
  background: #151515;
  border-radius: 5px;
  font-size: 14px;
  color: var(--orange);
}

.entry-content pre {
  padding: 22px;
  margin: 0 0 26px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 14px;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   6. Sidebar cards
   -------------------------------------------------------------------------- */

.vip-sidebar {
  position: sticky;
  top: 116px;
  display: grid;
  gap: 22px;
}

.side-card {
  padding: 26px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.side-card h2,
.side-card h3 {
  margin: 0 0 16px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 28px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.side-card p {
  margin: 0 0 16px;
  color: rgba(244, 237, 225, .72);
  font-size: 15px;
  line-height: 1.66;
}

.side-card p:last-child {
  margin-bottom: 0;
}

.side-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-card li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(244, 237, 225, .08);
}

.side-card li a {
  display: block;
  color: rgba(244, 237, 225, .82);
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
}

.side-card li a:hover {
  color: var(--orange);
}

.side-card--accent {
  background: linear-gradient(160deg, rgba(243, 106, 34, .16), rgba(17, 17, 17, .9));
  border-color: rgba(243, 106, 34, .34);
}

/* --------------------------------------------------------------------------
   7. Episode archive and cards
   -------------------------------------------------------------------------- */

.episode-search {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
  max-width: 720px;
}

.episode-search input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  background: #0d0d0d;
  border: 1px solid rgba(244, 237, 225, .16);
  border-radius: 10px;
  color: var(--cream);
  font: inherit;
  font-size: 16px;
}

.episode-search input[type="search"]::placeholder {
  color: rgba(244, 237, 225, .4);
}

.episode-search input[type="search"]:focus {
  border-color: var(--orange);
  outline: none;
}

.episode-search .vip-btn {
  flex-shrink: 0;
}

.episode-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244, 237, 225, .1);
  color: rgba(244, 237, 225, .72);
  font-size: 15px;
}

.episode-search-summary strong {
  color: var(--orange);
}

.episode-search-summary a {
  color: rgba(244, 237, 225, .6);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}

.episode-search-summary a:hover {
  color: var(--orange);
}

@media (max-width: 560px) {
  .episode-search {
    flex-wrap: wrap;
  }

  .episode-search .vip-btn {
    width: 100%;
  }
}

.episode-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 38px;
}

.episode-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(244, 237, 225, .18);
  border-radius: 999px;
  color: rgba(244, 237, 225, .74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.episode-filters a:hover,
.episode-filters a.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #111;
}

.episode-list {
  display: grid;
  gap: 18px;
}

.episode-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 20px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}

.episode-row:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 106, 34, .45);
}

.episode-row-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #1b1515;
}

.episode-row-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-row-meta {
  margin-bottom: 8px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.episode-row h2,
.episode-row h3 {
  margin: 0 0 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
}

.episode-row p {
  margin: 0;
  color: rgba(244, 237, 225, .7);
  font-size: 15px;
  line-height: 1.6;
}

.episode-row-cta {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(244, 237, 225, .22);
  position: relative;
  flex-shrink: 0;
}

.episode-row-cta::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 18px;
  border-left: 15px solid var(--cream);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.episode-row:hover .episode-row-cta {
  border-color: var(--orange);
}

.episode-row:hover .episode-row-cta::after {
  border-left-color: var(--orange);
}

@media (max-width: 780px) {
  .episode-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
  }

  .episode-row-cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Single episode
   -------------------------------------------------------------------------- */

.episode-hero {
  position: relative;
  padding: 72px 0 66px;
  background:
    radial-gradient(ellipse 60% 70% at 22% 0%, rgba(243, 106, 34, .28) 0%, rgba(243, 106, 34, 0) 62%),
    linear-gradient(180deg, #150806 0%, #0a0605 72%, #080808 100%);
  overflow: hidden;
}

.episode-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.episode-hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  overflow: hidden;
  background: #171414;
  box-shadow: 0 26px 62px rgba(0, 0, 0, .5);
}

.episode-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-hero h1 {
  margin: 0 0 20px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(40px, 4.8vw, 78px);
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.episode-hero .meta {
  margin-bottom: 14px;
}

.episode-hero-excerpt {
  margin: 0 0 8px;
  max-width: 760px;
  color: rgba(244, 237, 225, .78);
  font-size: 17px;
  line-height: 1.72;
}

/* The gap under the short description is driven from the player rather than
   from the paragraph, so it survives any margin override on the paragraph. */
.episode-hero .audio-player {
  margin-top: 30px;
}

.episode-hero .listen-pills {
  margin-top: 6px;
}

.audio-player {
  width: 100%;
  margin: 0 0 20px;
  border-radius: 999px;
}

.episode-guests {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.guest-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(244, 237, 225, .16);
  border-radius: 999px;
  color: rgba(244, 237, 225, .84);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.guest-chip img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.guest-chip:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* Responsive video embed. Works for the oEmbed iframe and the manual fallback. */
.vip-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(244, 237, 225, .12);
  box-shadow: 0 26px 62px rgba(0, 0, 0, .42);
}

.vip-video iframe,
.vip-video object,
.vip-video embed,
.vip-video video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  border: 0;
  display: block;
}

/* WordPress wraps oEmbed output in these, so let them fill the frame. */
.vip-video .wp-embedded-content,
.vip-video > * {
  width: 100%;
  height: 100%;
}

.episode-hero-video {
  width: 100%;
}

.episode-hero-video .vip-video {
  border-radius: 26px;
}

/* The video is wider than the square artwork, so give it more of the row. */
.episode-hero-grid--video {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (max-width: 980px) {
  .episode-hero-grid--video {
    grid-template-columns: 1fr;
  }
}

.episode-section {
  padding: 66px 0;
}

.episode-section .vip-video {
  max-width: 980px;
}

.episode-section + .episode-section {
  border-top: 1px solid rgba(244, 237, 225, .08);
}

/* The transcript and show notes accordions read as one group, so no divider
   between them and less space than between full content sections. */
.episode-section--accordion {
  padding: 14px 0;
}

.episode-section--accordion + .episode-section--accordion {
  border-top: 0;
  padding-top: 0;
}

.episode-section h2 {
  margin: 0 0 24px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 22px 26px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .12);
  border-radius: 18px;
  color: var(--cream);
  font: inherit;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 30px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.transcript-toggle::after {
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}

.transcript-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-3px);
}

.transcript-body {
  max-height: 620px;
  margin-top: 14px;
  padding: 26px 30px;
  background: #0d0d0d;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 18px;
  overflow-y: auto;
  color: rgba(244, 237, 225, .74);
  font-size: 15.5px;
  line-height: 1.78;
}

.transcript-turn {
  margin: 0 0 18px;
  max-width: 900px;
}

.transcript-turn:last-child {
  margin-bottom: 0;
}

.transcript-speaker {
  display: block;
  margin-bottom: 3px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.transcript-body[hidden] {
  display: none;
}

.episode-sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.sponsor-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: linear-gradient(160deg, rgba(243, 106, 34, .1), rgba(16, 16, 16, .94));
  border: 1px solid rgba(244, 237, 225, .12);
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}

.sponsor-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 106, 34, .5);
}

.sponsor-tile-logo {
  display: flex;
  align-items: center;
  min-height: 56px;
}

.sponsor-tile-logo img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.sponsor-tile-name {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.sponsor-tile p {
  margin: 0;
  color: rgba(244, 237, 225, .7);
  font-size: 15px;
  line-height: 1.6;
}

.sponsor-tier-chip {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(243, 106, 34, .18);
  color: var(--orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* The email signup section is drawn with a diagonal that reaches 92px above
   itself. Anything sitting directly before it needs clearance, otherwise the
   diagonal paints straight over the top of it. */
.episode-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 48px 0 112px;
}

.page-shell > .episode-section:last-child {
  padding-bottom: 112px;
}

.episode-nav a {
  padding: 24px 26px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
}

.episode-nav a:hover {
  border-color: rgba(243, 106, 34, .5);
}

.episode-nav span {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.episode-nav strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 400;
}

.episode-nav a.is-next {
  text-align: right;
}

@media (max-width: 980px) {
  .episode-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .episode-hero-art {
    max-width: 320px;
  }
}

/* --------------------------------------------------------------------------
   9. Sponsors index and single sponsor
   -------------------------------------------------------------------------- */

.sponsor-group + .sponsor-group {
  margin-top: 58px;
}

.sponsor-group-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.sponsor-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(244, 237, 225, .14);
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.sponsor-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 26px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}

.sponsor-card:hover {
  transform: translateY(-5px);
  border-color: rgba(243, 106, 34, .5);
}

.sponsor-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  margin-bottom: 22px;
  padding: 18px;
  background: var(--cream);
  border-radius: 18px;
}

.sponsor-card-logo img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.sponsor-card-logo .sponsor-wordmark {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
}

.sponsor-wordmark .accent {
  color: var(--orange);
}

.sponsor-card h2,
.sponsor-card h3 {
  margin: 0 0 10px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.sponsor-card p {
  margin: 0;
  color: rgba(244, 237, 225, .7);
  font-size: 15px;
  line-height: 1.62;
}

/* Sponsorship call to action, sits under the sponsor list. */
.sponsor-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 62px;
  padding: 40px 44px;
  background:
    radial-gradient(circle at 88% 0%, rgba(243, 106, 34, .22), transparent 58%),
    linear-gradient(150deg, rgba(243, 106, 34, .12), rgba(16, 16, 16, .96));
  border: 1px solid rgba(243, 106, 34, .34);
  border-radius: 26px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34);
}

.sponsor-cta-copy {
  flex: 1 1 380px;
  min-width: 0;
}

.sponsor-cta h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.sponsor-cta p {
  margin: 12px 0 0;
  max-width: 620px;
  color: rgba(244, 237, 225, .74);
  font-size: 16px;
  line-height: 1.62;
}

.sponsor-cta .vip-btn {
  flex-shrink: 0;
  min-height: 60px;
  padding: 0 34px;
}

@media (max-width: 700px) {
  .sponsor-cta {
    padding: 30px 26px;
    gap: 22px;
  }

  .sponsor-cta .vip-btn {
    width: 100%;
  }
}

/* When it sits above the sponsor list, drop the large top margin and add a
   gap underneath instead so it reads as an intro banner, not a footer. */
.sponsor-cta--top {
  margin-top: 0;
  margin-bottom: 54px;
}

.sponsor-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  /* Top aligned, so the logo sits level with the sponsor name instead of
     floating to the middle of a tall right hand column. */
  align-items: start;
}

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

/* Logo and listener offer stacked in the left column.
   The offset drops the logo slightly below the sponsor name. Level with the
   name reads a touch high, because a solid block and large type do not
   optically align at the same edge. Raise or lower this one value to taste. */
.sponsor-hero-aside {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.sponsor-hero-offer {
  padding: 24px;
}

.sponsor-hero-offer h2 {
  margin: 0 0 12px;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
}

.sponsor-hero-offer p {
  margin: 0 0 14px;
  color: rgba(244, 237, 225, .78);
  font-size: 15px;
  line-height: 1.62;
}

.sponsor-hero-offer p:last-child {
  margin-bottom: 0;
}

.sponsor-hero-offer .vip-btn {
  width: 100%;
  margin-top: 6px;
}

.sponsor-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background: var(--cream);
  border-radius: 26px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .44);
}

.sponsor-hero-logo img {
  max-width: 100%;
  height: auto;
}

.sponsor-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.sponsor-facts li {
  padding: 20px 22px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .1);
  border-radius: 18px;
}

.sponsor-facts strong {
  display: block;
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.sponsor-facts span {
  color: rgba(244, 237, 225, .84);
  font-size: 15px;
}

@media (max-width: 900px) {
  .sponsor-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Unwrap the aside so the logo, name, and offer can be ordered
     individually. Logo first, then the name, with the offer last.
     The desktop offset is not wanted once the columns stack. */
  .sponsor-hero-aside {
    display: contents;
  }

  .sponsor-hero-logo {
    order: 1;
    margin-top: 0;
  }

  .sponsor-hero-main {
    order: 2;
  }

  .sponsor-hero-offer {
    order: 3;
  }

  .sponsor-hero-logo {
    max-width: 260px;
  }
}

/* --------------------------------------------------------------------------
   10. Hosts index and single host
   -------------------------------------------------------------------------- */

/* Editable body content on the hosts index. Left aligned so it lines up with
   the heading and intro above it, rather than centred in the container. */
.hosts-page-body {
  max-width: 820px;
  margin: 0 0 54px;
}

.hosts-page-below {
  max-width: 820px;
  margin: 54px 0 0;
}

/* Three larger cards that fill the row evenly. auto-fit collapses empty
   columns so three cards never leave a gap where a fourth would sit, and the
   grid stays centred at every width. */
.host-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
}

.host-grid .host-card {
  min-height: 560px;
}

@media (max-width: 1080px) {
  .host-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 780px;
  }
}

@media (max-width: 680px) {
  .host-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
  }
}

.host-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

.host-hero-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: #171414;
  box-shadow: 0 26px 62px rgba(0, 0, 0, .5);
}

.host-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.host-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.host-social a {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 237, 225, .28);
  border-radius: 50%;
  color: var(--cream);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.host-social a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #111;
}

.host-social svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.host-social .apple-mark,
.host-social .solid {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 900px) {
  .host-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .host-hero-photo {
    max-width: 320px;
  }
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.vip-form {
  display: grid;
  gap: 18px;
  padding: 34px;
  background: #101010;
  border: 1px solid rgba(244, 237, 225, .12);
  border-radius: 26px;
}

.vip-form-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.vip-field label {
  display: block;
  margin-bottom: 8px;
  color: rgba(244, 237, 225, .74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.vip-field .required {
  color: var(--orange);
}

.vip-field input,
.vip-field select,
.vip-field textarea {
  width: 100%;
  min-height: 56px;
  padding: 16px 18px;
  background: #080808;
  border: 1px solid rgba(244, 237, 225, .14);
  border-radius: 10px;
  color: var(--cream);
  font: inherit;
  font-size: 16px;
}

.vip-field textarea {
  min-height: 168px;
  resize: vertical;
}

.vip-field input::placeholder,
.vip-field textarea::placeholder {
  color: rgba(244, 237, 225, .38);
}

.vip-field input:focus,
.vip-field select:focus,
.vip-field textarea:focus {
  border-color: var(--orange);
  outline: none;
}

.vip-form-hp {
  position: absolute;
  left: -9999px;
}

.vip-notice {
  padding: 18px 22px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
}

.vip-notice--ok {
  background: rgba(243, 106, 34, .14);
  border: 1px solid rgba(243, 106, 34, .42);
  color: var(--cream);
}

.vip-notice--error {
  background: rgba(200, 60, 40, .12);
  border: 1px solid rgba(200, 60, 40, .48);
  color: #ffd9cd;
}

.vip-form-consent {
  color: rgba(244, 237, 225, .5);
  font-size: 13px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. Pagination, archives, 404
   -------------------------------------------------------------------------- */

.vip-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 52px;
}

.vip-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(244, 237, 225, .16);
  border-radius: 10px;
  color: rgba(244, 237, 225, .74);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.vip-pagination .page-numbers:hover,
.vip-pagination .page-numbers.current {
  background: var(--orange);
  border-color: var(--orange);
  color: #111;
}

.vip-empty {
  padding: 62px 30px;
  text-align: center;
  background: #101010;
  border: 1px dashed rgba(244, 237, 225, .18);
  border-radius: 26px;
  color: rgba(244, 237, 225, .68);
}

.error-404 {
  padding: 120px 0 140px;
  text-align: center;
}

.error-404 .vip-display {
  font-size: clamp(90px, 16vw, 220px);
}

.vip-search-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 28px auto 0;
}

.vip-search-form input {
  flex: 1;
  min-height: 56px;
  padding: 0 20px;
  background: #080808;
  border: 1px solid rgba(244, 237, 225, .14);
  border-radius: 10px;
  color: var(--cream);
  font: inherit;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  padding: 56px 0 34px;
}

.footer-wrap {
  align-items: flex-start;
}

.footer-links > ul {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  text-decoration: none;
  color: rgba(244, 237, 225, .64);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer-links a:hover {
  color: var(--orange);
}

.footer-listen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 237, 225, .1);
  color: rgba(244, 237, 225, .48);
  font-size: 12px;
  letter-spacing: .04em;
}

.footer-credit a {
  color: rgba(244, 237, 225, .72);
  text-decoration: none;
  font-weight: 800;
}

.footer-credit a:hover {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .page-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .vip-sidebar {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 700px) {
  .page-hero {
    padding: 58px 0 48px;
  }

  .page-body {
    padding: 54px 0 78px;
  }

  .vip-form {
    padding: 24px;
  }

  .episode-nav a.is-next {
    text-align: left;
  }
}

/* ==========================================================================
   16. Section divider seams

   Each coloured section is introduced by a diagonal drawn in a ::before that
   sits directly above it. When the section boundary lands on a fractional
   pixel, which depends on the viewport width, the browser can leave a hairline
   where the section behind shows through. Extending each diagonal 1px into its
   own section closes that gap at every width.
   ========================================================================== */

.dark-section::before,
.reviews-section::before,
.about-zone::before,
.email-cta-section::before {
  height: 93px;
}

.hosts-section::before {
  height: 97px;
}


/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
  .header,
  .footer,
  .vip-sidebar,
  .episode-nav {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }
}