/* podcast.css: "Got a podcast?" before and after (RULING 24).
   No .pod-arm = the resting final frame (reduced motion, no script). podcast.js adds .pod-arm, then .pod-run once at 40% in view. */
.pod-ba{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.55fr);gap:22px;align-items:center;max-width:1180px;margin:0 auto}
.pod-k{margin:0 0 14px;font-size:13px;color:var(--tx2)}
.pod-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,84,91,.5);color:var(--coral);margin-top:28px}
.pod-arrow .i{width:20px;height:20px}

/* before: the audio-only episode */
.pod-ep{box-shadow:0 30px 90px -30px rgba(0,0,0,.85)}
.pod-ep-in{padding:20px 20px 22px}
.pod-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:#151519}
.pod-ic{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(242,84,91,.14);color:var(--coral)}
.pod-ic .i{width:18px;height:18px}
.pod-fn{flex:1;min-width:0}
.pod-fn b{display:block;font:500 14.5px/1.3 var(--mono);color:var(--tx);overflow-wrap:anywhere}
.pod-fn small{display:block;font-size:13px;color:var(--tx3);margin-top:2px}
.pod-len{font-size:14px;color:var(--tx2)}
.pod-long{position:relative;height:86px;margin-top:46px}
.pod-lw{position:absolute;inset:0;display:flex;align-items:center;gap:1px}
.pod-lw i{flex:1;height:100%;border-radius:1px;background:#4A4A55;transform:scaleY(var(--s,.3))}
.pod-lw i.h{background:#F2545B}
.pod-mk{position:absolute;top:-6px;bottom:-6px;width:2.8%;margin-left:-1.4%;border-radius:5px;background:rgba(242,84,91,.16);box-shadow:inset 0 0 0 1.5px #F2545B}
.pod-mk em{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font:700 12px/22px var(--mono);font-style:normal;width:22px;height:22px;text-align:center;border-radius:50%;background:#F2545B;color:#141416}
.pod-mk small{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);font:500 12px/1 var(--mono);color:var(--tx);white-space:nowrap}
.pod-ends{display:flex;justify-content:space-between;margin-top:26px;font-size:12px;color:var(--tx3)}
.pod-ask{margin-top:20px;padding:14px 16px;border-radius:14px;background:#EDEDF0;color:#141416}
.pod-ask small{display:block;font-size:12.5px;color:#55555F;margin-bottom:4px}
.pod-ask p{margin:0;font-size:16px;line-height:1.4;font-weight:500}

/* after: three tall audiogram clips */
.pod-clips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pc{position:relative;aspect-ratio:9/16;border-radius:18px;border:1.5px dashed rgba(255,255,255,.14)}
.pc-f{position:absolute;inset:-1.5px;container-type:inline-size;border-radius:18px;overflow:hidden;
  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;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px -24px rgba(0,0,0,.9)}
.pc-cover{position:absolute;left:20cqw;right:20cqw;top:19cqw;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)}
.pc-cover img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 34%;border-radius:3.5cqw}
.pc-cover b{display:block;margin-top:3.6cqw;font:800 7.4cqw/1 var(--display);letter-spacing:-.02em}
.pc-cover span{display:block;margin-top:1.6cqw;font:600 4.6cqw/1 var(--mono)}
.pc-wave{position:absolute;left:14cqw;right:14cqw;top:107cqw;height:12cqw;display:flex;align-items:center;gap:1.4cqw}
.pc-wave i{flex:1;height:100%;border-radius:2cqw;background:#EDEDF0;opacity:.88;transform:scaleY(var(--s,.3))}
.pod-arm .pc-wave i{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.pc-wave i.p{background:#F2545B;opacity:1}
.pc-cap{position:absolute;left:6cqw;right:6cqw;bottom:27cqw;text-align:center;font:800 8cqw/1.16 var(--display);letter-spacing:-.015em;color:#fff;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pc-cap i{font-style:normal;display:inline-block;padding:0 .17em;margin:0 -.06em;border-radius:.2em;transition:opacity .12s}
.pc-cap i.on{background:#F2545B;color:#141416;text-shadow:none}
.pc .th-tag{top:10px;left:10px;right:auto;bottom:auto}
.pc-lbl{position:absolute;left:50%;bottom:6cqw;transform:translateX(-50%);white-space:nowrap;font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(12,12,14,.86);border:1px solid rgba(255,255,255,.16);color:#EDEDF0}

.pod-play{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.pod-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:#151519;color:var(--tx);font:500 15px/1 var(--sans);cursor:pointer}
.pod-btn .i{width:16px;height:16px;color:var(--coral);fill:currentColor}
.pod-btn:hover{border-color:var(--coral)}
.pod-btn:focus-visible{outline:2px solid #F77F84;outline-offset:3px}
.pod-btn[aria-pressed="true"]{border-color:var(--coral);background:rgba(242,84,91,.12)}
.pod-btn[aria-pressed="true"] .i{display:none}
.pod-btn[aria-pressed="true"]::before{content:"";width:12px;height:12px;margin:0 2px;border-radius:2px;background:var(--coral)}
.pod-play .pod-vtag{position:static}

/* the one-time sequence */
.pod-arm .pod-mk{opacity:.35}
.pod-run .pod-mk{animation:podPulse .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.15s + var(--n)*.3s)}
@keyframes podPulse{0%{opacity:.35;transform:scale(1)}40%{opacity:1;transform:scale(1.35,1.1);box-shadow:inset 0 0 0 1.5px #F2545B,0 0 0 6px rgba(242,84,91,.22)}100%{opacity:1;transform:none}}
.pod-arm .pc-f{opacity:0;transform:translateY(14px) scale(.97)}
.pod-arm .pc.in .pc-f{opacity:1;transform:none;transition:opacity .4s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}
.pod-arm .pc:not(.in) .pc-wave i{transform:scaleY(.06)}
.pod-arm .pc:not(.in) .pc-cap i{opacity:0}
.pc-cap i.w{opacity:0}

@media (max-width:900px){
  .pod-ba{grid-template-columns:minmax(0,1fr);gap:18px}
  .pod-arrow{margin:0 auto;transform:rotate(90deg)}
}
@media (max-width:640px){
  .pod-ep-in{padding:16px 14px 18px}
  .pod-clips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(50% - 50vw);padding:4px calc(50vw - 50%) 8px;scroll-padding-inline:calc(50vw - 50%);scrollbar-width:none}
  .pod-clips::-webkit-scrollbar{display:none}
  .pc{flex:0 0 66%;scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){.pod-sec *{animation:none!important;transition:none!important}}