/**
 * Section: Statement
 *
 * Ported from _mockups/about.html `.ab-mission`, including the gold rule from
 * `.ab-mission::before`. One page, no drift to resolve.
 *
 * CONTRAST, MEASURED. The band is --surface-2 (#efeadd), the warm quiet fill.
 *
 *   --ink       #14231f  on --surface-2  13.55:1   the heading at --text-3xl
 *   --ink-soft  #45524d  on --surface-2   6.81:1   the statement at --text-lg
 *
 * Both clear WCAG AA comfortably. --gold on the rule is 2.13:1 on this ground
 * and is decorative: it carries no information, replaces no text, and the
 * statement reads identically with it removed.
 *
 * Tokens only, with one exception named rather than hidden: the rule's 54px by
 * 2px are component dimensions with no token behind them, the same practice
 * tokens.css itself follows for `.eyebrow::before` (26px by 1.5px) and
 * components.css for `.hcard`'s 60px avatar. They are not a step on the spacing
 * scale and inventing a token for one decorative rule would be worse than
 * leaving them legible.
 */

.statement-inner {
  text-align: center;
}

/* The gold rule above the heading. A pseudo-element, so it is never in the
   accessibility tree and never selectable. */
.statement-inner::before {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto var(--s-4);
}

.statement-inner h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--s-4);
}

.statement-body {
  color: var(--ink-soft);
  font-size: var(--text-lg);
  /* A statement is meant to be read in a breath, so the measure is held even
     though `.container-narrow` is already 760px. */
  max-width: 62ch;
  margin-inline: auto;
}