/* ===================================================
   earthity — about.css: rules only the about page uses.
   Load after base.css. Split from the former site.css (2026-09-11).
   =================================================== */

/* ===================================================
   ABOUT — page-level layout for /about/.
   Heading + section type from the design system; this
   block is layout, spacing, and the founder bio rows.
   =================================================== */
.about-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-06) var(--spacing-13);
}
.about-page__lead {
  max-width: 60ch;
  margin-bottom: var(--spacing-09);
}
.about-page__section {
  margin-top: var(--spacing-10);
}
.about-page__section-title {
  margin-bottom: var(--spacing-06);
}
.about-page__body {
  max-width: 60ch;
}
.about-page__body + .about-page__body {
  margin-top: var(--spacing-04);
}
.about-founder {
  display: flex;
  gap: var(--spacing-06);
  align-items: flex-start;
  padding: var(--spacing-08) 0;
  border-top: 1px solid var(--gray-20);
}
.about-founder:last-child {
  border-bottom: 1px solid var(--gray-20);
}
.about-founder__portrait {
  flex: 0 0 7rem;
  width: 7rem;
  height: 7rem;
  border-radius: var(--radius-circle);
  object-fit: cover;
  border: 1px solid var(--gray-20);
  background: var(--gray-10);
}
.about-founder__body {
  min-width: 0;
}
/* Non-square source: anchor the circular crop to the left of the image. */
.about-founder__portrait--left {
  object-position: left;
}
.about-founder__name {
  margin-bottom: var(--spacing-03);
}
.about-founder__bio {
  max-width: 60ch;
  margin-bottom: var(--spacing-05);
}
.about-founder__link {
  color: var(--blue-60);
  font-weight: 600;
  text-decoration: none;
  transition: color 70ms ease;
}
.about-founder__link:hover {
  color: var(--blue-60-hover);
  text-decoration: underline;
}
.about-founder__link:focus-visible {
  outline: 2px solid var(--blue-60);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .about-founder__portrait {
    flex-basis: 5.5rem;
    width: 5.5rem;
    height: 5.5rem;
  }
}

/* Desktop: outdent the portrait into the left margin so the text aligns with
   the rest of the page and the circle sits all the way to the left. The bio
   stays capped at 60ch, so the 7rem circle still bottoms out near the bio. */
@media (min-width: 992px) {
  .about-founder {
    position: relative;
  }
  .about-founder__portrait {
    position: absolute;
    top: var(--spacing-08);
    left: calc(-1 * (7rem + var(--spacing-06)));
    margin: 0;
  }
}