/* Portfolio artwork is a complete 5:3 composition, never a cropped webpage. */
:root{--cover-ratio:5/3}
.home-work-art.project-cover,.portfolio-art.project-cover{
  display:block;
  padding:0;
  height:auto;
  aspect-ratio:var(--cover-ratio);
  overflow:hidden;
  background:var(--ink);
}
.project-cover>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.portfolio-entry:first-child .project-cover{height:auto}
.case-interface{margin:0 var(--gutter) var(--space-xl)}
.case-interface>img{display:block;width:100%;height:auto}
.case-interface>figcaption{font-size:var(--text-sm);color:var(--muted);margin-block-start:var(--space-sm)}
/* Frame the actual artwork instead of a fixed-height position in its caption. */
.home-work-card:has(.project-cover)::before,.home-work-card:has(.project-cover)::after,
.portfolio-entry>a:has(.project-cover)::before,.portfolio-entry>a:has(.project-cover)::after{content:none}
.project-cover::after{
  content:'';
  position:absolute;
  inset:0;
  border:var(--brand-stroke) solid var(--signal);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--fast);
}
a:hover>.project-cover::after,a:focus-visible>.project-cover::after{opacity:1}
.is-list .portfolio-art.project-cover{height:auto;width:100%;aspect-ratio:var(--cover-ratio)}
@media(prefers-reduced-motion:reduce){
  .home-work-card:hover .project-cover,.portfolio-entry a:hover .project-cover>img{transform:none}
  .project-cover,.project-cover>img,.project-cover::after{transition:none}
}

/* Completed cover compositions stay fixed within their frames in every pointer state. */
.home-work-card .project-cover,.home-work-card:hover .project-cover,
.home-work-card:focus-visible .project-cover,
.home-work-card .project-cover>img,.home-work-card:hover .project-cover>img,
.home-work-card:focus-visible .project-cover>img,
.portfolio-entry>a:hover .project-cover>img,.portfolio-entry>a:focus-visible .project-cover>img{transform:none;transition:none}