/* self-hosted fonts, embedded — no external requests */
  @font-face{
    font-family:'Source Serif 4'; font-style:normal; font-weight:200 900;
    font-optical-sizing:auto;
    src:url(../fonts/source-serif-4-normal-200-900.4c4d14ec.woff2) format('woff2');
    font-display:swap;
  }
  @font-face{
    font-family:'Source Serif 4'; font-style:italic; font-weight:200 900;
    font-optical-sizing:auto;
    src:url(../fonts/source-serif-4-italic-200-900.7be705ca.woff2) format('woff2');
    font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
    src:url(../fonts/ibm-plex-mono-normal-400.bb87500e.woff2) format('woff2');
    font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
    src:url(../fonts/ibm-plex-mono-normal-500.d32f0e07.woff2) format('woff2');
    font-display:swap;
  }
  :root{
    --bg:#ffffff;
    --paper:#ffffff;
    --ink:#15150d;
    --ink-soft:#6e6e5f;
    --line:#e2dfd0;
    --grid-line:#eae7d8;
    --accent:#9a6a34;
    --serif:'Source Serif 4', Georgia, serif;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#100f0a; --paper:#171610; --ink:#f0eee2; --ink-soft:#a19f8d;
      --line:#312f22; --grid-line:#221f16; --accent:#c99a5c;
    }
  }
  :root[data-theme="dark"]{
    --bg:#100f0a; --paper:#171610; --ink:#f0eee2; --ink-soft:#a19f8d;
    --line:#312f22; --grid-line:#221f16; --accent:#c99a5c;
  }

  *{ box-sizing:border-box; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--serif); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:var(--ink); }
  ::selection{ background:var(--accent); color:#fff; }

  .wrap{ max-width:680px; margin:0 auto; padding:0 clamp(18px,4vw,24px); position:relative; z-index:1; }

  .grid-guides{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    display:grid; grid-template-columns:repeat(12,1fr);
    max-width:1400px; margin:0 auto; padding:0 clamp(18px,4vw,40px);
  }
  .grid-guides span{ border-left:1px solid var(--grid-line); height:100%; }
  .grid-guides span:last-child{ border-right:1px solid var(--grid-line); }

  header{
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; border-bottom:1px solid var(--line);
  }
  .back{ font-family:var(--mono); font-size:12.5px; text-decoration:none; color:var(--ink-soft); }
  .back:hover{ color:var(--accent); }
  .wordmark{ font-family:var(--serif); font-size:15px; text-decoration:none; color:var(--ink-soft); }

  h1{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,42px); margin:48px 0 6px; }
  .updated{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin:0 0 44px; }

  section{ padding:26px 0; border-bottom:1px solid var(--line); }
  section:last-of-type{ border-bottom:none; }
  .n{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-bottom:10px; letter-spacing:0.05em; }
  h2{ font-family:var(--serif); font-weight:500; font-size:19px; margin:0 0 10px; }
  p{ font-size:15px; margin:0 0 10px; max-width:60ch; }
  p:last-child{ margin-bottom:0; }
  p.soft{ color:var(--ink-soft); font-size:13.5px; }

  footer{ padding:30px 0 50px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }

  @media (max-width:640px){ .grid-guides{ display:none; } }

  .wordmark{ display:inline-flex; color:var(--ink); }
  .wordmark svg{ display:block; width:109.2px; height:32px; }
  .back-to{ font-family:var(--mono); font-size:12.5px; }