/* R6 — video covers on the home page. Only matches classes ux/r6.js adds (inert in Before). */
.ux-r6-has .placeholder-type,.ux-r6-has .cloth-grid{display:none}
.ux-r6-has{background:#20221f}
.ux-r6-media{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;pointer-events:none}
.ux-r6-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(16,18,15,.55),rgba(16,18,15,0) 22%,rgba(16,18,15,0) 70%,rgba(16,18,15,.6));pointer-events:none}
.ux-r6-poster,.ux-r6-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ux-r6-video{opacity:0;transition:opacity .5s ease}
.ux-r6-video.shown{opacity:1}
.ux-r6-bar{position:absolute;left:0;right:0;bottom:0;z-index:1;height:3px;background:rgba(244,241,232,.25)}
.ux-r6-bar b{display:block;height:100%;background:#f86c39;transform-origin:0 50%;transform:scaleX(0)}
/* the cover's own labels stay readable on top of the picture */
.ux-r6-has>:not(.ux-r6-media){z-index:2}
@media(prefers-reduced-motion:reduce){.ux-r6-video{display:none}.ux-r6-bar{display:none}}
.ux-r6-has .media-corner,.ux-r6-has .placeholder-caption{color:#f4f1e8;opacity:.9}
/* Square artwork in a wide cover: anchor per cover so headlines are not cut through the letters. Poster and video share it. */
.project-media[href="cobalt-lab.html"] :is(.ux-r6-poster,.ux-r6-video){object-position:50% 0}
/* Magic Rust: the artwork's headline fits whole only in a nearly square cover; wider covers start just below it */
.project-media[href="magic-rust.html"] .ux-r6-media{container-type:size}
@container (min-aspect-ratio:32/25){.project-media[href="magic-rust.html"] :is(.ux-r6-poster,.ux-r6-video){object-position:50% max(-23.6cqw,calc(100cqh - 100cqw))}}