/* /about on Design System 4 (Oct 19, 2026). Loads after /assets/ds4/ds.css.
 * Classes start with ab-. Tokens only from ds.css; no new hues. The letter
 * is Kene's own words and is not edited here. "A money app with autopilot"
 * is the page's one dark band. Stillness: nothing moves on its own. */

/* ------------------------------------------------------------ the letter */
.ab-hero { padding-bottom: clamp(72px, 9vw, 120px); }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ab-eyebrow { margin-bottom: 18px; }
.ab-title { max-width: 9ch; }
.ab-letter { padding-top: clamp(6px, 1.4vw, 22px); max-width: 60ch; }
.ab-letter p { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.ab-letter p:first-child { font: 300 clamp(22px, 2vw, 27px)/1.45 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.ab-letter p + p { margin-top: 20px; }
.ab-sign { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hair); }
.ab-sign-name { font: 400 italic 24px/1.2 var(--serif); color: var(--ink); }
.ab-sign-role { font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------ what Lessen is (dark) */
.ab-now-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.ab-now .ls-h2 { max-width: 12ch; }
.ab-now-lead { margin-top: 18px; }
.ab-facts { display: grid; gap: 0; margin-top: 34px; }
.ab-facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid rgba(251, 248, 243, .12); }
.ab-facts li:last-child { border-bottom: 1px solid rgba(251, 248, 243, .12); }
.ab-facts svg { width: 24px; height: 24px; margin-top: 2px; color: var(--sage-d); }
.ab-facts h3 { font: 400 20px/1.3 var(--serif); letter-spacing: -.005em; color: var(--bone); }
.ab-facts p { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--bone-2); max-width: 54ch; }
.ab-stack { position: relative; display: grid; gap: 10px; margin: 0; }
.ab-stack .ls-pool { width: 460px; height: 380px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ab-lock { display: inline-block; width: 15px; height: 15px; margin: 0 7px -2px 0; color: var(--sage-d); }
.ab-stack figcaption { margin-top: 6px; }

/* ------------------------------------------------------------ contact */
.ab-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; align-items: start; padding: clamp(24px, 3vw, 34px); }
.ab-card svg { width: 24px; height: 24px; margin-top: 3px; color: var(--ink); }
.ab-card p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ab-card .ab-statement { font: 300 clamp(21px, 1.9vw, 25px)/1.4 var(--serif); letter-spacing: -.008em; color: var(--ink); }
.ab-card a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
.ab-card .ab-statement a { font-weight: 400; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .ab-hero-grid, .ab-now-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-title { max-width: 11ch; }
  .ab-letter { padding-top: 0; }
}
@media (max-width: 720px) {
  .ab-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-stack .ls-pool { width: 320px; height: 300px; }
}