/* Video previews and an on-demand player, scoped to the Videos page. */
.video-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#263238}
.prose .video-cover img{display:block;width:100%;height:100%;max-height:none;object-fit:cover}
.video-cover span{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 2px 12px #0005;transition:background .2s,scale .2s}
.video-card:hover .video-cover span{background:#245367;scale:1.06}
.video-modal{width:min(960px,94vw);max-width:94vw;max-height:94dvh;padding:0;border:0;background:#fff;color:var(--ink);box-shadow:0 20px 80px #0006}
.video-modal::backdrop{background:rgb(15 23 28 / .8)}
.video-modal-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px}
.video-modal-header h2{font-size:18px;line-height:1.3;letter-spacing:0;margin:0}
.video-modal-close{flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 12px;font-size:14px}
.video-player{background:#000;aspect-ratio:16/9;width:100%}
.video-player iframe{display:block;width:100%;height:100%;border:0}
html:has(.video-modal[open]){overflow:hidden}
@media(max-height:550px){.video-modal{width:min(960px,94vw,calc((94dvh - 76px)*16/9))}.video-modal-header{padding:10px 12px}.video-modal-header h2{font-size:14px}}
@media(max-width:420px){.video-grid{grid-template-columns:1fr}.video-modal-header{gap:12px;padding:12px}.video-modal-header h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){.video-cover span{transition:none}}