/* The page's Short: its thumbnail with a play button; tap and the video plays right here (youtube-nocookie, loaded only
   on tap). Uses the site's own variables, so it follows every theme. 2026-10-17. */
.mk-short{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin:14px 0 6px;padding:14px;border:1px solid var(--hair);border-radius:12px;background:var(--bg2)}
.mk-short-play{position:relative;display:block;width:200px;aspect-ratio:9/16;padding:0;border:0;border-radius:10px;overflow:hidden;background:#000;cursor:pointer}
.mk-short-play img{display:block;width:100%;height:100%;object-fit:cover}
.mk-short-btn{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.62);box-shadow:0 0 0 3px rgba(255,255,255,.9) inset}
.mk-short-btn:after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}
.mk-short-play:hover .mk-short-btn,.mk-short-play:focus-visible .mk-short-btn{background:var(--ice-deep)}
.mk-short-play:focus-visible{outline:2px solid var(--ice-bright);outline-offset:3px}
.mk-short iframe{display:block;width:200px;aspect-ratio:9/16;border:0;border-radius:10px;background:#000}
.mk-short-cap{margin:0 0 6px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mk-short-title{margin:0 0 8px;font:600 18px/1.3 var(--sans);color:var(--text)}
.mk-short-note{margin:0;font:400 13px/1.45 var(--sans);color:var(--muted)}
@media (max-width:560px){.mk-short{grid-template-columns:1fr;justify-items:center;text-align:center}.mk-short-play,.mk-short iframe{width:min(260px,72vw)}}