/* Directory component. The roster stays in source order at every width. */
.people-proof {
  padding: 0 var(--gutter) 100px;
  max-width: 1920px;
  margin-inline: auto;
}
.people-proof .directory-opening {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
  padding-block: 36px 28px;
}
.people-proof .directory-opening h1 {
  margin: 0;
  font-size: clamp(48px, 4.7vw, 78px);
  line-height: 1.06;
  letter-spacing: -.055em;
  font-weight: 400;
}
.people-proof .directory-opening > p {
  font-size: clamp(22px, 1.65vw, 28px);
  line-height: 1.3;
  margin: 0 0 3px;
  max-width: 420px;
  justify-self: end;
}
.people-proof .directory { margin: 0; padding: 0; }
.people-proof .directory-controls {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) minmax(180px, 1fr) auto;
  gap: 35px;
  align-items: end;
  border-block: 1px solid var(--line);
  padding-block: 18px 17px;
  font: 12px/1.45 Arial, sans-serif;
}
.people-proof .directory-controls[hidden],
.people-proof .person-row[hidden],
.people-proof #people-empty[hidden] { display: none !important; }
.people-proof .directory-controls label { display: block; min-width: 0; }
.people-proof .directory-controls label > span { display: flex; align-items: center; gap: 8px; }
.people-proof .directory-controls svg { width: 15px; height: 15px; flex: 0 0 auto; }
.people-proof .directory-controls input,
.people-proof .directory-controls select {
  border: 0;
  border-bottom: 1px solid #b4aaa3;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--ink);
  background: transparent;
  font: 16px/1.3 Arial, sans-serif;
  height: 35px;
  padding: 4px 0;
}
.people-proof .directory-controls input:focus,
.people-proof .directory-controls select:focus { outline: 2px solid var(--maroon); outline-offset: 4px; }
.people-proof .directory-status { text-align: end; min-width: 130px; }
.people-proof .directory-status p { margin: 0 0 8px; font: inherit; }
.people-proof .directory-status button {
  color: var(--maroon);
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 2px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.people-proof .directory-status button:disabled { color: #7c746f; cursor: default; border-color: transparent; }
.people-proof .people-list {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 38px 28px;
  margin-block-start: 22px;
}
.people-proof .directory-founders-heading,
.people-proof .directory-team-heading {
  grid-column: 1 / -1;
  margin: 0 0 -19px;
  color: var(--maroon);
  font: 11px/1.4 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.people-proof .directory-team-heading { padding-top: 16px; border-top: 1px solid var(--line); }
.people-proof .person-row { grid-column: span 3; min-width: 0; margin: 0; padding: 0; border: 0; }
.people-proof .person-row[data-founder="true"] { grid-column: span 5; }
.people-proof .person-row > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-content: start;
  height: 100%;
  gap: 15px 7px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.people-proof .directory-portrait {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.people-proof .directory-portrait img,
.people-proof .directory-portrait picture { display: block; width: 100%; height: 100%; }
.people-proof .directory-portrait img { object-fit: cover; transition: transform .45s ease; }
.people-proof .proof-headshot {
  position: relative;
  border: 1px solid #ddd6d0;
  background: linear-gradient(150deg, #f7f5f1 20%, #edeae5);
  color: #847971;
}
.people-proof .headshot-register {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: 15px;
  font: 10px/1 Arial, sans-serif;
  letter-spacing: .1em;
}
.people-proof .headshot-crop {
  position: absolute;
  inset: 14% 14% 18%;
  border: 1px solid #d9d0c8;
}
.people-proof .headshot-crop::before,
.people-proof .headshot-crop::after {
  content: "";
  position: absolute;
  background: #c7bab0;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}
.people-proof .headshot-crop::before { width: 11px; height: 1px; }
.people-proof .headshot-crop::after { width: 1px; height: 11px; }
.people-proof .headshot-caption {
  position: absolute;
  inset: auto 15px 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 10px/1.3 Arial, sans-serif;
  letter-spacing: .045em;
}
.people-proof .person-caption { min-width: 0; }
.people-proof .person-caption h2 {
  margin: 0 0 8px;
  font: 400 clamp(21px, 1.65vw, 29px)/1.14 Georgia, serif;
  letter-spacing: -.032em;
  overflow-wrap: normal;
}
.people-proof .person-row[data-founder="true"] .person-caption h2 { font-size: clamp(25px, 2.15vw, 39px); }
.people-proof .person-caption p { margin: 0; font: 11px/1.55 Arial, sans-serif; }
.people-proof .person-row .arrow { align-self: start; margin-top: 2px; color: var(--maroon); transition: transform .2s ease; }
.people-proof .person-row > a:hover { border-color: var(--maroon); }
.people-proof .person-row > a:hover h2 { color: var(--maroon); }
.people-proof .person-row > a:hover img { transform: scale(1.018); }
.people-proof .person-row > a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 5px; }
.people-proof .people-list[data-filtered="true"] > .eyebrow { display: none; }
.people-proof .people-list[data-filtered="true"] .person-row { grid-column: span 3; }
.people-proof .people-list[data-filtered="true"] .person-row .person-caption h2 { font-size: clamp(21px, 1.65vw, 29px); }
.people-proof #people-empty { font-size: 25px; padding: 20px 0 70px; }
[dir="rtl"] .people-proof .directory-opening h1 { letter-spacing: 0; line-height: 1.2; }
[dir="rtl"] .people-proof .directory-controls,
[dir="rtl"] .people-proof .directory-controls input,
[dir="rtl"] .people-proof .directory-controls select,
[dir="rtl"] .people-proof .directory-founders-heading,
[dir="rtl"] .people-proof .directory-team-heading,
[dir="rtl"] .people-proof .headshot-caption,
[dir="rtl"] .people-proof .person-caption p { font-family: Amiri, serif; font-size: 16px; letter-spacing: 0; }
[dir="rtl"] .people-proof .person-caption h2 { font-family: Amiri, serif; font-size: clamp(24px, 1.7vw, 30px); line-height: 1.4; letter-spacing: 0; }
[dir="rtl"] .people-proof .person-row[data-founder="true"] .person-caption h2 { font-size: clamp(28px, 2.2vw, 39px); }
[dir="rtl"] .people-proof .headshot-caption { font-size: 13px; }
@media (min-width: 1280px) {
  .people-proof .people-list[data-filtered="false"] .person-row[data-founder="true"] {
    width: 100%;
    max-width: 380px;
    justify-self: center;
  }
  .people-proof .people-list[data-filtered="false"] .person-row[data-founder="true"] .person-caption {
    grid-row: 1;
    grid-column: 1;
    min-height: 72px;
  }
  .people-proof .people-list[data-filtered="false"] .person-row[data-founder="true"] .arrow {
    grid-row: 1;
    grid-column: 2;
  }
  .people-proof .people-list[data-filtered="false"] .person-row[data-founder="true"] .directory-portrait {
    grid-row: 2;
  }
}
@media (max-width: 1279px) {
  .people-proof .people-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
  .people-proof .person-row,
  .people-proof .person-row[data-founder="true"],
  .people-proof .people-list[data-filtered="true"] .person-row { grid-column: span 1; }
  .people-proof .person-row[data-founder="true"] .person-caption h2 { font-size: clamp(25px, 2.5vw, 32px); }
  .people-proof .person-caption h2 { font-size: clamp(23px, 2.4vw, 30px); }
}
@media (max-width: 760px) {
  .people-proof { padding-bottom: 66px; }
  .people-proof .directory-opening { display: block; padding-block: 31px 25px; }
  .people-proof .directory-opening h1 { font-size: 48px; }
  .people-proof .directory-opening > p { font-size: 23px; max-width: 390px; margin: 18px 0 0; }
  .people-proof .directory-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px 22px; padding-block: 15px; }
  .people-proof .directory-status { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .people-proof .directory-status p { margin: 0; }
  .people-proof .people-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; margin-top: 23px; }
  .people-proof .person-row,
  .people-proof .people-list[data-filtered="true"] .person-row { grid-column: span 1; }
  .people-proof .people-list .person-row[data-founder="true"] { grid-column: 1 / -1; }
  .people-proof .person-row > a { grid-template-columns: 1fr; gap: 12px; padding-bottom: 13px; }
  .people-proof .people-list .person-row[data-founder="true"] > a { grid-template-columns: clamp(104px,30vw,148px) minmax(0,1fr); gap: 18px; align-items: center; padding-bottom: 20px; }
  .people-proof .people-list .person-row[data-founder="true"] .directory-portrait { grid-column: 1; grid-row: 1; }
  .people-proof .people-list .person-row[data-founder="true"] .person-caption { grid-column: 2; grid-row: 1; }
  .people-proof .person-row .arrow { display: none; }
  .people-proof .person-caption h2,
  .people-proof .person-row[data-founder="true"] .person-caption h2,
  .people-proof .people-list[data-filtered="true"] .person-row .person-caption h2 { font-size: 23px; line-height: 1.16; margin-bottom: 6px; }
  .people-proof .person-caption p { font-size: 10px; }
  .people-proof .directory-founders-heading,
  .people-proof .directory-team-heading { margin-bottom: -13px; }
  .people-proof .directory-team-heading { padding-top: 17px; }
  .people-proof .headshot-caption { inset-inline: 10px; inset-block-end: 10px; font-size: 9px; }
  .people-proof .headshot-register { inset-inline-start: 10px; inset-block-start: 10px; }
  [dir="rtl"] .people-proof .directory-opening h1 { font-size: 46px; }
  [dir="rtl"] .people-proof .person-caption h2,
  [dir="rtl"] .people-proof .person-row[data-founder="true"] .person-caption h2,
  [dir="rtl"] .people-proof .people-list[data-filtered="true"] .person-row .person-caption h2 { font-size: 25px; line-height: 1.4; }
  [dir="rtl"] .people-proof .person-caption p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .people-proof .person-row .arrow,
  .people-proof .directory-portrait img { transition: none; }
  .people-proof .person-row > a:hover img { transform: none; }
}