/* One image frame, shared by the homepage, section indexes and project galleries. */
:root { --media-ratio: 4 / 3; --media-paper: #f2f2f2; }

body[data-topic] .media-frame {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--media-ratio);
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  background: var(--media-paper);
}

body[data-topic] .media-frame > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
  transform: none;
}

/* Photographs fill the frame; documents stay complete on an equally sized mount. */
body[data-topic] .media-frame.media-photo > img { object-fit: cover; }
body[data-topic] .media-frame.media-document > img {
  object-fit: contain;
  padding: 16px;
}
body[data-topic] .media-frame::after { display: none; }
body[data-topic] .media-frame:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
body[data-topic] .media-frame + figcaption {
  display: block;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body[data-topic] .media-frame + figcaption > span { display: block; }
body[data-topic] .media-frame + figcaption > span + span { margin-top: 4px; }
body[data-topic] .media-frame + figcaption a { max-width: none; text-align: left; }

/* Captions of different lengths must not shift the photographs above them. */
@supports (grid-template-rows: subgrid) {
  body[data-topic] :is(.editorial-card, .news-item) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 24px;
    align-items: start;
  }
  body[data-topic] .editorial-card :is(.project-card-copy, .event-copy, .research-project-copy, .publication-copy, .course-copy) { padding-bottom: 0; }
  body[data-topic] .editorial-card > :is(.project-card-media, .event-photo, .research-project-image, .book-cover, .course-thumb, .course-figure, .course-number),
  body[data-topic] .news-image { margin-top: 0; }
}

body[data-topic] .editorial-card > :is(.project-card-media, .event-photo, .research-project-image, .book-cover, .course-thumb, .course-figure),
body[data-topic] .dossier-grid > figure {
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
}
body[data-topic] .course-number { max-height: none; aspect-ratio: var(--media-ratio); }
body[data-topic] :is(.cv-portrait, .feature-wide, .framework-detail, .blatter-research-image) {
  width: calc((100% - (var(--editorial-columns) - 1) * var(--editorial-gap)) / var(--editorial-columns));
  max-width: none;
}
body[data-topic] .framework-layout { grid-template-columns: repeat(var(--editorial-columns), minmax(0, 1fr)); gap: var(--editorial-gap); }
body[data-topic] .framework-portrait { max-width: none; }
body[data-topic] .framework-layout > div { grid-column: 2 / -1; }
body[data-topic] :is(.home-portrait, .cv-portrait) .media-photo > img { object-position: 50% 35%; }

/* The homepage uses the same column width as the other sections. */
body[data-topic="home"] {
  --pad: clamp(24px, 4.2vw, 76px);
  max-width: 1920px;
  margin-inline: auto;
}
body[data-topic="home"] :is(.news-grid, .feature-layout, .about-content) {
  display: grid;
  grid-template-columns: repeat(var(--editorial-columns), minmax(0, 1fr));
  gap: 48px var(--editorial-gap);
  align-items: start;
}
body[data-topic="home"] .feature-note { grid-column: 2 / -1; }
body[data-topic="home"] .feature-note h2 { font-size: clamp(32px, 4vw, 64px); margin: 24px 0; }
body[data-topic="home"] .feature-image { background: transparent; }
body[data-topic="home"] .feature-image img { filter: grayscale(1); object-position: 50% 20%; }
body[data-topic="home"] .news-copy { display: flex; flex-direction: column; height: 100%; min-width: 0; }
body[data-topic="home"] .news-image { max-width: none; width: 100%; }
body[data-topic="home"] .news-image small { font-size: .8125rem; line-height: 1.5; margin-top: 10px; color: var(--muted); }
body[data-topic="home"] .home-portrait { grid-column: 1; width: 100%; max-width: none; }
body[data-topic="home"] .biography { grid-column: 2 / -1; }

@media (max-width: 700px) {
  body[data-topic="home"] { --pad: 24px; }
  body[data-topic="home"] :is(.feature-note, .biography) { grid-column: 1; }
  body[data-topic="home"] .home-portrait { max-width: none; }
  body[data-topic] .framework-layout > div { grid-column: 1; }
  body[data-topic] .media-frame.media-document > img { padding: 14px; }
}