/* ==========================================================================
   The team  —  Figma "About us" (1028:104754), the dark band at y 4410.
   1920 x 731 on Mono/Dark.

   Four cards in pairs, a portrait then the person. The cards open the way the
   Smart Search frames do -- from a seed at their own corner out to full size.
   ========================================================================== */

.about-team {
  height: calc(731 * var(--s));
  background: var(--c-mono-dark);
  overflow: clip;
}

.about-team__h {
  position: absolute;
  left: calc(48 * var(--s));
  top: 0;
  width: calc(900 * var(--s));
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: calc(48 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-1.44 * var(--s));
  color: var(--c-mono-light);
}
.about-team__h .mask { display: block; }
.about-team__h .rv { display: block; }

.about-team__row { position: absolute; inset: 0; }

.about-team__portrait,
.about-team__card {
  position: absolute;
  top: calc(131 * var(--s));
  margin: 0;
  width: calc(54 * var(--s));
  height: calc(36 * var(--s));
  overflow: clip;
  opacity: 0;
  transition:
    width  calc(var(--rv-dur) * 1.1) var(--rv-ease),
    height calc(var(--rv-dur) * 1.1) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.5) var(--rv-ease);
}
.about-team.is-in .about-team__portrait,
.about-team.is-in .about-team__card { opacity: 1; }

/* The plate under each picture -- it shows while the photograph loads, and it
   is what a portrait without one would fall back to. */
.about-team__portrait { background: var(--c-light-dark); }

/* Held at the plate's FINISHED size, not at 100%: the plate opens from a 54x36
   seed, and a picture sized to it would be squashed flat and stretched out
   over the whole opening. At a fixed size the plate is a widening window onto
   a picture that never moves. */
.about-team__portrait img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(441 * var(--s));
  height: calc(600 * var(--s));
  max-width: none;
  object-fit: cover;
}
.about-team__card { background: var(--c-mono-light); color: var(--c-mono-dark); }

.about-team__row > :nth-child(1) { left: calc(48 * var(--s)); }
.about-team__row > :nth-child(2) { left: calc(489 * var(--s));  transition-delay: 110ms; }
.about-team__row > :nth-child(3) { left: calc(970 * var(--s));  transition-delay: 220ms; }
.about-team__row > :nth-child(4) { left: calc(1411 * var(--s)); transition-delay: 330ms; }

.about-team.is-in .about-team__row > :nth-child(1),
.about-team.is-in .about-team__row > :nth-child(3) { width: calc(441 * var(--s)); height: calc(600 * var(--s)); }
.about-team.is-in .about-team__row > :nth-child(2),
.about-team.is-in .about-team__row > :nth-child(4) { width: calc(461 * var(--s)); height: calc(600 * var(--s)); }

/* Card internals, from the frame: 32 in from the card's own left edge, the
   name on 32, the role on 74, and the bio dropped to 300 -- the gap between
   the role and the bio is the composition, not an oversight. */
.about-team__card h3 {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(32 * var(--s));
  width: calc(402 * var(--s));
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(24 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.72 * var(--s));
  color: var(--c-mono-dark);
}
.about-team__role {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(74 * var(--s));
  width: calc(414 * var(--s));
  margin: 0;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.4;
  color: #7B8493;
}
.about-team__bio {
  position: absolute;
  left: calc(32 * var(--s));
  top: calc(300 * var(--s));
  width: calc(395 * var(--s));
}
/* The frame gives the two bios different measures -- 395 and 387 -- which is
   what sets where each one breaks. */
.about-team__row > :nth-child(4) .about-team__bio { width: calc(387 * var(--s)); }
.about-team__bio p {
  margin: 0 0 calc(16 * var(--s));
  font-size: max(11px, calc(15 * var(--s)));
  line-height: 1.55;
  color: #202938;
}
.about-team__bio p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .about-team { height: auto; padding: 56px 20px 56px; }
  .about-team__h { position: static; width: auto; font-size: clamp(26px, 7vw, 40px); letter-spacing: -0.5px; }
  .about-team__row { position: static; display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
  .about-team__portrait,
  .about-team__card {
    position: static;
    width: auto;
    height: auto;
    transform: translateY(20px);
    transition:
      opacity calc(var(--rv-dur) * 0.6) var(--ui-ease),
      transform calc(var(--rv-dur) * 0.8) var(--rv-ease);
  }
  .about-team.is-in .about-team__portrait,
  .about-team.is-in .about-team__card { transform: none; }
  /* Same trap as the What-we-do cards: the open widths are set at a weight
     the single-class reset above cannot reach. */
  .about-team.is-in .about-team__row > :nth-child(1),
  .about-team.is-in .about-team__row > :nth-child(2),
  .about-team.is-in .about-team__row > :nth-child(3),
  .about-team.is-in .about-team__row > :nth-child(4) { width: auto; height: auto; }
  .about-team.is-in .about-team__portrait { height: auto; }
  .about-team__portrait { position: relative; aspect-ratio: 441 / 380; }
  /* The fixed 441x600 above is a 1920-grid size; here the plate sets the box
     and the picture fills whatever it is. */
  .about-team__portrait img { width: 100%; height: 100%; }
  .about-team__card { padding: 24px 20px; }
  .about-team__card h3,
  .about-team__role,
  .about-team__bio { position: static; width: auto; }
  .about-team__role { margin: 4px 0 16px; }
  .about-team__row > :nth-child(4) .about-team__bio { width: auto; }
  .about-team__bio p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-team__portrait,
  .about-team__card { opacity: 1; transform: none; transition: none; }
}