.podcast-page .podcast-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding-bottom: 3rem;
}

.podcast-intro h1 {
  margin-block: .6rem 1rem;
}

.podcast-brand-art { display: block; width: 100%; height: auto; border-radius: 4px; }

.podcast-intro .intro { color: var(--muted); }
.podcast-intro .podcast-advisory { margin-top: .6rem; font-size: .9rem; color: var(--muted); }

.podcast-show {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1rem;
}

.show-intro {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}

.show-intro .cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 4px;
}

.show-intro h2 {
  margin-block: .5rem .8rem;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  overflow-wrap: anywhere;
}

.show-intro p:not(.eyebrow) { max-width: 68ch; overflow-wrap: anywhere; }
.show-intro .button { margin-top: 1rem; gap: .65rem; }
.episode-list { margin-top: 1rem; }

.episode-list details {
  margin-top: 0;
  border-bottom: 1px solid var(--line);
}

.episode-list summary {
  display: grid;
  grid-template-columns: .75rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .15rem .75rem;
  min-height: 44px;
  padding: .75rem .5rem;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.episode-list summary::-webkit-details-marker { display: none; }
.episode-list summary::before {
  content: '';
  width: .38rem;
  height: .38rem;
  border: solid var(--amber);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg) translateY(-.1em);
}
.episode-list details[open] > summary::before { transform: rotate(45deg) translateY(-.18em); }
.episode-list summary:hover .episode-title, .episode-list details[open] .episode-title { color: var(--amber); }
.episode-date { color: var(--muted); font-size: .875rem; font-weight: 400; white-space: nowrap; }
.episode-body { padding: 0 .5rem 1.2rem 2rem; }
.episode-body p { max-width: 75ch; font-size: 1rem; overflow-wrap: anywhere; }
.episode-body a { color: var(--amber); text-decoration: underline; }
.episode-list audio { display: block; width: min(100%, 38rem); margin-top: 1rem; }
.podcast-footer nav { flex-wrap: wrap; }
.podcast-footer nav a:nth-child(2) { display: inline; }

@media (max-width: 620px) {
  .show-intro { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .show-intro .cover { max-width: 10rem; }
  .podcast-page .header nav { display: flex; gap: .25rem .5rem; }
  .podcast-page .header .brand img { min-width: 64px; }
  .podcast-page .podcast-intro { grid-template-columns: minmax(0, 1fr); padding-bottom: 2rem; }
  .podcast-brand-art { max-width: 17rem; }
  .podcast-show { padding-block: 1.5rem 2rem; }
  .episode-list summary { grid-template-columns: .75rem minmax(0, 1fr); }
  .episode-date { grid-column: 2; }
}