/* ============================================================================
   ABOUT.CSS — Spearn About page
   Layers on home.css (tokens, wordmark, nav, footer, .chapter-meta, .cta).
   Editorial layout echoing the homepage sections; sticky nav (no hero video).
   ========================================================================== */

/* No hero video here, so the fixed/transparent homepage nav becomes a simple
   sticky bar with a warm translucent backdrop that stays legible over content. */
.nav {
  position: sticky;
  background: rgba(244, 239, 229, 0.86);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.about {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  padding: clamp(40px, 7vw, 92px) clamp(22px, 6vw, 48px) clamp(30px, 6vw, 56px);
}

/* ---------- Hero / mission ---------- */
.about-hero { padding-bottom: clamp(40px, 6vw, 66px); border-bottom: 1px solid var(--line); }
.about-kicker {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}
.about-title {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(2.4rem, 6.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.022em;
  color: var(--ink); margin: 0.46em 0 0; text-wrap: balance;
}
.about-title em { font-style: italic; color: var(--accent-soft); }
.about-lead {
  margin-top: clamp(20px, 3vw, 28px); max-width: 48ch;
  font-family: var(--sans); font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.6; color: var(--ink-dim);
}

/* ---------- Numbered sections (reuse .chapter-meta from home.css) ---------- */
.about-sec { margin-top: clamp(44px, 7vw, 74px); }
.about-sec .chapter-meta { margin-bottom: 20px; }
.about-h {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 16px; text-wrap: balance;
}
.about-h em { font-style: italic; color: var(--accent-soft); }
.about-sec p {
  font-family: var(--sans); font-size: 1.02rem; line-height: 1.72;
  color: var(--ink-dim); max-width: 64ch;
}
.about-sec p + p { margin-top: 14px; }
.about-sec strong { color: var(--ink); font-weight: 600; }
.about-sec a {
  color: var(--accent-soft); font-weight: 600;
  border-bottom: 1px solid rgba(124, 94, 16, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.about-sec a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Contact + CTA ---------- */
.about-cta {
  margin-top: clamp(54px, 8vw, 90px); padding-top: clamp(38px, 5vw, 54px);
  border-top: 1px solid var(--line); text-align: center;
}
.about-cta .about-h { max-width: 22ch; margin: 0 auto 14px; }
.about-contact {
  font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--ink-dim);
}
.about-contact a {
  color: var(--accent-soft); font-weight: 600;
  border-bottom: 1px solid rgba(124, 94, 16, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.about-contact a:hover { color: var(--accent); border-color: var(--accent); }
.about-cta .cta { margin-top: 30px; }

@media (max-width: 820px) {
  .nav { padding: 14px 20px; }
}