/* /about — the founders' story. Shares the nav, footer, founder cards (.founder-*) and
   closing CTA with the rest of the site via styles.css; only the layout lives here.

   The founder cards run the homepage's full 1072px column (--max less the 24px side
   padding). The story is prose, so it stays a centered reading column with its heading on
   top: full-width paragraphs are tiring to read, and a heading off to one side left a
   block of empty space beside it. */

.about-story {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 24px 24px;
}
.story {
  max-width: 720px;
  margin: 0 auto;
}
.story h1 {
  margin: 0 0 24px;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.1;
  color: var(--ink);
}
.story-body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--gray-700);
}
.story-body p { margin: 0 0 1.15em; }
.story-body p:last-child { margin-bottom: 0; }

.about-founders {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 24px 24px;
}
/* One founder per row: photo left, bio right, across the full column. */
.founder-grid-full {
  max-width: none;
  grid-template-columns: 1fr;
  gap: 24px;
}
.founder-grid-full .founder { flex-direction: row; align-items: stretch; }
.founder-grid-full .founder-photo { width: 280px; flex: none; height: auto; }
.founder-grid-full .founder-body { padding: 30px 36px; max-width: 760px; align-self: center; }
.founder-grid-full .founder-body h3 { font-size: 22px; }

.closing-cta .cta-note a { color: var(--brand); }

@media (max-width: 720px) {
  .about-story { padding: 44px 20px 12px; }
  .story-body { font-size: 16.5px; }
  .about-founders { padding: 48px 20px 16px; }
  .founder-grid-full .founder { flex-direction: column; }
  .founder-grid-full .founder-photo { width: 100%; }
  .founder-grid-full .founder-body { padding: 20px 22px 24px; }
}