/* Shared feedback for linked cards and inspectable media. Text links in prose
   keep their own underlines; static artwork and avatars are not animated. */
:is(.conversation-card, .series-spread li>a, .reading-start li>a,
    .start-conversations>a, .start-paths>a, button.image-card, .chronicle-media,
    .reading-row, .research-card, .finding-reading-card, .start-feature, .start-letters article,
    .overview-lead, .overview-conversation, .overview-article-row,
    .overview-interview-card, .overview-collection-card, .film-card) {
  --card-hover-surface: #1c2319;
  transition: background-color .16s ease;
}
.series-spread li>a { --card-hover-surface: #f4efdf; }
.start-feature {
  --card-hover-surface: #efeada;
}

/* Clip only the photograph, leaving captions, focus rings and overlays intact. */
:is(.start-feature-image, .start-conversation-image, .chronicle-media-frame,
    .image-card-media, .image-preview-link) { overflow: hidden; }
:is(.start-conversation-image, .chronicle-media-frame, .image-card-media) { display: block; min-width: 0; }
.chronicle-media-frame { width: 100%; }
.image-card-media { height: 225px; }
.image-card-media img { display: block; }

:is(.conversation-card-image, .series-cover, .reading-row-image, .finding-reading-image,
    .start-feature-image, .start-conversation-image, .chronicle-media-frame,
    .image-card-media, .image-preview-link, .room-poster-link) img,
.overview-page .overview-media img {
  transform: scale(var(--card-image-scale, 1));
  filter: brightness(var(--card-image-brightness, 1));
  transition: transform .24s cubic-bezier(.2,0,0,1), filter .2s ease;
}
.overview-page .overview-media:hover img { opacity: 1; }

/* A whole-card link is one action, not a set of underlined text fragments. */
:is(.conversation-card, .series-spread li>a, .reading-start li>a,
    .start-conversations>a, .start-paths>a, .chronicle-media,
    .image-preview-link, .room-poster-link):is(:hover, :focus-visible),
.reading-start li>a:hover strong,
.series-spread li>a:hover .series-caption>span,
:is(.reading-row, .research-card, .start-feature, .start-letters) :is(h2,h3) a:hover,
.overview-page :is(.overview-lead, .overview-conversation, .overview-article-row,
    .overview-interview-card, .overview-collection-card) :is(h2,h3) a:hover {
  text-decoration: none;
}

:is(.conversation-card, .series-spread li>a, .reading-start li>a,
    .start-conversations>a, .start-paths>a, button.image-card, .chronicle-media,
    .image-preview-link, .room-poster-link, .overview-media):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}

/* Multi-action cards respond only while an actual action is active. */
:is(.conversation-card, .series-spread li>a, .reading-start li>a,
    .start-conversations>a, .start-paths>a, button.image-card, .chronicle-media):focus-visible,
:is(.reading-row, .research-card, .finding-reading-card, .start-feature, .start-letters article,
    .overview-lead, .overview-conversation, .overview-article-row,
    .overview-interview-card, .overview-collection-card, .film-card):has(:focus-visible) {
  background-color: var(--card-hover-surface);
}
:is(.image-preview-link, .room-poster-link, .overview-media):focus-visible {
  --card-image-brightness: 1.04;
}

@media (hover:hover) and (pointer:fine) {
  :is(.conversation-card, .series-spread li>a, .reading-start li>a,
      .start-conversations>a, .start-paths>a, button.image-card, .chronicle-media):hover,
  :is(.reading-row, .research-card, .finding-reading-card, .start-feature, .start-letters article,
      .overview-lead, .overview-conversation, .overview-article-row,
      .overview-interview-card, .overview-collection-card, .film-card):has(a:hover, button:hover) {
    background-color: var(--card-hover-surface);
    --card-image-scale: 1.015;
    --card-image-brightness: 1.04;
  }
  :is(.image-preview-link, .room-poster-link, .overview-media):hover {
    --card-image-scale: 1.015;
    --card-image-brightness: 1.04;
  }
}

@media (max-width:1050px) {
  .chronicle-media-frame { width: 160px; flex-shrink: 0; }
  .chronicle-media .chronicle-media-frame img { width: 100%; }
}
@media (max-width:700px) {
  .chronicle-media-frame { width: 130px; }
}
@media (prefers-reduced-motion:reduce) {
  :is(.conversation-card, .series-spread li>a, .reading-start li>a,
      .start-conversations>a, .start-paths>a, button.image-card, .chronicle-media,
      .reading-row, .research-card, .finding-reading-card, .start-feature, .start-letters article,
      .overview-lead, .overview-conversation, .overview-article-row,
      .overview-interview-card, .overview-collection-card, .film-card,
      .image-preview-link, .room-poster-link, .overview-media) { transition: none; }
  :is(.conversation-card-image, .series-cover, .reading-row-image, .finding-reading-image,
      .start-feature-image, .start-conversation-image, .chronicle-media-frame,
      .image-card-media, .image-preview-link, .room-poster-link) img,
  .overview-page .overview-media img { transform: none; transition: none; }
}