/* ============================================================
   WHO IS IN THE ROOM — the Luke and Harvey profiles.

   The section used to be a single generic two-up with one photo and
   one line, and never answered the page's "who is in the room"
   question. It now carries a matched pair of profile cards built on
   the About page's own person card (the one behind the "+" on the
   team roster), measured from the capture:

     outer container  #F7F5EF, radius 40, 10px padding
     portrait tile    flex 1, radius 30, stretched, object-fit cover
     copy panel       #FFFFFA, radius 30, 30px padding, 30px gap, flex 2
     role ABOVE name  role 15/150/-0.03, name 30/130/-0.04 on wght 585
     bottom slot      13px label over a 17px value (the card's email
                      slot, carrying the day line instead)

   No shadows, no second accent, 13px never scales. Loaded after room.css.
   ============================================================ */

/* vsl.css halves this section's top padding (.selr-inroom rule) — that was
   right when it opened on a two-up card, wrong now it opens on a section
   heading, which needs the same air above it as every other header. */
#in-the-room .selr-sec-inner { padding-top: 70px; padding-bottom: 110px; gap: 80px; }

/* ---- head: left, flush to the content column ---- */
.selr-people-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px; width: 100%;
}
#in-the-room .selr-people-head h2 { text-align: left; max-width: 1040px; }
.selr-people-tone { color: #616161; }
.selr-people-sub {
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.02em;
  color: #616161; max-width: 620px; margin: 0;
}

/* ---- the pair ---- */
.selr-people {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; width: 100%;
}

/* the About card anatomy: cream shell, 10px inset, two tiles inside */
.selr-person {
  display: flex; flex-direction: row; align-items: stretch;
  gap: 10px; padding: 10px;
  background: #F7F5EF; border-radius: 40px; overflow: hidden;
}
.selr-person-portrait {
  flex: 1.35 0 0; width: 1px; align-self: stretch;
  border-radius: 30px; overflow: hidden; position: relative;
}
.selr-person-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 8%;
  display: block; border-radius: inherit;
}
.selr-person-body {
  flex: 2 0 0; width: 1px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 30px; padding: 30px;
  background: #FFFFFA; border-radius: 30px;
}

.selr-person-copy { display: flex; flex-direction: column; gap: 20px; }
.selr-person-id { display: flex; flex-direction: column; gap: 5px; }
.selr-person-role {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: -0.03em;
  color: #616161;
}
.selr-person-name {
  margin: 0;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-weight: 400; font-variation-settings: "wght" 585;
  font-size: 30px; line-height: 1.3; letter-spacing: -0.04em; color: #242424;
}
.selr-person-bio {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: -0.03em;
  color: #616161;
}

/* the card's bottom slot: on About it is the email, here it is the day line */
.selr-person-foot { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.selr-person-label {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1.5; letter-spacing: -0.025em;
  color: #616161;
}
.selr-person-day {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.03em;
  color: #242424;
}

/* ---- hover: two moves, both from the site's own vocabulary ----
   The About roster row washes its ground and turns its glyph purple on
   hover. Translated to a card: the cream shell eases to the page's own
   lavender field, the portrait takes the site's one image zoom (1.03),
   and the day label picks up the single accent. Nothing lifts, nothing
   casts a shadow, nothing scales but the photograph.
   :focus-within gives a keyboard user the same read. */
.selr-person {
  transition:
    background-color var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1));
}
.selr-person:hover,
.selr-person:focus-within { background: #F3EEFD; }

.selr-person-label {
  transition: color var(--selr-dur-base, 300ms) var(--selr-ease-sym, cubic-bezier(.44,0,.56,1));
}
.selr-person:hover .selr-person-label,
.selr-person:focus-within .selr-person-label { color: #6736E2; }

/* the day line reads as the card's payoff, so it gets the accent dot the
   site puts beside every control, growing in from nothing on hover */
.selr-person-day { display: flex; align-items: baseline; gap: 0; }
.selr-person-day::before {
  content: ""; flex: none;
  width: 0; height: 8px; margin-right: 0;
  border-radius: 50%; background: #6736E2;
  transform: translateY(-1px);
  transition:
    width  var(--selr-dur-move, 400ms) var(--selr-ease-over, cubic-bezier(.22,1,.36,1)),
    margin var(--selr-dur-move, 400ms) var(--selr-ease-over, cubic-bezier(.22,1,.36,1));
}
.selr-person:hover .selr-person-day::before,
.selr-person:focus-within .selr-person-day::before { width: 8px; margin-right: 10px; }

/* the portrait keeps the site's single image hover, 1.03, but the whole card
   is the hover target, not just the photograph, so it fires wherever the
   cursor lands on the card. */
.selr-person-portrait img { transform-origin: center center; }
.selr-person:hover .selr-person-portrait img,
.selr-person:focus-within .selr-person-portrait img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .selr-person-day::before { display: none; }
}

/* ---- tablet: the side-by-side portrait gets too narrow to hold a face,
   so each card stacks while the pair stays two across ---- */
@media (max-width: 1199.98px) {
  .selr-person { flex-direction: column; height: 100%; }
  .selr-person-portrait { flex: none; width: 100%; aspect-ratio: 1 / 1; }
  .selr-person-body { flex: 1 0 auto; width: 100%; padding: 24px; gap: 24px; justify-content: flex-start; }
  .selr-person-name { font-size: 25px; }
  .selr-person-role, .selr-person-bio { font-size: 14px; }
  .selr-person-day { font-size: 15px; }
}

/* ---- mobile: one column ---- */
@media (max-width: 809.98px) {
  #in-the-room .selr-sec-inner { padding-top: 70px; padding-bottom: 70px; gap: 28px; }
  .selr-people { grid-template-columns: 1fr; }
  .selr-person { border-radius: 30px; }
  .selr-person-portrait { border-radius: 20px; }
  .selr-person-body { border-radius: 20px; padding: 20px; }
  .selr-people-sub { font-size: 15px; }
}

.selr-people-head .selr-section-kicker { margin: 0; }