/* Click-to-load YouTube player: nothing is requested from YouTube until the visitor presses play. */
.yt{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:4px;overflow:hidden;background:#000;color:#f4f2ef;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer;
}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .5s ease, transform .8s ease}
.yt:hover img{opacity:1;transform:scale(1.03)}
.yt .play{
  position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.yt:hover .play{transform:scale(1.08);background:rgba(0,0,0,.7)}
.yt .play::before{content:"";margin-left:5px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.yt .cap{
  position:absolute;left:0;right:0;bottom:0;padding:28px 14px 11px;
  background:linear-gradient(transparent, rgba(0,0,0,.86));
  font-size:13px;line-height:1.35;text-align:left;
}
.yt .cap small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,239,.6);margin-bottom:3px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.on{cursor:default}
.yt.on .play, .yt.on .cap, .yt.on img{display:none}
.yt-note{margin-top:8px;font-size:11px;line-height:1.5;color:rgba(244,242,239,.45)}
.yt-note a{color:inherit}