/* About: a white cover opening, then two columns — the reading column and
   the identity column. Every size comes from a shell type role. */
@layer components {

  .about-cover { padding-block: clamp(32px, 4vw, 64px) clamp(48px, 6vw, 96px); }

  .about-opening { padding-bottom: clamp(30px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
  .about-opening h1 {
    max-width: 14ch; font-size: var(--t-display); font-weight: 550;
    line-height: var(--lh-display, 1.02); letter-spacing: var(--ls-display, -0.035em);
  }
  .about-lede {
    max-width: 30ch; margin-top: clamp(18px, 2vw, 28px);
    font-size: var(--t-title); font-weight: 450; line-height: 1.24;
    letter-spacing: var(--ls-heading, -0.025em); color: var(--accent);
  }

  .about-composition {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(36px, 5vw, 88px); align-items: start;
    padding-top: clamp(32px, 4vw, 60px);
  }

  /* ── the reading column ─────────────────────────────────────────── */
  .about-reading { max-width: 62ch; }
  .about-reading p { font-size: var(--t-lede); line-height: var(--lh-prose); color: var(--ink-2); }
  .about-reading p + p { margin-top: var(--s4); }
  .about-reading h2 {
    margin-top: var(--s9); font-size: var(--t-caption); font-weight: 550;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--graphite);
  }
  .about-reading h2 + p { margin-top: var(--s4); }
  .about-actions {
    display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8);
    margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--rule-soft);
  }
  /* The arrow link stays inline — see arrowLink in html.mjs. Making it a
     flex container turns its text and its arrow-word span into flex items
     and strips the space between them ("See thework"), so the touch target
     comes from padding instead. */
  .about-actions .arrow { padding-block: 11px; }

  /* ── the identity column ────────────────────────────────────────── */
  .about-identity { display: grid; gap: var(--s5); }
  .about-identity .about-mark { display: block; }
  [data-page="about"] .about-identity .glyph { width: 56px; height: 56px; }
  .about-photo {
    display: block; width: min(100%, 240px); aspect-ratio: 1; height: auto; object-fit: cover;
    border-radius: var(--r-lg); border: 1px solid var(--rule-soft); background: var(--paper-2);
  }
  .about-name { display: grid; gap: 4px; }
  .about-name strong { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.02em; }
  .about-name span { font-size: var(--t-caption); color: var(--graphite); }

  .about-facts { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
  .about-facts > div {
    display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--s4);
    align-items: baseline; padding-block: var(--s3);
    border-bottom: 1px solid var(--rule-soft);
  }
  .about-facts dt { font-size: var(--t-caption); color: var(--graphite); }
  .about-facts dd { font-size: var(--t-small); color: var(--ink); overflow-wrap: anywhere; }
  .about-facts dd a { color: var(--accent); }

  .about-elsewhere .arrow { padding-block: 11px; }

  /* ── phones: one column, identity after the reading ─────────────── */
  @media (max-width: 860px) {
    .about-composition { grid-template-columns: minmax(0, 1fr); gap: var(--s9); }
    .about-identity { max-width: 420px; }
    .about-lede { max-width: 34ch; }
  }
}