/* Only this page has the live model on it, so the handful of rules it needs sit
   here rather than in shared.css, where every other page would pay for them. */
.livemodel .poster { display:block; position:relative; text-decoration:none; }
.livemodel .poster img { display:block; }
.livemodel .poster:hover img, .livemodel .poster:focus-visible img { border-color:var(--warm); }
.playbadge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(8,14,26,0.82); border:1px solid var(--warm); border-radius:12px;
  padding:14px 20px; text-align:center; color:var(--ink); font-size:13px;
  line-height:1.45; max-width:86%; }
.playbadge b { display:block; color:var(--warm); font-size:17px; font-weight:750;
  letter-spacing:0.2px; margin-bottom:2px; }
.livemodel .poster:hover .playbadge { background:rgba(8,14,26,0.92); }
.livemodel iframe { display:block; width:100%; aspect-ratio:1400/608; min-height:330px;
  border:1px solid var(--grid); border-radius:12px; background:var(--surface); }
/* On a phone the 2.3:1 poster shape leaves the model a letterbox strip, and a
   full-height frame leaves it a strip with blueprint above and below it. Sized
   off the WIDTH, which is the thing that is actually scarce. */
@media (max-width:700px){
  .livemodel iframe { aspect-ratio:auto; height:max(330px, 105vw); max-height:520px; }
}