:root{
  --paper:#FBFBF9;
  --ink:#0E0E0E;
  --ink-soft:#6E6E68;
  --hairline:#E4E4DE;
  --cjk:'Noto Serif SC','Songti SC','SimSun',serif;
  --latin:'Courier Prime','Courier New',monospace;
  --col:44rem;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--latin);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--ink);color:var(--paper)}
.col{max-width:var(--col);margin:0 auto;padding:0 1.5rem}

nav{border-bottom:1px solid var(--hairline)}
nav .col{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 1.5rem}
.wordmark{font-weight:700;font-size:1rem;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
nav a.back{font-size:.85rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:1px}

header{padding:5rem 0 2.5rem}
h1{font-family:var(--cjk);font-weight:900;font-size:2rem;line-height:1.4;letter-spacing:.02em}
.sub{font-size:.9rem;color:var(--ink-soft);margin-top:.4rem}
.updated{font-size:.8rem;color:var(--ink-soft);letter-spacing:.06em;margin-top:1rem}

main{padding-bottom:5rem}
main .col > *{max-width:42rem}
h2{font-family:var(--cjk);font-weight:600;font-size:1.2rem;line-height:1.6;margin:2.8rem 0 .9rem}
h2:first-child{margin-top:0}
p{margin-bottom:1.1rem;color:#232320}
.lede{
  font-size:1.05rem;color:var(--ink);
  padding:1.4rem 0;margin-bottom:1.5rem;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
ul{list-style:none;margin:0 0 1.1rem}
li{padding:.35rem 0 .35rem 1.4rem;position:relative;color:#232320}
li::before{content:'—';position:absolute;left:0;color:var(--ink-soft)}
ol{margin:0 0 1.1rem 0;padding-left:1.4rem}
ol li{padding-left:.4rem}
ol li::before{content:none}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)}
a:hover{border-color:var(--ink)}
strong,b{font-weight:700}
.placeholder{background:#F0EFEA;padding:0 .3em;border-radius:2px;color:var(--ink-soft)}

footer{border-top:1px solid var(--hairline);padding:2.5rem 0 4rem}
footer .col{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot-links{display:flex;gap:1.6rem;font-size:.85rem}
.copyright{font-size:.78rem;color:var(--ink-soft)}

a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:560px){header{padding:3.5rem 0 2rem}h1{font-size:1.6rem}}