.featured-case__media {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-strong);
}

.featured-case__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform 180ms ease;
}

.featured-case[data-project-id="P06"] .featured-case__media img {
  object-fit: contain;
}

.featured-case__media figcaption {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .28rem .48rem;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink);
  font: .62rem/1.2 var(--mono);
  letter-spacing: .04em;
}

.featured-case:hover .featured-case__media img,
.featured-case:focus-within .featured-case__media img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .featured-case__media img,
  .featured-case:hover .featured-case__media img,
  .featured-case:focus-within .featured-case__media img {
    transition: none;
    transform: none;
  }
}

.showcase-case {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
}

.case-lead,
.case-proof,
.case-chapter,
.case-gallery,
.case-boundary,
.case-next {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.case-lead h1,
.case-proof h2,
.case-chapter h2,
.case-gallery h2,
.case-boundary h2,
.case-next span {
  font: 500 clamp(2rem, 5vw, 4.5rem)/1.02 var(--serif);
  letter-spacing: -.04em;
}

.case-lead > p:not(.eyebrow):not(.case-entry),
.case-chapter > p:last-child,
.case-boundary > p:last-child {
  max-width: 46rem;
  color: var(--muted);
}

.case-lead dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .5rem 1.25rem;
  max-width: 46rem;
  margin: 2rem 0;
}

.case-lead dt { color: var(--accent); font: .72rem var(--mono); text-transform: uppercase; }
.case-lead dd { margin: 0; }

.case-lead__media,
.case-gallery__item,
.case-next__media {
  margin: 2rem 0 0;
  min-width: 0;
}

.case-lead__media img,
.case-gallery__item img,
.case-next__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.case-lead__media figcaption,
.case-gallery__item figcaption,
.case-next__media figcaption {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .88rem;
}

.case-entry { display: grid; gap: .5rem; margin: 2rem 0 0; }
.case-entry a { width: fit-content; font-weight: 700; }
.case-entry span { color: var(--muted); }
.case-proof ul { margin: 1.5rem 0 0; padding-left: 1.25rem; }
.case-chapters { display: grid; }

.case-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.case-gallery > .eyebrow,
.case-gallery > h2 { grid-column: 1 / -1; margin: 0; }
.case-gallery__item { margin: 0; }
.case-gallery__item a { display: block; width: 100%; }
.case-gallery__item a:focus-visible { outline-offset: 4px; }
.case-next > a { display: block; margin-top: 1.5rem; text-decoration: none; }
.case-next span { display: block; }

#media-viewer {
  width: min(96vw, 78rem);
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1rem, 3vw, 2rem);
  overflow: auto;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

#media-viewer::backdrop { background: rgb(25 37 49 / .72); }
#media-viewer [data-viewer-close] { display: block; margin-left: auto; min-height: 2.75rem; padding: .5rem .85rem; border: 1px solid currentColor; background: var(--ink); color: var(--paper); font: .75rem var(--mono); }
#media-viewer figure { display: grid; justify-items: center; margin: 1rem 0 0; }
#media-viewer img { display: block; max-width: 100%; width: auto; height: auto; }
#media-viewer figcaption { width: min(100%, 60rem); margin-top: .75rem; color: var(--muted); }

@media (max-width: 620px) {
  .case-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #media-viewer, #media-viewer::backdrop { transition: none; }
}