:root{
    --paper:#FBFAF7;
    --panel:#F2F1EA;
    --ink:#1B1F1C;
    --muted:#5C635D;
    --rule:#E1E0D6;
    --moss:#4A6150;
    --moss-soft:#EAEFE9;
    --measure:34rem;
    --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#141715;
      --panel:#1C201D;
      --ink:#E8E9E3;
      --muted:#9BA39B;
      --rule:#2A2F2B;
      --moss:#9DBBA4;
      --moss-soft:#1E2620;
    }
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--moss)}
  a:focus-visible,summary:focus-visible{
    outline:2px solid var(--moss);
    outline-offset:3px;
    border-radius:3px;
  }

  /* ---------- masthead ---------- */
  header.masthead{
    border-bottom:1px solid var(--rule);
    padding:clamp(2.5rem,7vw,4.5rem) 1.5rem clamp(2rem,5vw,3rem);
  }
  .masthead-inner{max-width:64rem;margin:0 auto}
  .brand{
    font-family:var(--sans);
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 1.1rem;
  }
  h1{
    font-family:var(--serif);
    font-weight:600;
    font-size:clamp(2.1rem,6vw,3.4rem);
    line-height:1.08;
    letter-spacing:-.015em;
    margin:0 0 1.1rem;
  }
  .standfirst{
    max-width:var(--measure);
    color:var(--muted);
    margin:0 0 1.6rem;
    font-size:1.02rem;
  }
  .updated{
    display:inline-block;
    font-size:.8rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--rule);
    border-radius:999px;
    padding:.32rem .8rem;
  }

  /* ---------- signature: the local-first key ---------- */
  .key{
    max-width:64rem;
    margin:clamp(2rem,5vw,3rem) auto 0;
    padding:0 1.5rem;
  }
  .key-grid{
    display:grid;
    gap:1px;
    background:var(--rule);
    border:1px solid var(--rule);
    border-radius:14px;
    overflow:hidden;
  }
  @media (min-width:44rem){.key-grid{grid-template-columns:1fr 1fr}}
  .key-cell{background:var(--panel);padding:1.4rem 1.5rem}
  .key-cell.stays{background:var(--moss-soft)}
  .key-label{
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 .55rem;
  }
  .key-cell.stays .key-label{color:var(--moss)}
  .key-cell p{margin:0;font-size:.95rem}
  .key-cell ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.95rem}
  .key-cell li{margin:.18rem 0}
  .key-note{
    max-width:var(--measure);
    margin:.85rem 0 0;
    font-size:.85rem;
    color:var(--muted);
  }

  /* ---------- layout ---------- */
  .shell{
    max-width:64rem;
    margin:0 auto;
    padding:clamp(2rem,5vw,3.5rem) 1.5rem 5rem;
    display:grid;
    gap:clamp(2rem,4vw,3.5rem);
  }
  @media (min-width:60rem){
    .shell{grid-template-columns:15rem minmax(0,1fr);align-items:start}
  }

  /* ---------- contents ---------- */
  nav.toc{font-size:.9rem}
  @media (min-width:60rem){
    nav.toc{position:sticky;top:2rem;max-height:calc(100vh - 4rem);overflow-y:auto}
  }
  .toc-head{
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 .8rem;
    padding-bottom:.6rem;
    border-bottom:1px solid var(--rule);
  }
  nav.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
  nav.toc li{counter-increment:toc}
  nav.toc a{
    display:flex;
    gap:.6rem;
    text-decoration:none;
    color:var(--muted);
    padding:.3rem 0;
    line-height:1.35;
  }
  nav.toc a::before{
    content:counter(toc,decimal-leading-zero);
    font-variant-numeric:tabular-nums;
    font-size:.75rem;
    color:var(--rule);
    padding-top:.12rem;
  }
  nav.toc a:hover{color:var(--ink)}
  nav.toc a[aria-current="true"]{color:var(--ink);font-weight:600}
  nav.toc a[aria-current="true"]::before{color:var(--moss)}
  details.toc-mobile{
    border:1px solid var(--rule);
    border-radius:12px;
    padding:.2rem .95rem;
    background:var(--panel);
  }
  details.toc-mobile summary{
    cursor:pointer;
    padding:.75rem 0;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  details.toc-mobile[open] summary{border-bottom:1px solid var(--rule);margin-bottom:.5rem}
  details.toc-mobile nav.toc{padding-bottom:.7rem}
  details.toc-mobile .toc-head{display:none}
  @media (min-width:60rem){details.toc-mobile{display:none}}
  @media (max-width:59.99rem){aside.toc-desktop{display:none}}

  /* ---------- prose ---------- */
  main{max-width:var(--measure)}
  section{scroll-margin-top:2rem;padding-top:2.6rem}
  section:first-of-type{padding-top:0}
  h2{
    font-family:var(--serif);
    font-size:1.42rem;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.01em;
    margin:0 0 .9rem;
    padding-bottom:.7rem;
    border-bottom:1px solid var(--rule);
  }
  h2 .num{
    font-family:var(--sans);
    font-size:.72rem;
    letter-spacing:.16em;
    color:var(--moss);
    display:block;
    margin-bottom:.5rem;
    font-weight:600;
  }
  p{margin:0 0 1rem}
  ul{margin:0 0 1rem;padding-left:1.15rem}
  li{margin:.35rem 0}
  strong{font-weight:600}
  .lede{
    border-left:2px solid var(--moss);
    padding-left:1rem;
    margin:0 0 1rem;
  }
  .lede p{margin:0}
  .contact{
    background:var(--panel);
    border:1px solid var(--rule);
    border-radius:12px;
    padding:1.1rem 1.3rem;
    margin:0 0 1rem;
  }
  .contact p{margin:0}
  .contact .key-label{margin-bottom:.3rem}

  footer{
    border-top:1px solid var(--rule);
    padding:2rem 1.5rem 3.5rem;
    color:var(--muted);
    font-size:.85rem;
  }
  footer .footer-inner{
    max-width:64rem;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem 1.5rem;
    justify-content:space-between;
  }
  footer p{margin:0}

  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- language switcher ---------- */
.langbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 1.1rem;
}
.langbar a{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  padding:.5rem 0;
}
.langbar a:hover{color:var(--ink)}
.langbar a[aria-current="page"]{color:var(--ink);font-weight:600}
.langbar a::after{
  content:"·";
  color:var(--rule);
  padding:0 .5rem;
}
.langbar a:last-child::after{content:none}