/* about.css — ONLY what is specific to this page.
 * Everything shared — typeface, tokens, reset, type scale, .wrap, header.site,
 * footer.site — lives in base.css, which every page loads FIRST. Do not redeclare
 * a token or @font-face here: weblint refuses it, because that is how the site
 * ended up with two greys called --muted and nine copies of one broken font path.
 */
/* about.html — externalised so the site can enforce a CSP. Shares the shell of the
   policy pages (security/privacy/terms) so About reads as part of the same site. */
/* The opening claim carries more weight than body copy, so it gets more room. */

/* Portrait beside the opening line, not floated above it — the face and the
   sentence that says who he is should be read together. Collapses to stacked
   on narrow screens, where side-by-side would leave the text a column too thin. */
@layer page {

.who{display:flex;gap:22px;align-items:flex-start;margin:0 0 18px}
.who p{margin:0}
.portrait{width:132px;height:132px;flex:0 0 132px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);background:#fff}

@media (max-width:520px){
  .who{flex-direction:column;gap:16px}
  .portrait{width:108px;height:108px;flex-basis:auto}
}


/* Closing fine print: quiet type, no box. */


@media (max-width:560px){
  .wrap{padding:24px 18px 64px}
  h1{font-size:26px}
  .lead{font-size:16.5px}
}

}  /* end @layer page */