/* team member detail pages */
.mbr-sec {
  padding-top: clamp(32px, 4.4vw, 51px);
}


/* back button */
.mbr-back {
  margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}

.mbr-back .arw {
  display: inline-block;
  transition: transform .28s;
}

.mbr-back:hover .arw {
  transform: translateX(-4px);
}


/* portrait + biography */
.mbr {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.mbr-pic {
  position: sticky;
  top: calc(var(--nav-h-sm) + 24px);
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}

.mbr-pic img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

.mbr-body h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}

.mbr-role {
  margin-top: .8rem;
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  font-weight: 500;
  color: var(--body);
}

.mbr-bio {
  margin-top: clamp(1.9rem, 3vw, 2.8rem);
}

.mbr-bio p {
  font-size: clamp(1.04rem, 1.2vw, 1.13rem);
  line-height: 1.72;
  color: var(--body);
  max-width: 64ch;
}

.mbr-bio p+p {
  margin-top: 1.25rem;
}

@media (max-width: 820px) {
  .mbr {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .mbr-pic {
    position: static;
    max-width: 330px;
  }

}