/* Show and episode pages rendered by the PHP plane (lib/render.php). Built on styles.css. */

.show-page { padding-block: 2.4rem 3rem; max-width: 46rem; }
.show-page h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.show-page h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 2.4rem 0 1rem; }
.crumb a { color: var(--dim); text-decoration: none; font-weight: 600; }
.crumb a:hover { color: var(--ink); }
.episode-head { display: flex; gap: 1.4rem; align-items: center; margin: 1rem 0 1.6rem; }
.episode-head .art { width: 120px; height: 120px; border-radius: 16px; flex: none; }
@media (min-width: 640px) { .episode-head .art { width: 168px; height: 168px; } }
.meta { color: var(--dim); font-size: 0.92rem; margin: 0.6rem 0 0; }
.player { background: var(--surface); border-radius: 18px; padding: 1rem; }
.player audio { width: 100%; }
.speeds { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.speeds button, .chapters button, .ts {
  background: var(--surface-2); color: var(--ink); border: 0; border-radius: 10px;
  font: 600 0.85rem/1 var(--body); padding: 0.55em 0.8em; cursor: pointer;
}
.speeds button[aria-pressed="true"] { background: var(--mark); color: var(--ink-brown); }
.notes { color: var(--ink); margin-top: 1.6rem; }
.chapters { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.listen, .episodes { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.listen a, .episodes a {
  display: block; background: var(--surface); border-radius: 14px; padding: 0.9em 1.1em;
  text-decoration: none; font-weight: 600;
}
.listen a:hover, .episodes a:hover { background: var(--surface-2); }
.episodes li { display: grid; gap: 0.2rem; }
.episodes .meta { margin: 0 0 0 1.1rem; }
.transcript p { color: var(--dim); }
.ts { padding: 0.3em 0.5em; margin-right: 0.4rem; font-size: 0.75rem; }
.made-with { margin-top: 3rem; font-size: 0.85rem; }
.made-with a { color: var(--dim); }