/* Live poster (livemedia): the loop lies over the picture and shows only while it plays. The element it lies in
   must be positioned; the site decides how it stacks against badges and captions. */
.live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 250ms ease;pointer-events:none}
[data-live].is-live .live-video,[data-live-auto].is-live .live-video{opacity:1}
/* A poster shown whole inside a frame of other proportions: the loop takes the poster's own proportions, centred like
   it. data-ratio — on a computer, data-ratio-m — on a phone. live-poster.js sets the exact size; these rules hold until
   it does (they are right for a poster narrower than its frame). */
.live-video[data-ratio]{width:auto;max-width:100%;max-height:100%;margin:auto;aspect-ratio:var(--live-ratio)}
@media (max-width:650px){
  .live-video[data-ratio]{width:100%;max-width:none;aspect-ratio:auto}
  .live-video[data-ratio-m]{width:auto;max-width:100%;max-height:100%;margin:auto;aspect-ratio:var(--live-ratio-m)}
}
@media (prefers-reduced-motion:reduce){.live-video{display:none}}