/* Vertical media, Updated side only (app/vertical.js). Same card: name row, overlay title, icon row; only the frame's height changes. */
body[data-mk-side=updated] .feed-card.vm .editorial-title-card{background:#0E1110}
body[data-mk-side=updated] .feed-card.vm .feed-media{display:block;inset:auto}
body[data-mk-side=updated] .feed-card.vm .feed-media>.feed-media-item,
body[data-mk-side=updated] .feed-card.vm .mp-slide{position:relative;display:block;height:100%;overflow:hidden;background:#0E1110}
body[data-mk-side=updated] .feed-card.vm .feed-media img:not(.vm-blur),
body[data-mk-side=updated] .feed-card.vm .feed-media video{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
/* a picture shown whole sits on a soft, darkened extension of itself: no letterbox bars */
body[data-mk-side=updated] .feed-card.vm .editorial-title-card .feed-media .vm-whole>img:not(.vm-blur),
body[data-mk-side=updated] .feed-card.vm .editorial-title-card .feed-media .vm-whole>video{object-fit:contain!important}
body[data-mk-side=updated] .vm-blur{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(28px) saturate(1.1) brightness(.62);transform:translateZ(0);pointer-events:none;z-index:0}
/* the title fade keeps the 16:9 card's band at the bottom, so the overlay reads the same on a tall photo */
body[data-mk-side=updated] .feed-card.vm .editorial-title-card-fade{top:auto;height:min(100%,56.25vw);z-index:2}
body[data-mk-side=updated] .feed-card.vm .editorial-title-card-title{z-index:3}
/* video: a duration tag and a 44 pt sound toggle, top right; Play only when Reduce Motion is on (or after you pause) */
body[data-mk-side=updated] .vm-vui{position:absolute;inset:0;z-index:4;pointer-events:none}
body[data-mk-side=updated] .vm-dur{position:absolute;top:12px;left:12px;height:22px;padding:0 8px;border-radius:11px;display:flex;align-items:center;background:rgba(10,12,11,.63);color:#fff;font:600 12px/1 var(--u-f-b,system-ui);letter-spacing:.02em;/* C21 #8 */}
body[data-mk-side=updated] .vm-snd{pointer-events:auto;position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;padding:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
body[data-mk-side=updated] .vm-snd:before{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(10,12,11,.63);/* C21 #8: solid, no live backdrop */}
body[data-mk-side=updated] .vm-snd svg{position:relative}
body[data-mk-side=updated] .vm-play{pointer-events:auto;position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border:0;border-radius:50%;background:rgba(10,12,11,.63);color:#fff;display:none;place-items:center;cursor:pointer;/* C21 #8 */}
body[data-mk-side=updated] .vm-rm .vm-play,body[data-mk-side=updated] .vm-paused.vm-rm .vm-play{display:grid}
body[data-mk-side=updated] .vm-has-video.vm-paused:not(.vm-rm) .vm-play{display:none}
body[data-mk-side=updated] .vm-snd:focus-visible,body[data-mk-side=updated] .vm-play:focus-visible{outline:2px solid #D93350;outline-offset:-4px}
/* the opened post: the whole picture, fit under the bars */
body[data-mk-side=updated] .u-opened.vm .editorial-title-card{background:#0E1110}
/* full screen: video fits, double-tap zooms */
body[data-mk-side=updated] .vm-viewer .u-slide video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
body[data-mk-side=updated] .vm-viewer .u-slide{position:relative}
body[data-mk-side=updated] .vm-viewer .vm-vui .vm-dur{top:auto;bottom:calc(30px + env(safe-area-inset-bottom));left:16px}
body[data-mk-side=updated] .vm-viewer .vm-vui .vm-snd{top:auto;bottom:calc(19px + env(safe-area-inset-bottom));right:8px}
body[data-mk-side=updated] .vm-viewer .u-slide img{touch-action:pan-x;will-change:transform}
body[data-mk-side=updated] .vm-viewer .u-slide img.vm-anim{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
body[data-mk-side=updated] .vm-viewer .u-slide img.vm-z{touch-action:none;cursor:grab}
body[data-mk-side=updated] .vm-viewer.vm-zoomed .u-slides{overflow:hidden!important;touch-action:none}
@media (prefers-reduced-motion:reduce){body[data-mk-side=updated] .vm-viewer .u-slide img{transition:none}}
/* event tickets with a vertical video background (?seed=real): the clip sits under the same dim as a photo background */
body[data-mk-side=updated] .tk .tk-bg .tk-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body[data-mk-side=updated] .one-hero video.one-ph{background:#0E1110}
/* text-only edge cases (?seed=real) */
body[data-mk-side=updated] .feed-card.vm-emoji .feed-note-copy p{font-size:40px;line-height:1.15;letter-spacing:.04em}
body[data-mk-side=updated] .feed-card.vm-long .feed-copy p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
body[data-mk-side=updated] .feed-card.vm-long .vm-more{display:block;margin:2px 16px 0;color:var(--u-mut);font:500 15px/1.4 var(--u-f-b)}
body[data-mk-side=updated] .u-opened.vm-long .feed-copy p{display:block;-webkit-line-clamp:unset}
body[data-mk-side=updated] .u-opened .vm-more{display:none}
/* the sound toggle on a video ticket and on the event page's video hero (one global sound preference) */
body[data-mk-side=updated] .vm-snd.vm-tksnd{z-index:6}
body[data-mk-side=updated] .one-hero > .vm-snd.vm-tksnd{top:6px;right:6px}
/* Council 14 (2): video cards get a stronger fade under the title (bright frames: worst pixel >= 4.5:1). Photos keep the lighter one. */
body[data-mk-side=updated] .feed-card.vm.vm-vcard .editorial-title-card-fade{background-image:linear-gradient(rgba(11,14,12,0) 25%,rgba(11,14,12,.22) 45%,rgba(11,14,12,.52) 62%,rgba(11,14,12,.7) 80%,rgba(11,14,12,.88) 100%)!important}
/* Council 14 (3): a small photo stops at 2x its own size, whole, on its blur */
body[data-mk-side=updated] .feed-card.vm .feed-media .vm-small{display:grid!important;place-items:center}
body[data-mk-side=updated] .feed-card.vm .editorial-title-card .feed-media .vm-small>img:not(.vm-blur){width:min(100%,var(--vm-mw))!important;height:min(100%,var(--vm-mh))!important;object-fit:contain!important}
/* Council 14 (4): "Tall" when the feed hides more than half of the photo */
body[data-mk-side=updated] .vm-tall{position:absolute;top:12px;left:12px;z-index:4;height:22px;padding:0 8px;border-radius:11px;display:flex;align-items:center;background:rgba(10,12,11,.63);color:#fff;font:600 12px/1 var(--u-f-b,system-ui);letter-spacing:.02em;pointer-events:none;/* C21 #8 */}
/* Council 14 (6): a slide's own caption, as a small chip in full screen */
body[data-mk-side=updated] .vm-viewer .vm-capchip{position:absolute;left:16px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:5;max-width:calc(100% - 32px);padding:5px 10px;border-radius:12px;background:rgba(10,12,11,.68);color:#fff;font:600 13px/1.25 var(--u-f-b,system-ui);pointer-events:none;/* C21 #8 */}
/* ---- Sound (Gino, Oct 24 8:44 AM): sound on by default, and the toggle is as easy to find as it can be: a solid dark 40 px disc with a
   white icon and a light rim (reads on any footage, light or dark theme), a 48 pt target, bottom-right of every video, thumb-reachable.
   A change shows "Sound on" / "Sound off" for 1 s. ---- */
body[data-mk-side=updated] .vm-snd{top:auto;bottom:4px;right:4px;width:48px;height:48px}
body[data-mk-side=updated] .vm-snd:before{width:40px;height:40px;background:rgba(8,10,9,.84);box-shadow:0 0 0 1.5px rgba(255,255,255,.34),0 2px 10px rgba(0,0,0,.4);-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-mk-side=updated] .vm-snd svg{width:22px;height:22px;stroke-width:2.2}
body[data-mk-side=updated] .vm-snd[aria-pressed=false] svg{color:#fff}
body[data-mk-side=updated] .one-hero > .vm-snd.vm-tksnd{top:auto;bottom:6px;right:6px}
body[data-mk-side=updated] .feed-card.vm-has-video .editorial-title-card-title,body[data-mk-side=updated] .vm-has-video .editorial-title-card-copy{padding-right:52px}
body[data-mk-side=updated] .vm-sndlab{position:absolute;z-index:8;height:30px;padding:0 12px;border-radius:15px;display:flex;align-items:center;white-space:nowrap;background:rgba(8,10,9,.88);color:#fff;font:600 13px/1 var(--u-f-b,system-ui);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.2);transition:opacity .2s}
body[data-mk-side=updated] .vm-sndlab.out{opacity:0}
body[data-mk-side=updated] .vm-vui .vm-sndlab{pointer-events:none}
/* two plays, then rest (Gino, Oct 24 10:56 AM) */
.vm-done{position:relative}
.vm-replay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:22px;background:rgba(0,0,0,.70);color:#fff;font:600 .9375rem/1 var(--u-f-b,system-ui);/* C21 #8 */cursor:pointer}
.vm-replay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vm-done .vm-play{display:none}