/* ─────────────────────────────────────────────────────────────
   about.css — who is building this

   The page answers the question a pre-launch company cannot
   answer with product copy: does this exist, and will it exist
   in eighteen months. It is a reading page, so it takes the
   reading measure — but it is still a Persuade surface, so the
   opening statement gets display type rather than the legal
   pages' flat h1.
   ───────────────────────────────────────────────────────────── */

.about {
  padding-block: clamp(56px, 9vh, 104px) var(--section-y);
}

.about__wrap { max-width: min(74ch, var(--page-max)); }

.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.about__title em {
  font-style: italic;
  color: var(--signal);
}

.about__lede {
  margin: var(--space-5) 0 0;
  max-width: 36em;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-soft);
}

.about__section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.about__section h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.about__section p {
  margin: 0 0 var(--space-4);
  max-width: 40em;
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--ink-soft);
}

.about__section p:last-child { margin-bottom: 0; }

.about__section ul:not(.people) {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
  max-width: 40em;
  list-style: disc;
}

.about__section ul:not(.people) li {
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.about__section ul:not(.people) li:last-child { margin-bottom: 0; }

.about__section a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.about__section a:hover { color: var(--signal-deep); }

/* ── People ───────────────────────────────────────────────────
   A list, not a card grid — still just a name, a role, and what
   they did before. The photo runs larger than a typical avatar:
   this is the first thing on the page, and a founder's face at a
   size a reader can actually look at does more for credibility
   than a thumbnail would.                                       */
.people {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.person__id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.person__photo {
  width: clamp(140px, 16vw, 220px);
  height: clamp(140px, 16vw, 220px);
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.person__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.person__role {
  margin: 6px 0 0;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.person__body {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.64;
  color: var(--ink-soft);
}

/* ── Close ────────────────────────────────────────────────── */
.about__close {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
}

.about__close a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--t-sm);
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.about__close a:hover { color: var(--signal-deep); }