/* podcast.css: the "Podcast clips" audiogram card in the sample row (RULING 24).
   Sized in container units so the card reads the same at 254 px (desktop) and 210 px (phone).
   The sound wave rests as a still shape; podcast.js moves it only while this card is the one playing. */
.smp.pod{container-type:inline-size;background:#121215}
.smp.pod .pod-bg{position:absolute;inset:0;background:
  radial-gradient(120% 62% at 50% 4%,rgba(242,84,91,.30),transparent 62%),
  radial-gradient(90% 50% at 50% 100%,rgba(242,84,91,.10),transparent 70%),#121215}
.smp.pod::after{inset:62% 0 0;background:linear-gradient(transparent,rgba(5,5,6,.55))}

/* cover tile: coral, graphite type */
.smp.pod .pod-cover{position:absolute;z-index:1;left:15cqw;right:15cqw;top:15cqw;padding:4.5cqw 4.5cqw 4cqw;border-radius:5.5cqw;background:#F2545B;color:#141416;box-shadow:0 5cqw 12cqw -5cqw rgba(0,0,0,.8)}
.smp.pod .pod-cover img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 34%;border-radius:3.5cqw}
.smp.pod .pod-cover b{display:block;margin-top:3.6cqw;font:800 7.4cqw/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.smp.pod .pod-cover span{display:block;margin-top:1.6cqw;font:600 4.6cqw/1 'Geist Mono',monospace;letter-spacing:.02em}

/* sound wave: bars grow from the middle line */
.smp.pod .pod-wave{position:absolute;z-index:1;left:10cqw;right:10cqw;top:112cqw;height:14cqw;display:flex;align-items:center;gap:1.1cqw}
.pod-wave i{flex:1;height:100%;border-radius:2cqw;background:#EDEDF0;opacity:.88;transform-origin:50% 50%;transform:scaleY(var(--s,.3))}
.pod-wave i.p{background:#F2545B;opacity:1}

/* caption: the row's word-by-word pattern, sized to the card */
.hero .smp.pod .smp-cap.fw,.smp.pod .smp-cap.fw{bottom:25cqw;left:5cqw;right:5cqw;font-size:8.4cqw;line-height:1.18;text-align:center;text-wrap:balance}