.about-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.about-site .site-nav [aria-current="page"] {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.about-page { flex: 1; }

.about-hero {
  background: var(--mist);
  border-bottom: 1px solid var(--rule);
}

.about-hero-inner,
.about-sections section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 6vw, 96px);
}

.about-hero-inner {
  align-items: center;
  padding-block: clamp(36px, 7vw, 88px);
}

.about-hero h1 {
  font: 760 clamp(2.55rem, 5.15vw, 5rem)/.98 var(--display);
  letter-spacing: -.052em;
  text-wrap: balance;
}

.about-hero p {
  max-width: 55ch;
  color: var(--muted);
  font-size: clamp(1.06rem, 1.65vw, 1.28rem);
  line-height: 1.55;
}

.about-sections { padding-block: clamp(15px, 3.5vw, 44px); }

.about-sections section {
  align-items: start;
  padding-block: clamp(22px, 3.2vw, 42px);
}

.about-sections section + section { border-top: 1px solid var(--rule); }

.about-sections h2 {
  max-width: 25ch;
  font: 730 clamp(1.4rem, 2.6vw, 2rem)/1.12 var(--display);
  letter-spacing: -.025em;
  text-wrap: pretty;
}

.about-sections p {
  max-width: 70ch;
  color: var(--muted);
  line-height: 1.7;
}

.about-sections p + p { margin-top: .8em; }
.about-sections a { color: var(--blue); text-underline-offset: .18em; }

@media (max-width: 740px) {
  .about-hero-inner,
  .about-sections section {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .about-hero h1 { text-wrap: pretty; }
  .about-sections h2 { max-width: none; }
}