.podcast-directory {
  --podcast-ink: #18352e;
  --podcast-gold: #b47c18;
  --podcast-paper: #fbf7ee;
  --podcast-line: rgba(24, 53, 46, 0.14);
  color: var(--podcast-ink);
}

.podcast-directory__hero {
  background: radial-gradient(circle at 15% 20%, rgba(180, 124, 24, 0.2), transparent 35%), linear-gradient(135deg, #143c32, #0b2923);
  color: #fffaf0;
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.8rem, 6vw, 5rem);
}

.podcast-directory__hero .container { max-width: 1100px; }
.podcast-directory__eyebrow { align-items: center; color: #e9c875; display: flex; font-weight: 800; gap: .55rem; margin: 0 0 1rem; }
.podcast-directory__eyebrow svg { height: 1.25rem; width: 1.25rem; }
.podcast-directory__hero h1 { color: inherit; font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.2; margin: 0; max-width: 18ch; }
.podcast-directory__lead { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.8; margin: 1.2rem 0 0; max-width: 66ch; }
.podcast-directory__lead--en { color: rgba(255, 250, 240, 0.74); font-family: system-ui, sans-serif; }
.podcast-directory__summary { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.podcast-directory__summary span { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .65rem 1rem; }
.podcast-directory__summary strong { color: #efd18a; font-size: 1.15em; }
.podcast-directory__body { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.podcast-family + .podcast-family { border-top: 1px solid var(--podcast-line); margin-top: 4rem; padding-top: 4rem; }
.podcast-family__header { margin-bottom: 1.5rem; max-width: 780px; }
.podcast-family__header h2 { color: var(--podcast-ink); font-size: clamp(1.55rem, 3vw, 2.4rem); margin: 0 0 .55rem; }
.podcast-family__header p { color: #5f6e69; margin: 0; }
.podcast-show-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.podcast-show-card { background: #fff; border: 1px solid var(--podcast-line); border-radius: 1.25rem; box-shadow: 0 14px 35px rgba(24,53,46,.07); display: grid; grid-template-columns: 132px minmax(0,1fr); min-width: 0; overflow: hidden; scroll-margin-top: 7rem; }
.podcast-show-card__art { aspect-ratio: 1; height: 100%; object-fit: cover; width: 132px; }
.podcast-show-card__art--pending { align-items: center; background: linear-gradient(145deg, #efe8d8, #ddd1b9); color: #806a43; display: flex; justify-content: center; }
.podcast-show-card__art--pending svg { height: 2.4rem; width: 2.4rem; }
.podcast-show-card__body { display: flex; flex-direction: column; padding: 1rem; }
.podcast-show-card__status { align-items: center; color: #67736f; display: flex; flex-wrap: wrap; font-size: .8rem; gap: .55rem; }
.status-pill { border-radius: 999px; font-weight: 800; padding: .25rem .6rem; }
.status-pill--ready { background: #ddf5e7; color: #17633c; }
.status-pill:not(.status-pill--ready) { background: #f4ebd8; color: #765714; }
.podcast-show-card h3 { color: var(--podcast-ink); font-size: 1.1rem; line-height: 1.5; margin: .65rem 0; }
.podcast-show-card p { color: #52645e; font-size: .9rem; line-height: 1.65; margin: 0 0 .55rem; }
.podcast-show-card__description-en { color: #75807d !important; font-family: system-ui, sans-serif; }
.podcast-show-card__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; padding-top: .5rem; }
.podcast-show-card__actions .button { align-items: center; display: inline-flex; gap: .35rem; min-height: 44px; }
.podcast-show-card__actions svg { height: 1rem; width: 1rem; }

@media (max-width: 520px) {
  .podcast-show-card { grid-template-columns: 96px minmax(0,1fr); }
  .podcast-show-card__art { height: 96px; width: 96px; }
  .podcast-show-card__description-en { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .podcast-directory * { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}