:root{
    --bg:#fcfcfa; --ink:#0a0c0d; --ink-2:#5c6167; --ink-3:#9aa0a6;
    --line:#e9e8e3; --line-2:#f3f2ee; --accent:#1d4ed8; --warn:#b8451f;
    --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:"Bodoni Moda",Georgia,serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
  }
  .pre-banner{
    position:sticky; top:0; z-index:10;
    background:var(--warn); color:#fff;
    font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
    text-align:center; padding:7px 14px;
  }
  .wrap{max-width:46rem; margin:0 auto; padding:28px 22px 72px;}
  .topnav{
    font-family:var(--mono); font-size:13px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink-2); margin-bottom:18px;
  }
  .topnav a{color:var(--ink-2); text-decoration:none; display:inline-block; padding:12px 12px 12px 0;}
  .topnav a:hover{color:var(--ink);}

  h1{font-family:var(--serif); font-size:30px; line-height:1.2; font-weight:700; margin:0 0 18px; font-variation-settings:"opsz" 14;}
  h2{font-size:18px; font-weight:700; margin:38px 0 12px; padding-top:16px; border-top:1px solid var(--line);}
  h3{font-size:15px; font-weight:600; margin:24px 0 8px;}
  h4{font-size:14px; font-weight:600; margin:18px 0 6px; color:var(--ink-2);}
  p{margin:12px 0;}
  a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
  strong{font-weight:600;}
  hr{border:0; border-top:1px solid var(--line); margin:26px 0;}
  ul,ol{margin:12px 0; padding-left:22px;}
  li{margin:5px 0;}
  li > ul, li > ol{margin:5px 0;}

  code{
    font-family:var(--mono); font-size:0.86em;
    background:var(--line-2); padding:1px 5px; border-radius:4px;
    word-break:break-word;
  }

  /* the draft notice — must be impossible to miss */
  .draft-notice{
    margin:20px 0 28px; padding:14px 16px;
    border:1.5px solid var(--warn); border-left-width:4px; border-radius:10px;
    background:rgba(184,69,31,0.06); color:#7a3218;
    font-size:14.5px; line-height:1.6;
  }
  .draft-notice strong{color:var(--warn);}
  .draft-notice code{background:rgba(184,69,31,0.10);}

  /* an unfilled [PLACEHOLDER] — impossible to mistake for real content */
  code.todo{
    background:rgba(184,69,31,0.10); color:var(--warn);
    border:1px dashed var(--warn); font-weight:500;
  }

  blockquote{
    margin:16px 0; padding:2px 0 2px 16px;
    border-left:3px solid var(--line); color:var(--ink-2);
  }

  .tablewrap{overflow-x:auto; margin:16px 0; -webkit-overflow-scrolling:touch;}
  table{border-collapse:collapse; width:100%; font-size:13.5px;}
  th,td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top;}
  th{background:var(--line-2); font-weight:600;}

  footer{
    margin-top:56px; padding-top:12px; border-top:1px solid var(--line);
    font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0;
    color:var(--ink-2); line-height:1.4;
  }
  /* Manrope's common ligatures turn "(c)" into "©", which mangles legal
     (a)/(b)/(c) lists. */
  body{font-variant-ligatures:no-common-ligatures;}
  /* A section break is drawn once: the h2 after an <hr> doesn't add a
     second rule of its own. */
  hr + h2{border-top:0; padding-top:0;}
  /* flex-wrap + gap, no " · " text: a separator can't dangle at a line end */
  .footlinks{display:flex; flex-wrap:wrap; gap:2px 18px;}
  footer a{color:var(--ink-2); text-decoration:none; display:inline-block; padding:8px 0;}
  footer a:hover{color:var(--ink);}

  @media (max-width:640px){
    body{font-size:15px;}
    .wrap{padding:22px 16px 64px;}
    h1{font-size:25px;}
  }