/* ============================================================
   about.css
   ────────────────────────────────────────────────────────────
   Small page-specific stylesheet for about.html. Most of the page
   uses tile primitives directly; we only need hero title sizing
   and body-paragraph layout inside the story tile.
   ============================================================ */

/* ── 1. Hero ───────────────────────────────────────────────── */
.about-hero {
  grid-auto-rows: clamp(140px, 13vw, 200px);
  margin-bottom: var(--s-7);
}

.about-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--paper-bone);
}
.about-title__italic {
  font-style: italic;
  color: rgba(246,240,225,0.7);
  display: inline-block;
  margin-left: -0.02em;
}
.about-lede {
  font-family: var(--font-ui);
  font-size: clamp(0.96rem, 0.88rem + 0.5vw, 1.12rem);
  color: rgba(246,240,225,0.78);
  max-width: 42ch;
  line-height: 1.5;
}

/* ── 2. Story body ─────────────────────────────────────────── */
.about-body {
  margin-bottom: var(--s-9);
  grid-auto-rows: clamp(140px, 13vw, 200px);
}
.about-body__p {
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 0.92rem + 0.5vw, 1.20rem);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 58ch;
}
.about-body__p + .about-body__p { margin-top: var(--s-3); }

/* ── 3. Values grid ────────────────────────────────────────── */
.values-grid {
  grid-auto-rows: clamp(140px, 13vw, 200px);
}