/* 《安城的二十四格》· 阅读向版式 · 本轮自行编写 */
:root{
  --paper:#faf8f3; --ink:#221f1b; --soft:#4e4a43; --faint:#6b655c;
  --rule:#d8d1c2; --accent:#2f4858; --accent2:#9a5b2d;
  --card:#ffffff; --tint:#f1ece0; --fs:17.5px;
  --serif:"Songti SC","SimSun","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
html[data-fs="s"]{--fs:16px}
html[data-fs="l"]{--fs:20.5px}
html[data-theme="dark"]{
  --paper:#16181a; --ink:#e7e4de; --soft:#b9b4ab; --faint:#a39d94;
  --rule:#343a3d; --accent:#93bace; --accent2:#dda06a;
  --card:#1d2124; --tint:#222729;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--fs)/1.95 var(--serif);
  overflow-wrap:break-word;
}
.skip{position:absolute;left:-9999px;color:var(--accent)}
.skip:focus{left:.5rem;top:.5rem;z-index:9;background:var(--card);color:var(--ink);padding:.6rem .8rem;border:2px solid var(--accent)}
img{max-width:100%;height:auto;display:block}

/* ── 顶栏 ─────────────────────────────── */
.bar{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar-in{max-width:62rem;margin:0 auto;padding:.4rem 1.1rem;display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center}
.brand{font-family:var(--sans);font-size:.94em;line-height:1.3;margin-right:auto;padding:.4rem 0}
.brand b{display:block;font-weight:600;color:var(--accent);letter-spacing:.02em}
.brand span{display:block;font-size:.84em;color:var(--faint)}
.nav{display:flex;gap:.1rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .55rem;font-family:var(--sans);font-size:.9em;color:var(--soft);text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent2);font-weight:600}
.rc{display:flex;gap:.25rem;align-items:center}
.rc button{
  min-height:40px;min-width:40px;padding:0 .5rem;cursor:pointer;
  font:600 .86em var(--sans);color:var(--soft);
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
}
.rc button:hover{color:var(--accent);border-color:var(--accent)}
.rc button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent2);z-index:9}

/* ── 正文容器 ─────────────────────────── */
main{max-width:40rem;margin:0 auto;padding:1.6rem 1.15rem 3rem}
h1{font-size:1.62em;line-height:1.45;margin:.2em 0 .5em;font-weight:600;letter-spacing:.01em}
h2{font-size:1.14em;line-height:1.6;margin:2.4em 0 .7em;font-weight:600;color:var(--accent)}
h2::before{content:"";display:block;width:2.1rem;border-top:2px solid var(--accent2);margin-bottom:.5em}
p{margin:0 0 1.05em}
.kicker{font:600 .82em/1.6 var(--sans);letter-spacing:.14em;color:var(--accent2);text-transform:none;margin:0}
.meta{font:400 .85em/1.7 var(--sans);color:var(--faint);margin:-.2em 0 1.6em}
.lead{color:var(--soft)}
.prose p{text-indent:2em}
.prose p.quote{text-indent:0;margin:1.6em 0;padding:.8em 1.1em;background:var(--tint);border-left:3px solid var(--accent2);font-weight:600;letter-spacing:.08em}
.sep{margin:1.9em 0;text-align:center;color:var(--faint);font-size:1.1em;letter-spacing:.9em;line-height:1}
.note{text-indent:0;font:400 .9em/1.85 var(--sans);color:var(--soft);background:var(--tint);border:1px solid var(--rule);border-radius:4px;padding:.85em 1em;margin:1.6em 0}
ol.steps{margin:1.2em 0;padding-left:1.4em}
ol.steps li{margin:0 0 .75em;padding-left:.2em}
figure{margin:1.8em 0}
figure img{width:100%;border:1px solid var(--rule);border-radius:4px;background:var(--card)}
figcaption{font:400 .86em/1.75 var(--sans);color:var(--faint);margin-top:.6em}

/* ── 目录 ─────────────────────────────── */
.toc{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:.8rem}
.toc a{
  display:grid;grid-template-columns:4.3rem 1fr;gap:0 .9rem;align-items:baseline;
  text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--rule);border-radius:5px;padding:.95rem 1.05rem;
}
.toc a:hover,.toc a:focus-visible{border-color:var(--accent);background:var(--tint)}
.toc .jq{font-size:1.2em;font-weight:600;color:var(--accent);grid-row:span 2}
.toc .tt{font-size:1.02em;font-weight:600}
.toc .ld{font:400 .88em/1.7 var(--sans);color:var(--faint);grid-column:2}

/* ── 人物卡 ───────────────────────────── */
.who{margin:1.5em 0 0;display:grid;gap:.9rem}
.who article{background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:1rem 1.1rem}
.who h3{margin:0;font-size:1.08em;font-weight:600;color:var(--accent)}
.who .m{font:400 .86em/1.7 var(--sans);color:var(--accent2);margin:.15em 0 .5em}
.who p{margin:0;font-size:.97em}

/* ── 章末导航 ─────────────────────────── */
.cnav{margin:3rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.cnav a{
  display:flex;flex-direction:column;justify-content:center;min-height:62px;
  padding:.7rem .9rem;background:var(--card);border:1px solid var(--rule);border-radius:5px;
  text-decoration:none;color:var(--ink);font-size:.98em
}
.cnav a:hover,.cnav a:focus-visible{border-color:var(--accent);background:var(--tint)}
.cnav em{font:600 .8em/1.6 var(--sans);font-style:normal;letter-spacing:.1em;color:var(--faint);display:block}
.cnav .wide{grid-column:1 / -1;align-items:center}

/* ── 页脚 ─────────────────────────────── */
.foot{border-top:1px solid var(--rule);background:var(--tint);margin-top:2rem}
.foot-in{max-width:62rem;margin:0 auto;padding:1.4rem 1.15rem 2rem;font:400 .88em/1.85 var(--sans);color:var(--faint)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 .3rem;margin-bottom:.5rem}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .45rem;color:var(--accent);text-decoration:none}
.foot nav a:hover,.foot nav a:focus-visible{text-decoration:underline}
.foot p{margin:0 0 .4em}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

@media (min-width:46rem){
  main{padding-top:2.4rem}
  h1{font-size:1.86em}
  .cnav{grid-template-columns:1fr 1fr 1fr}
  .cnav .wide{grid-column:auto}
  .toc a{grid-template-columns:5.2rem 1fr}
}