.hero video.lead-motion-video { position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; background:transparent; pointer-events:none;
  filter:saturate(.74) contrast(1.05) sepia(.2) brightness(.98); }
.hero video.lead-motion-video::-webkit-media-controls,
.hero video.lead-motion-video::-webkit-media-controls-start-playback-button {
  display:none !important; -webkit-appearance:none; }
@media (prefers-reduced-motion: reduce) { .hero video.lead-motion-video { display:none; } }
/* Home lead: the loop replaces one framing photo, so it wears that card's duotone
   grayscale and stays under the spectrum tint and grain. */
.framing-photo video.lead-motion-video { position:absolute; inset:0; display:block; width:100%;
  height:100%; object-fit:cover; background:transparent; pointer-events:none;
  filter:grayscale(1) contrast(1.06) brightness(1.07); }
.framing-photo video.lead-motion-video::-webkit-media-controls,
.framing-photo video.lead-motion-video::-webkit-media-controls-start-playback-button {
  display:none !important; -webkit-appearance:none; }
/* The page styles leave these overlays at z-index:auto, so an appended positioned video
   would paint over them and the photo would lose its tint the instant it started. Raise
   only the target's overlays: z-index changes their blending backdrop and visibly muddies
   ordinary home and story framing photos that do not contain a loop. */
.framing-photo:not(.framing-photo--paywall):has(> video.lead-motion-video)::before,
.framing-photo:not(.framing-photo--paywall):has(> video.lead-motion-video)::after { z-index:1; }
@media (prefers-reduced-motion: reduce) {
  .framing-photo video.lead-motion-video { display:none; }
  .framing-photo:not(.framing-photo--paywall):has(> video.lead-motion-video)::before,
  .framing-photo:not(.framing-photo--paywall):has(> video.lead-motion-video)::after {
    z-index:auto; } }
/* Home feed fallback: the loop replaces a story-card cover photo while preserving
   its grayscale treatment beneath the existing spectrum tint and topic tag. */
.story-cover video.lead-motion-video { position:absolute; inset:0; display:block; width:100%;
  height:100%; object-fit:cover; background:transparent; pointer-events:none;
  filter:grayscale(1) contrast(1.06) brightness(1.07); }
.story-cover video.lead-motion-video::-webkit-media-controls,
.story-cover video.lead-motion-video::-webkit-media-controls-start-playback-button {
  display:none !important; -webkit-appearance:none; }
@media (prefers-reduced-motion: reduce) {
  .story-cover video.lead-motion-video { display:none; } }