/* tokens.css — the design system
   Every colour and typeface choice on both pages. Change a colour here and
   it changes everywhere. Each one is declared three times: once for light,
   once for the system dark setting, once for an explicit dark choice. */

:root{
  --paper:#E9E7E1; --surface:#F7F6F2; --surface-2:#EFEDE6;
  --ink:#15181B; --ink-2:#4E565E; --ink-3:#7C858C;
  --line:#D4D1C8; --line-2:#C0BCB1;
  --accent:#1C4E6B; --accent-soft:#D9E4EA; --btn-fg:#F7F6F2;
  --warn:#B4432C; --warn-soft:#F2DED8;
  /* the band at the top of the homepage: paper, washing into ink */
  --grad-a:#E9E2D4; --grad-b:#7E97A6; --band-ink:#14181B;
  --good:#2F6B4F;
  --shadow:0 1px 2px rgba(21,24,27,.06);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121517; --surface:#1A1E21; --surface-2:#22272B;
    --ink:#E9E7E1; --ink-2:#A0A8AF; --ink-3:#7A838A;
    --line:#2C3237; --line-2:#3A4248;
    --accent:#7FC3E3; --accent-soft:#1D2F3A; --btn-fg:#121517;
    --warn:#E38A72; --warn-soft:#37211C;
  --grad-a:#2A2F33; --grad-b:#15343F; --band-ink:#EDEAE3;
    --grad-a:#2A2F33; --grad-b:#15343F; --band-ink:#EDEAE3;
    --good:#6FBF96;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#121517; --surface:#1A1E21; --surface-2:#22272B;
  --ink:#E9E7E1; --ink-2:#A0A8AF; --ink-3:#7A838A;
  --line:#2C3237; --line-2:#3A4248;
  --accent:#7FC3E3; --accent-soft:#1D2F3A; --btn-fg:#121517;
  --warn:#E38A72; --warn-soft:#37211C;
  --good:#6FBF96;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:0 64px}
h1,h2,h3{text-wrap:balance}