/* Linked editorial photographs only. No article gallery, cover, video or identity marks. */
:is(
  a.home-lead-link, a.home-stream-art-link, a.archive-cover-art-link,
  .s13-related-card > a, a.nb-winner-art-link, a.authors-index-row,
  a.s13-author-portrait, a.s13-menu-feed-entry, a.story-link,
  a.collection-feature, a.interview-card, a.review-card
):is(:focus-visible, :active) :is(
  .home-lead-art, .story-image, .archive-cover-art, .s13-related-art,
  .nb-winner-image, .authors-index-portrait, .s13-menu-feed-image,
  .collection-feature-art, .interview-card-art, .review-card-art
) > img,
a.s13-author-portrait.s13-author-portrait:is(:focus-visible, :active) > img,
.home-lead-layout:has(a.home-lead-cta:is(:focus-visible, :active)) .home-lead-art > img,
.home-stream-card:has(a.home-stream-story-link:is(:focus-visible, :active)) .story-image > img,
.archive-cover-card:has(a.archive-cover-title-link:is(:focus-visible, :active)) .archive-cover-art > img,
.nb-winner-card:has(:is(a.nb-winner-title-link, a.nb-winner-cta):is(:focus-visible, :active)) .nb-winner-image > img {
  filter: saturate(1) grayscale(1) contrast(1.13) brightness(1.04) !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(
    a.home-lead-link, a.home-stream-art-link, a.archive-cover-art-link,
    .s13-related-card > a, a.nb-winner-art-link, a.authors-index-row,
    a.s13-author-portrait, a.s13-menu-feed-entry, a.story-link,
    a.collection-feature, a.interview-card, a.review-card
  ):not(.s13-media-managed):hover :is(
    .home-lead-art, .story-image, .archive-cover-art, .s13-related-art,
    .nb-winner-image, .authors-index-portrait, .s13-menu-feed-image,
    .collection-feature-art, .interview-card-art, .review-card-art
  ) > img,
  a.s13-author-portrait:not(.s13-media-managed):hover > img,
  .home-lead-layout:has(a.home-lead-cta:not(.s13-media-managed):hover) .home-lead-art > img,
  .home-stream-card:has(a.home-stream-story-link:not(.s13-media-managed):hover) .story-image > img,
  .archive-cover-card:has(a.archive-cover-title-link:not(.s13-media-managed):hover) .archive-cover-art > img,
  .nb-winner-card:has(:is(a.nb-winner-title-link, a.nb-winner-cta):not(.s13-media-managed):hover) .nb-winner-image > img {
    filter: saturate(1) grayscale(1) contrast(1.13) brightness(1.04) !important;
  }
}

.s13-media-frame {
  --s13-media-saturation: 1;
  --s13-media-monochrome: 0;
  --s13-media-contrast: 1;
  --s13-media-brightness: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.s13-media-frame.home-lead-art { --s13-media-saturation: .82; --s13-media-contrast: 1.05; }
.s13-media-frame:is(.story-image,.archive-cover-art,.interview-card-art) { --s13-media-saturation: .78; --s13-media-contrast: 1.06; }
.s13-media-frame.s13-related-art { --s13-media-saturation: .72; --s13-media-contrast: 1.08; }
.s13-media-frame:is(.authors-index-portrait,.s13-author-portrait) { --s13-media-saturation: 1; --s13-media-monochrome: 1; --s13-media-contrast: 1.08; }
.s13-media-frame.s13-menu-feed-image { --s13-media-monochrome: 1; --s13-media-brightness: .78; }
.s13-media-frame.s13-media-frame > img {
  /* The frame never scales: borders, crops and neighbouring text stay exactly still. */
  transform: none !important;
  /* Identical function order in both states is essential: saturate → grayscale
     otherwise interpolates discretely, even with a long transition duration. */
  filter: saturate(var(--s13-media-saturation)) grayscale(var(--s13-media-monochrome)) contrast(var(--s13-media-contrast)) brightness(var(--s13-media-brightness)) !important;
  transition: filter 700ms cubic-bezier(.4,0,.2,1) !important;
}
.s13-media-frame.s13-media-frame.is-signal-active > img {
  filter: saturate(1) grayscale(1) contrast(1.13) brightness(1.04) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .s13-media-frame.s13-media-frame.is-route-departing > img {
    filter: saturate(1) grayscale(1) contrast(1.13) brightness(1.04) !important;
  }
}
.s13-media-frame > .s13-media-signal,
.s13-media-signal > i {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}
.s13-media-frame > .s13-media-signal {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  contain: paint;
}
.s13-media-signal > .s13-media-signal-echo {
  background-image: var(--s13-signal-image);
  background-repeat: no-repeat;
  background-size: var(--s13-signal-fit, cover);
  background-position: var(--s13-signal-position, 50% 50%);
  scale: var(--s13-signal-zoom, 1);
  transform-origin: var(--s13-signal-position, 50% 50%);
  /* Move a feathered mask, not the photograph: its crop stays pixel-aligned. */
  mask-image: linear-gradient(to bottom, transparent 43%, #000 47%, #000 53%, transparent 57%);
  mask-size: 100% 300%;
  mask-repeat: no-repeat;
  mask-position: 0 100%;
  filter: grayscale(1) invert(1) contrast(.9) brightness(.86);
  opacity: 0;
}
@supports not (mask-image: linear-gradient(#000, transparent)) {
  .s13-media-signal > .s13-media-signal-echo { display: none; }
}
.s13-media-signal > .s13-media-signal-grain {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,.45) 2px,
    rgba(0,0,0,.45) 3px,
    rgba(255,255,255,.2) 3px,
    transparent 4px
  );
  opacity: 0;
}
.s13-media-signal > .s13-media-signal-track {
  inset: -2px 0 auto;
  height: 2px;
  background: rgba(235,235,235,.48);
  box-shadow: 0 3px 0 rgba(0,0,0,.24);
  opacity: 0;
}
.s13-media-frame > :is(.archive-cover-issue, .s13-related-issue),
.s13-author-portrait.s13-media-frame > span {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .s13-media-frame.s13-media-frame > img { transition: none !important; }
  .s13-media-frame > .s13-media-signal { display: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .s13-media-managed:hover .s13-media-frame.s13-media-frame > img,
  a.s13-media-managed.s13-media-frame:hover > img,
  .home-lead-layout:has(a.home-lead-cta:hover) .s13-media-frame.home-lead-art > img,
  .home-stream-card:has(a.home-stream-story-link:hover) .s13-media-frame.story-image > img,
  .archive-cover-card:has(a.archive-cover-title-link:hover) .s13-media-frame.archive-cover-art > img,
  .nb-winner-card:has(:is(a.nb-winner-title-link, a.nb-winner-cta):hover) .s13-media-frame.nb-winner-image > img {
    filter: saturate(1) grayscale(1) contrast(1.13) brightness(1.04) !important;
  }
}