/* ═══════════════════════════════════════════════════════════════════════════
   ConFacts — About.

   The same publication as the home page and the guide: warm paper, ink,
   Hanken Grotesk and IBM Plex Mono, left-aligned bands. Everything that
   already exists on the home page is reused from styles.css unchanged (the
   hero type, eyebrows, bands, the ink independence band and its button);
   this sheet adds only the three things this page has and no other does:
   the founder's story set as one readable column, the five checks as a
   ruled ledger of full-width rows, and the company's own record.

   No semantic colour. The page states no finding, so green, amber and red
   do not appear, and neither does cobalt (nothing here is happening live).
   ═══════════════════════════════════════════════════════════════════════════ */

.a-body { background: #fbf9f4; }
.a-body .topbar { background: #fbf9f4; border-bottom-color: #e5e2da; }
.topbar .brand { text-decoration: none; color: inherit; }

/* One left edge for the whole page. The bands (.cf-band) hold a 1160px
   column inside 24px of padding; the plain sections (.cf-sec2) are 1160px
   INCLUDING their padding, which put their text 24px further in. Here every
   section's text starts where the bands' does. */
.a-body .cf-sec2 { max-width: 1208px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.a-hero { max-width: 1208px; margin: 0 auto; padding: 64px 24px 56px; }
.a-hero .cf-eyebrow { margin-bottom: 16px; }
.a-hero .cf-display2 { max-width: 22ch; }
.a-hero .cf-lede2 { max-width: 58ch; margin: 0; }

/* The hero is followed straight by a band: the band's own top margin would
   double the hero's bottom padding. */
.a-hero + .cf-band { margin-top: 0; }

/* ── The story: a heading column beside one readable column ─────────────── */
.a-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 64px; }
.a-story-head { display: flex; flex-direction: column; gap: 12px; }
.a-story-body { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.a-story-body p { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-2); }
.a-story-body .a-turn { font-size: 21px; line-height: 30px; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink); }

/* ── The goal: the page's thesis, stated once at section size ──────────── */
.a-goal { display: flex; flex-direction: column; gap: 14px; }
.a-goal-h { margin: 0; font-size: 30px; line-height: 38px; font-weight: 800;
  letter-spacing: -.018em; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.a-goal p { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-2); max-width: 58ch; }

/* ── What we check: one ruled row per check, name beside what it covers ── */
.a-checks { display: flex; flex-direction: column; gap: 12px; }
.a-ledger { margin: 12px 0 0; padding: 0; list-style: none; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.a-ledger li { display: grid; grid-template-columns: 26px minmax(0, 200px) minmax(0, 1fr);
  gap: 14px; align-items: baseline; padding: 18px 22px; border-bottom: 1px solid var(--rule-2); }
.a-ledger li:last-child { border-bottom: 0; }
.a-ledger-n { font: 500 11px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.a-ledger h3 { margin: 0; font-size: 15.5px; line-height: 22px; font-weight: 700; color: var(--ink); }
.a-ledger p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); }

/* ── The promise: the home page's ink band, with its label ──────────────── */
.a-promise { padding: 64px 24px 0; }
.a-promise .cf-eyebrow { color: #b9bcbd; margin-bottom: 10px; }
.a-promise p + p { margin-top: 12px; }

/* ── Who we are: the company's own record, the way a report sets one ───── */
.a-record { margin: 16px 0 0; max-width: 640px; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.a-record div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--rule-2); }
.a-record div:last-child { border-bottom: 0; }
.a-record dt { font: 500 10.5px/20px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); }
.a-record dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.a-record a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.a-record a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.a-record-note { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.a-foot { margin: 0 max(24px, calc((100% - 1160px) / 2)) 64px; padding: 32px 0 0; }
.a-foot-links { margin-top: 12px !important; font-size: 13px; }
.a-foot-links a { color: #717677; }

/* ── One column under 900px (DESIGN.md: everything collapses there) ────── */
@media (max-width: 900px) {
  .a-story { grid-template-columns: 1fr; gap: 20px; }
  .a-ledger li { grid-template-columns: 26px minmax(0, 1fr); row-gap: 4px; }
  .a-ledger li p { grid-column: 2; }
}
@media (max-width: 560px) {
  .a-hero { padding: 40px 24px; }
  .a-hero .cf-display2 { font-size: 31px; }
  .a-goal-h { font-size: 24px; line-height: 31px; }
  .a-story-body .a-turn { font-size: 19px; line-height: 27px; }
  .a-promise { padding-top: 48px; }
  /* Full width with tighter sides: at 26px a side the label needs 285px of a
     279px column and broke onto two lines inside a 48px button. */
  .a-promise .cf-run { align-self: stretch; justify-content: center; padding: 0 16px; }
  .a-record div { grid-template-columns: 1fr; gap: 2px; }
  .a-foot { margin-bottom: 48px; padding-top: 24px; }
}