/* 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. */
/* Self-hosted Inter (variable, latin 100-900) — no third-party font requests */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
:root{--ink:#0b1320;--muted:#5b6677;--blue:#2563eb;--line:#e3e8f0;--paper:#f6f8fb}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:32px 24px 80px}
header.site{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:40px}
header.site a.home{display:block;line-height:0}
header.site a.home img{height:34px;width:auto;display:block}
header.site a.back{text-decoration:none;color:var(--blue);font-size:14px;font-weight:600}
h1{font-size:30px;line-height:1.2;margin:0 0 6px}
.eff{color:var(--muted);font-size:14px;margin:0 0 28px}
h2{font-size:19px;margin:40px 0 10px}
p,li,dd{color:#26303f;font-size:15.5px}
a{color:var(--blue)}
ul{padding-left:20px}

/* The opening claim carries more weight than body copy, so it gets more room. */
.lead{font-size:17.5px;line-height:1.6;color:var(--ink)}

/* 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. */
.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. */
.fine{font-size:13.5px;color:var(--muted);line-height:1.6;margin:14px 0 0}


footer.site{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);color:#8a93a3;font-size:12.5px;line-height:1.6}
footer.site strong{color:var(--ink)}
footer.site a{color:#8a93a3;margin-left:8px}

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