/* ============================================================
   fix-about.css  —  loaded AFTER app.css, so it wins.
   Scope: About page lead byline (sc3).
   White-theme note: tokens are inverted (--ink is light cream),
   so we lean on existing text tokens (--bone-2 / --bone-dim) and
   the --line hairline token rather than raw var(--ink)/var(--bone).
   ============================================================ */

/* --- sc3: the floating byline, re-anchored as a deliberate caption ---
   The lead grid is align-items:end, so the meta block already sits on
   the baseline of the headline. We make that relationship read as
   intentional: a hairline rule ties it to the column, the name becomes
   a quiet display-serif line, and the role sits beneath as an eyebrow. */

.about__lead .meta {
  align-self: end;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  /* nudge the caption's baseline to settle with the headline foot */
  margin-bottom: 4px;
}

.about__lead .meta .meta__name {
  font-family: var(--f-display);
  font-weight: 360;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--bone);            /* primary ink (token-inverted = dark) */
  margin: 0;
}

.about__lead .meta .meta__role {
  margin: 9px 0 0;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* On narrow screens the lead stacks (app.css sets both to col 1/-1).
   Keep the caption feeling attached to the headline rather than a
   full-width banner: tighten the rule to the text and add breathing
   room below the h1. */
@media (max-width: 880px) {
  .about__lead .meta {
    margin-top: 22px;
    margin-bottom: 0;
    padding-top: 14px;
  }
}