@charset "UTF-8";
:root{
  --paper:#F5F1E8;
  --ink:#1A1A1A;
  --ink-2:#3A3632;
  --ink-3:#6B655C;
  --ochre:#8B4513;
  --ochre-l:#B08D57;
  --green:#4A6741;
  --line:#D8D0BE;
  --card:#EFE9DA;
  --serif:"Songti SC","SimSun","STSong","Noto Serif CJK SC","Source Han Serif SC",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:2.05;
  letter-spacing:.02em;
  padding:0 24px 120px;
}
.wrap{max-width:760px;margin:0 auto}
a{color:var(--ochre);text-decoration:none}
::selection{background:var(--ochre);color:var(--paper)}

/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(245,241,232,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  margin:0 -24px 0;padding:14px 24px;
  display:flex;align-items:baseline;gap:16px;
}
.topbar .brand{font-size:15px;letter-spacing:.28em;color:var(--ink)}
.topbar .brand b{color:var(--ochre);font-weight:400}
.topbar .sp{flex:1}
.topbar nav{font-size:13.5px;color:var(--ink-3);letter-spacing:.1em}
.topbar nav a{color:var(--ink-3)}
.topbar nav a:hover{color:var(--ochre)}

/* 页头 */
.head{padding:76px 0 44px;border-bottom:1px solid var(--line)}
.head .no{
  font-size:12.5px;letter-spacing:.42em;color:var(--ochre);
  display:block;margin-bottom:22px;
}
.head h1{
  font-size:40px;line-height:1.4;font-weight:400;letter-spacing:.06em;
}
.head .sub{margin-top:20px;color:var(--ink-3);font-size:15.5px;letter-spacing:.08em}

/* 正文 */
.body{padding-top:52px}
.body h2{
  font-size:23px;font-weight:400;letter-spacing:.08em;
  margin:72px 0 26px;padding-left:16px;
  border-left:3px solid var(--ochre);line-height:1.6;
}
.body h2:first-child{margin-top:0}
.body h3{
  font-size:18.5px;font-weight:400;letter-spacing:.06em;
  margin:44px 0 18px;color:var(--ochre);
}
.body p{margin:0 0 22px;text-align:justify}
.body p strong{font-weight:400;color:var(--ink);border-bottom:1px solid var(--ochre-l);padding-bottom:1px}
.body em{font-style:normal;color:var(--ochre)}

/* 引文 */
blockquote{
  margin:30px 0;padding:4px 0 4px 22px;
  border-left:1px solid var(--line);
  color:var(--ink-2);font-size:17px;
}
blockquote p{margin:0 0 10px}
blockquote p:last-child{margin:0}
.cite{display:block;margin-top:12px;font-size:13px;color:var(--ink-3);letter-spacing:.1em}

/* 白话转译 */
.gloss{
  background:var(--card);border-radius:2px;
  padding:20px 24px;margin:26px 0;
  font-size:15px;line-height:1.95;color:var(--ink-2);
}
.gloss .lb{font-size:11.5px;letter-spacing:.3em;color:var(--ochre);display:block;margin-bottom:8px}

/* 人物卡 */
.case{
  border-top:1px solid var(--line);
  padding:30px 0 4px;margin:38px 0;
}
.case .who{
  display:flex;align-items:baseline;gap:14px;margin-bottom:16px;
}
.case .who b{font-size:21px;font-weight:400;letter-spacing:.1em}
.case .who span{font-size:12.5px;letter-spacing:.2em;color:var(--ink-3)}
.case p:last-child{margin-bottom:0}

/* 要点条 */
.keys{margin:28px 0;padding:0;list-style:none}
.keys li{
  padding:14px 0 14px 26px;border-bottom:1px dashed var(--line);
  position:relative;font-size:16px;
}
.keys li:first-child{border-top:1px dashed var(--line)}
.keys li::before{
  content:"";position:absolute;left:6px;top:26px;
  width:6px;height:6px;background:var(--ochre);border-radius:50%;
}
.keys li b{font-weight:400;color:var(--ochre)}

/* 翻页 */
.pager{
  margin-top:88px;padding-top:32px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;font-size:14.5px;
}
.pager a{letter-spacing:.08em}
.pager .n{color:var(--ink-3);font-size:12.5px;letter-spacing:.2em;display:block;margin-bottom:6px}
.pager .r{text-align:right}

/* 尾 */
.foot{
  margin-top:56px;padding-top:26px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);letter-spacing:.14em;line-height:2;
}

/* 淡入 */
.rise{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

@media (max-width:600px){
  body{font-size:16px;line-height:1.95}
  .head{padding:48px 0 34px}
  .head h1{font-size:29px}
  .body h2{font-size:20px;margin:56px 0 20px}
  .topbar{padding:12px 18px;margin:0 -24px}
  .topbar nav{font-size:12px;letter-spacing:.06em}
}