/* Reuse the homepage's fonts, type scale, frame, colors, buttons and wordmark. */
:root {
  --portrait-bg: #e6e4de;
}
.about-page > .wrap {
  border-bottom: 1px solid var(--line);
}
.about-intro {
  max-width: 960px;
  display: grid;
  gap: 24px;
}
.about-lead {
  font: 400 clamp(22px, 2.4vw, 30px)/1.35 var(--serif);
  color: var(--ink-2);
}
.about-accent {
  color: var(--signal-ink);
}
.about-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 56px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.about-columns > div {
  display: grid;
  align-content: start;
  gap: 18px;
}
.about-columns p,
.about-practitioners p {
  line-height: 1.65;
  color: var(--ink-2);
}
.about-practitioners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
}
.about-practitioners p {
  color: var(--night-ink);
}
.about-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 946px;
  margin-top: 40px;
}
.about-portrait {
  aspect-ratio: 10 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: var(--portrait-bg);
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.about-team h3 {
  font: 400 24px/1.2 var(--serif);
  margin-top: 16px;
}
.about-role {
  font-size: 15px;
  color: var(--muted);
  margin-top: 4px;
}
.about-background {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.about-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 56px;
  align-items: end;
}
.about-contact .lede {
  margin-top: 24px;
}
@media (max-width: 760px) {
  .about-columns,
  .about-practitioners,
  .about-contact {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .about-team {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}