/* Keep the original photos intact; frame each portrait inside its existing card. */
.person-photo {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  container-type: size;
}

.person-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* The face sits left of centre in the square source. Anchor it consistently,
   while covering both narrow contact cards and wide team cards. */
.person-photo.person-photo--asem > img {
  position: absolute;
  inset: auto;
  left: 50%;
  top: var(--portrait-eye-level, 44%);
  width: 270%;
  width: max(270cqw, 185cqh);
  max-width: none;
  height: auto;
  transform: translate(-36.5%, -44%);
}

.contact-person__portrait .person-photo--asem { --portrait-eye-level: 36%; }
.contact-person__portrait .person-photo--asem > img { width: max(310cqw, 270cqh); }
/* The sharper Tim portrait has less headroom. Keep the hair visible in wide
   cards as well as circular avatars without changing the source photograph. */
.person-photo > img.portrait-image--tim,
.contact-person__portrait > img.portrait-image--tim,
.editorial-person--tim .editorial-person__portrait img,
.team-bio__avatar.portrait-image--tim { object-position: 50% 0%; }

.team-bio__avatar--photo {
  position: relative;
  overflow: hidden;
}

.person-photo.person-photo--avatar > img {
  top: 50%;
  width: 365%;
}

.page--home .team-preview__portraits .portrait-placeholder--photo {
  justify-content: flex-start;
  padding: 0;
  background: #19253b;
}

.portrait-placeholder--photo .person-photo--asem { --portrait-eye-level: 34%; }

.page--home .team-preview__portraits .portrait-placeholder--photo::before,
.page--home .team-preview__portraits .portrait-placeholder--photo::after {
  content: none;
}

/* Give the caption its own space, including during the desktop card animation. */
.page--home .team-preview__portraits .portrait-placeholder--photo > .person-photo {
  position: relative;
  inset: auto;
  z-index: 0;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
}

.page--home .team-preview__portraits .portrait-placeholder--photo > p {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  max-width: none;
  margin: 0;
  padding: .875rem 1rem;
  border-top: 1px solid #ffffff1f;
  background: #111a2a;
  color: #f4f0ff;
  font-family: var(--font-sans);
  font-size: clamp(.875rem, 1.35vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.4;
  text-shadow: none;
  text-wrap: balance;
}

/* Size the complete portrait card, rather than squeezing a tall photograph
   into a shallow viewport-dependent frame. Captions keep their own space. */
.page--home .section--team-preview.is-cinematic-team .team-preview__portraits .portrait-placeholder--photo {
  width: min(45%, 34svh);
  height: auto;
  padding: 0;
}
.page--home .section--team-preview.is-cinematic-team .portrait-placeholder--photo > .person-photo {
  flex: none;
  aspect-ratio: 4 / 5;
}

.studio-people__portraits {
  display: flex;
  flex: 0 0 5rem;
  align-self: flex-start;
  padding-top: .15rem;
}

.studio-people__avatar {
  position: relative;
  flex: 0 0 3rem;
  height: 3rem;
  overflow: hidden;
  border: 2px solid #fffdf9;
  border-radius: 50%;
  background: #19253b;
}

.studio-people__avatar + .studio-people__avatar { margin-left: -1rem; }
.studio-people > div { min-width: 0; }

@media (max-width: 680px) {
  .page--home .team-preview__portraits .portrait-placeholder--photo > p {
    min-height: 4.25rem;
    padding: .75rem;
    font-size: clamp(.8125rem, 3.5vw, 1rem);
  }
}