/* =========================
   TEAM HERO
========================= */

.team-hero{
  position: relative;
  background: #000;
  color: #fff;
  overflow: hidden;
  border-bottom: 2px solid #fff;
}

.team-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.22;
  z-index: 0;
}

.team-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
  z-index: 0;
}

.team-hero__inner{
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 84px 24px 64px;
}

.team-hero__eyebrow{
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

.team-hero__title{
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  color: #fff;
}

.team-hero__text{
  max-width: 760px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.84);
}

@media (max-width: 991px){
  .team-hero__inner{
    padding: calc(var(--mobile-header-height, 55px) + 36px) 22px 48px;
  }
}

@media (max-width: 640px){
  .team-hero__inner{
    padding: calc(var(--mobile-header-height, 55px) + 28px) 18px 40px;
  }

  .team-hero__text{
    font-size: 16px;
  }
}


/* =========================
   TEAM MEMBERS
   Editorial layout: bio on the left, tall portrait on the right
========================= */

.team-section{
  background: #fff;
  color: #000;
}

.team-section__inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 110px 24px 120px;
}

.team-member{
  scroll-margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 88px;
  align-items: start;
}

.team-member + .team-member{
  margin-top: 110px;
  padding-top: 110px;
  border-top: 1.5px solid rgba(0,0,0,.12);
}

/* Heading: the title leads as the large text */

.team-member__heading{
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: .01em;
  color: #000;
}


/* Brand gold accent, the same gold used on the anniversary badge */
.team-member__rule{
  display: block;
  width: 56px;
  height: 2px;
  margin: 24px 0 18px;
  background: #c7ab5b;
}

/* Name line. A deeper shade of the brand gold so small text on white stays
   legible */
.team-member__name{
  margin: 0 0 34px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #86692a;
}

/* Bio */

.team-member__bio{
  max-width: 640px;
}

.team-member__bio p{
  margin: 0 0 22px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(0,0,0,.8);
}

.team-member__bio p:last-child{
  margin-bottom: 0;
}

/* Portrait */

.team-member__media{
  position: relative;
  aspect-ratio: 4 / 5;
  background: #eceae6;
  overflow: hidden;
}

.team-member__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* The bios run longer than the portrait, so the photo holds its place while
   the text scrolls past */
@media (min-width: 992px){
  .team-member__media{
    position: sticky;
    top: 40px;
  }
}

/* Flipped layout: portrait on the left, bio on the right */
@media (min-width: 992px){
  .team-member--reverse{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  }

  .team-member--reverse .team-member__media{
    order: -1;
  }
}

/* =========================
   TEAM RESPONSIVE
========================= */

@media (max-width: 1100px){
  .team-member{
    gap: 56px;
  }
}

@media (max-width: 991px){
  .team-section__inner{
    padding: 72px 22px 88px;
  }

  .team-member{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Portrait leads on smaller screens */
  .team-member__media{
    order: -1;
    width: 100%;
    max-width: 480px;
  }

  .team-member + .team-member{
    margin-top: 72px;
    padding-top: 72px;
  }
}

@media (max-width: 640px){
  .team-section__inner{
    padding: 56px 18px 72px;
  }

  .team-member{
    gap: 28px;
  }

  .team-member__heading{
    font-size: clamp(34px, 9vw, 42px);
  }

  .team-member__rule{
    margin: 20px 0 14px;
  }

  .team-member__name{
    margin-bottom: 26px;
  }

  .team-member__bio p{
    font-size: 15px;
    line-height: 1.8;
  }

  .team-member + .team-member{
    margin-top: 56px;
    padding-top: 56px;
  }
}