/* ── About page ──────────────────────────────────────────────
   Reuses the theme tokens from styles.css (--ink, --gold, --line, etc.)
   and the .hero big-image treatment (assets/hero-bg.png), then adds the
   About-specific hero copy and the symbolism prose. */

/* ── Hero ───────────────────────────────────────────────── */
/* Reuse .hero (big image background + header clearance) but size it as a
   page intro and widen the copy for the longer mission statement. */
.about-hero {
  min-height: 480px;
  padding-bottom: 56px;
}

.about-hero-copy {
  max-width: 600px;
}

.about-hero-copy p {
  margin-top: 22px;
  max-width: 480px;
}

/* ── Symbolism prose ────────────────────────────────────── */
.about-page {
  background: #fdfdfd;
  padding: 66px 0 86px;
}

.about-prose {
  max-width: 760px;
}

.about-kicker {
  color: var(--gold-dark);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* Scoped with the element + class so it wins over `.about-prose p` below
   (which is more specific than a lone `.about-lead`). */
.about-prose p.about-lead {
  color: var(--ink);
  font-family: var(--font-head);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.42;
}

.about-prose p {
  color: var(--text);
  font-size: 17px;
  line-height: 1.8;
}

.about-prose p + p {
  margin-top: 22px;
}

.about-prose .about-lead + p {
  margin-top: 28px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 680px) {
  .about-hero {
    min-height: auto;
  }

  .about-page {
    padding: 44px 0 56px;
  }

  .about-prose p {
    font-size: 16px;
  }
}