:root{
    --bg:#eff0ed; --panel:#f7f8f5; --line:#dcded6;
    --ink:#1c1d1a; --ink2:#4a4c46; --ink3:#7c7f76;
    --brass:#9a7b3f; --blue:#2f5d8c;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#14150f; --panel:#1c1e17; --line:#32352a;
      --ink:#eceee6; --ink2:#b6b9ae; --ink3:#868a7d;
      --brass:#d4ac68; --blue:#8ab4e0;
    }
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:760px; margin:0 auto; padding:0 22px 90px;}
  header{border-bottom:1px solid var(--line); margin-bottom:38px; padding:52px 0 26px;}
  .kicker{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--brass); font-weight:700; margin:0 0 12px;
  }
  h1{font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0 0 14px; letter-spacing:-.02em;}
  .meta{color:var(--ink3); font-size:14px; margin:0;}
  .meta code{font-size:13px; background:var(--panel); border:1px solid var(--line);
    padding:2px 6px; border-radius:5px;}
  h2{font-size:19px; margin:38px 0 10px; letter-spacing:-.01em;}
  p{margin:0 0 14px; color:var(--ink2);}
  ul{margin:0 0 14px; padding-left:22px; color:var(--ink2);}
  li{margin:6px 0;}
  strong{color:var(--ink);}
  a{color:var(--blue);}
  .callout{
    background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brass);
    border-radius:10px; padding:18px 20px; margin:0 0 8px;
  }
  .callout p:last-child{margin-bottom:0;}
  footer{margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
    color:var(--ink3); font-size:13px;}