/*
 * components/css/surfaces/M8c-04-about.css  (S80 DARK net-new build)
 * /about — the masked-operators manifesto on the dark single-accent foundation.
 * A peer of the homepage + framework, NOT the prior cream profile page. Consumes
 * the foundation cascade + composed primitives (SiteNav, SectionBeat, CtaButton,
 * SiteFooter) and adds ONLY surface scaffolding: the manifesto reading rhythm
 * (beat headline scale + body measure) and the footer column trim.
 *
 * Engine: the foundation's CSS scroll-driven reveal (.reveal + .reveal--soft,
 * animation-timeline: view(), foundation-motion.css) — ZERO JavaScript, and the
 * hidden→shown state is gated behind @supports + prefers-reduced-motion there, so
 * content can never get stuck hidden. No substrate canvas (compute-honesty:
 * /about reads nothing about the visitor, so it must not perform a reactive
 * "we're reading you" field), no scrolly, no JS of any kind.
 *
 * Register: ONE accent (lime) on the warm dark ground; here lime appears only on
 * the brand .AI mark. Zero :root re-declaration (foundation-tokens.css is the sole
 * token site). Zero retired-palette hex. var(--*) only.
 */

/* ── Box-sizing reset (about scope) ─────────────────────────────────────────── */
.m8c-04-about,
.m8c-04-about *,
.m8c-04-about *::before,
.m8c-04-about *::after { box-sizing: border-box; }

/* ── Root surface (dark) ────────────────────────────────────────────────────── */
.m8c-04-about {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
}

/* Lime accent (the brand .AI mark in nav + footer) = lime TEXT, never a fill. */
.m8c-04-about .accent { color: var(--lime); }

/* ── Manifesto beat headline ──────────────────────────────────────────────────
 * Statement scale tuned for sentence-length headlines (one confrontation per
 * view) — sits between --fs-subhead and --fs-section, same clamp methodology as
 * the type tokens, surface-scoped. The opening claim leads a touch larger. */
.m8c-04-about .beat__title {
  font-size: clamp(1.875rem, 1.25rem + 2.8vw, 3.25rem); /* ~30px@360 → 52px@1440 */
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.m8c-04-about .about-open .beat__title {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);      /* ~36px@360 → 64px@1440 */
  max-width: 20ch;
}

/* ── Manifesto body — warm secondary text at body measure ───────────────────── */
.m8c-04-about .about__body {
  margin-top: var(--space-md);
  max-width: var(--measure);
}
.m8c-04-about .about__body p {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-2);
}
.m8c-04-about .about__body p:last-child { margin-bottom: 0; }
/* *with* / *for* emphasis lifts to the primary text ramp. */
.m8c-04-about .about__body em { color: var(--text); font-style: italic; }

/* FIX 5 — the opening claim lands as a statement: more air under the big B1
 * headline before the body begins (was cramped at --space-md). */
.m8c-04-about .about-open .about__body { margin-top: var(--space-lg); }

/* FIX 4 — Beat 3's three provenance classes land as a line-broken
 * recursive-escalation list (the credibility spine), NOT bullets (bullets read
 * SaaS) and not run-on prose. Lifted to the primary text ramp so the spine reads
 * against the muted surrounding prose. */
.m8c-04-about .about__provenance { margin: 0 0 var(--space-md); }
.m8c-04-about .about__provenance span {
  display: block;
  color: var(--text);
  margin-bottom: var(--space-2xs);
}
.m8c-04-about .about__provenance span:last-child { margin-bottom: 0; }

/* ── The single CTA — the only funnel link; navigation only ─────────────────── */
/* FIX 3 — lift the mono label off tag-size (12px --fs-mono-label) to a real call
 * (~15px); the primitive keeps the lime fill + 24/40 padding. */
.m8c-04-about .about__cta {
  margin-top: var(--space-lg);
  font-size: 0.9375rem;
}

/* ── Climax beat (B5) — the close of the quiet-reveal arc ─────────────────────
 * FIX 2 (restraint-true) — COHESION, not drama. The close holds together so the
 * headline + lead + CTA arrive as one unit. NO centering, NO hero/min-height
 * frame (that tips into the spectacle the restraint engine rejects); B5 stays
 * left-aligned with its siblings. Tighten the lead→CTA gap and trim the empty
 * space below so the CTA stops floating orphaned and resolves into the footer. */
.m8c-04-about .about-climax { padding-bottom: var(--space-xl); }
.m8c-04-about .about-climax .about__cta { margin-top: var(--space-md); }

/* ── Footer column trim — /about drops the Connect group (VEIL: no LinkedIn /
 * GitHub / mailto that would make the masked lead traceable), so 3 columns. ── */
.m8c-04-about .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 760px) {
  .m8c-04-about .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .m8c-04-about .site-footer__grid { grid-template-columns: 1fr; }
}