/* Employee interview portraits keep their full frame; entity portraits retain existing framing. */
:root { --portrait-zoom: 1.85; }
.staff-photo,
.entity-photo {
  height: auto;
  aspect-ratio: 4 / 5;
  background: #fff;
}
.entity-photo, .record-portrait { --portrait-zoom: 1.65; }
.staff-photo > img,
.entity-photo > img,
.person-detail-image > img,
.record-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(var(--portrait-zoom));
  transform-origin: 50% 0%;
}
.staff-photo > .staff-team-tag { top: auto !important; bottom: 12px; }
.entity-photo > .badge { top: auto; bottom: 12px; z-index: 1; }
.entity-photo > .record-mark { display: none; }
.person-detail-image {
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  align-self: start;
}
.record-portrait {
  width: 160px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  background: #f8faf6;
  align-self: center;
}
.record-top .record-portrait > img { width: 100%; height: 100%; }
.resource-portrait {
  width: 65px;
  height: 82px;
  overflow: hidden;
  border-radius: 5px;
  flex-shrink: 0;
}
.resource-card .resource-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(1.6);
  transform-origin: 50% 0%;
}
.search-result > img { object-fit: cover; object-position: 50% 10%; }
@media (max-width:700px) {
  .person-detail-image { width: min(100%, 250px); justify-self: center; }
  .record-portrait { width: 100px; height: 125px; }
  .resource-portrait { width: 45px; height: 57px; }
}

/* The selected interview photos already include the desired composition. */
.staff-photo, .person-detail-image { --portrait-zoom: 1; aspect-ratio: 7 / 9; }
.staff-photo > img, .person-detail-image > img { object-fit: contain; mix-blend-mode: normal; }