:root{
  --paper:#f6f0e3;
  --paper-deep:#eee4d1;
  --paper-glass:rgba(246,240,227,.92);
  --ink:#272116;
  --ink-soft:#574d3b;
  --muted:#8a7c63;
  --gold:#896515;
  --gold-bright:#bd8616;
  --vermilion:#9d3d2f;
  --line:rgba(137,101,21,.22);
  --wash:rgba(137,101,21,.065);
  --shadow:0 24px 70px rgba(66,48,17,.09);
  --reading-size:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 2%,rgba(189,134,22,.11),transparent 28rem),
    radial-gradient(circle at 92% 18%,rgba(157,61,47,.055),transparent 25rem),
    linear-gradient(180deg,#faf6ec 0,var(--paper) 38rem,var(--paper) 100%);
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,Georgia,serif;
  line-height:1.9;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
::selection{color:#20190d;background:rgba(189,134,22,.28)}
a{color:inherit}

.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  transform:translateY(-160%);
  padding:8px 12px;
  border-radius:4px;
  color:#fff;
  background:var(--gold);
}
.skip-link:focus{transform:none}
.read-progress{
  position:fixed;
  inset:0 0 auto;
  z-index:80;
  height:2px;
  background:rgba(137,101,21,.09);
}
.read-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright),var(--vermilion));
  box-shadow:0 0 10px rgba(189,134,22,.34);
}

.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background:var(--paper-glass);
  backdrop-filter:blur(13px) saturate(1.1);
}
.site-nav .inner{
  width:min(1120px,calc(100% - 34px));
  min-height:58px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand,.back-link{
  color:var(--gold);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.12em;
}
.brand{font-weight:800;letter-spacing:.22em}
.brand small{font-weight:400;opacity:.7;letter-spacing:.1em}
.back-link{white-space:nowrap}

.hero{
  position:relative;
  width:min(930px,calc(100% - 40px));
  margin:0 auto;
  padding:clamp(68px,10vw,116px) 0 64px;
  text-align:center;
}
.hero::before{
  content:"文";
  position:absolute;
  top:33px;
  left:50%;
  z-index:-1;
  transform:translateX(-50%);
  color:transparent;
  -webkit-text-stroke:1px rgba(137,101,21,.07);
  font-size:clamp(150px,26vw,290px);
  font-weight:900;
  line-height:1;
}
.eyebrow{
  color:var(--gold);
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
}
.hero h1{
  max-width:860px;
  margin:24px auto 0;
  font-size:clamp(31px,5.8vw,58px);
  font-weight:850;
  letter-spacing:.035em;
  line-height:1.42;
  text-wrap:balance;
}
.author{
  margin-top:25px;
  color:var(--ink-soft);
  font-size:15px;
  font-weight:700;
  letter-spacing:.2em;
}
.meta{
  margin-top:9px;
  color:var(--muted);
  font-family:ui-sans-serif,system-ui,"PingFang SC",sans-serif;
  font-size:12px;
  letter-spacing:.08em;
}
.origin-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--gold);
  background:rgba(255,255,255,.28);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.08em;
  transition:transform .2s,border-color .2s,background .2s;
}
.origin-link::before{content:"↗";font-family:system-ui,sans-serif}
.origin-link:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(255,255,255,.58)}
.hero-rule{
  width:1px;
  height:52px;
  margin:36px auto 0;
  background:linear-gradient(180deg,var(--gold),transparent);
}
.lead-box{
  position:relative;
  max-width:700px;
  margin:2px auto 0;
  padding:25px 30px 25px 35px;
  border:1px solid var(--line);
  border-radius:2px 18px 2px 18px;
  color:var(--ink-soft);
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(239,230,210,.42));
  box-shadow:var(--shadow);
  text-align:left;
  font-size:15px;
  line-height:2;
}
.lead-box::before{
  content:"导读";
  position:absolute;
  top:-11px;
  left:24px;
  padding:1px 10px;
  color:var(--paper);
  background:var(--gold);
  font-size:10px;
  letter-spacing:.26em;
}
.content-warning{
  max-width:700px;
  margin:18px auto 0;
  padding:12px 17px;
  border-left:2px solid var(--vermilion);
  color:var(--muted);
  background:rgba(157,61,47,.045);
  text-align:left;
  font-size:12.5px;
  line-height:1.85;
}

.reading-tools{
  position:fixed;
  left:18px;
  right:auto;
  bottom:24px;
  z-index:45;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-glass);
  box-shadow:0 10px 30px rgba(51,38,16,.11);
  backdrop-filter:blur(12px);
}
.reading-tools button{
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--gold);
  background:transparent;
  cursor:pointer;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:13px;
}
.reading-tools button:hover,.reading-tools button:focus-visible{outline:none;background:var(--wash)}

.reading-shell{
  width:min(1110px,calc(100% - 40px));
  margin:0 auto 110px;
  display:grid;
  grid-template-columns:210px minmax(0,740px);
  justify-content:center;
  gap:64px;
  align-items:start;
}
.toc{
  position:sticky;
  top:88px;
  max-height:calc(100vh - 116px);
  overflow:auto;
  padding:18px 0 18px 17px;
  border-left:1px solid var(--line);
}
.toc-title{
  margin-bottom:13px;
  color:var(--gold);
  font-size:10px;
  letter-spacing:.3em;
}
.toc a{
  display:block;
  margin:0 0 10px;
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  line-height:1.55;
}
.toc a.h3{padding-left:11px;font-size:11.5px;opacity:.88}
.toc a:hover,.toc a.active{color:var(--gold)}

.article-card{
  min-width:0;
  padding:clamp(34px,6vw,66px) clamp(25px,6vw,70px) 62px;
  border:1px solid rgba(137,101,21,.17);
  background:rgba(255,252,246,.54);
  box-shadow:var(--shadow);
}
.prose{font-size:var(--reading-size);line-height:2.08;letter-spacing:.012em}
.prose p{margin:0 0 1.42em;color:var(--ink-soft)}
.prose p.lead{
  color:var(--ink);
  font-size:1.08em;
  line-height:2.12;
}
.prose p.lead::first-letter{
  float:left;
  margin:.12em .11em 0 0;
  color:var(--vermilion);
  font-size:3.25em;
  font-weight:800;
  line-height:.78;
}
.prose .dialogue-response{
  margin:.15em 0 1.25em 1.15em;
  padding:.15em 0 .15em 1em;
  border-left:1px solid var(--line);
  color:var(--muted);
  font-size:.93em;
  line-height:1.9;
}
.prose .datum{
  width:fit-content;
  min-width:min(18em,100%);
  margin:.28em 0;
  padding:.15em .8em;
  border-left:2px solid var(--gold-bright);
  color:var(--ink);
  background:linear-gradient(90deg,var(--wash),transparent);
  font-size:.95em;
}
.prose h2{
  position:relative;
  margin:3.4em 0 1.42em;
  padding:0 0 .72em 40px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:1.42em;
  line-height:1.55;
  letter-spacing:.025em;
  scroll-margin-top:86px;
}
.prose h2::before{
  content:attr(data-index);
  position:absolute;
  left:0;
  top:.05em;
  color:var(--gold-bright);
  font-family:Georgia,serif;
  font-size:.64em;
  font-weight:400;
  letter-spacing:.02em;
}
.prose h3{
  margin:2.5em 0 1em;
  color:var(--ink);
  font-size:1.13em;
  line-height:1.65;
  letter-spacing:.02em;
  scroll-margin-top:86px;
}
.prose h4{
  margin:1.9em 0 .75em;
  color:var(--gold);
  font-size:.95em;
  letter-spacing:.08em;
}
.prose em{color:var(--gold);font-style:normal}
.prose strong{color:var(--ink);font-weight:800}
.prose .pull{
  position:relative;
  margin:2.5em -20px;
  padding:1.35em 22px 1.35em 27px;
  border-left:3px solid var(--gold-bright);
  color:var(--ink);
  background:linear-gradient(90deg,var(--wash),transparent);
  font-size:1.13em;
  font-weight:700;
  line-height:1.9;
}
.prose .pull::before{
  content:"“";
  position:absolute;
  top:-.2em;
  right:12px;
  color:rgba(137,101,21,.12);
  font-family:Georgia,serif;
  font-size:4.2em;
  line-height:1;
}
.key-list{
  margin:0 0 1.7em;
  padding:0;
  list-style:none;
  counter-reset:item;
}
.key-list li{
  position:relative;
  margin:.7em 0;
  padding:.55em .8em .55em 2.75em;
  border-left:1px solid var(--line);
  color:var(--ink-soft);
  background:rgba(137,101,21,.035);
}
.key-list li::before{
  counter-increment:item;
  content:counter(item,decimal-leading-zero);
  position:absolute;
  left:.75em;
  top:.72em;
  color:var(--gold-bright);
  font:700 .7em/1 ui-sans-serif,system-ui,sans-serif;
}
.verse{
  margin:1.9em 0 2.35em;
  padding:1.25em 1.65em;
  border-left:1px solid var(--gold-bright);
  color:var(--ink);
  background:linear-gradient(90deg,rgba(189,134,22,.055),transparent 78%);
  font-size:1.04em;
  line-height:2.22;
  letter-spacing:.06em;
}
.verse .verse-date{display:block;margin-top:.55em;color:var(--muted);font-size:.72em;letter-spacing:.04em}
.prose .end-mark{
  margin:4em 0 1em;
  color:var(--gold);
  text-align:center;
  font-size:13px;
  letter-spacing:.7em;
}

.source-note{
  margin-top:70px;
  padding:25px 27px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(137,101,21,.035);
}
.source-note .label{color:var(--gold);font-size:10px;letter-spacing:.3em}
.source-note p{margin:9px 0 13px;color:var(--muted);font-size:13px;line-height:1.8}
.source-note a{color:var(--gold);font-size:13px;text-underline-offset:4px}
.article-footer{
  width:min(740px,calc(100% - 40px));
  margin:-74px auto 44px;
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.article-footer a{color:var(--gold);font-size:13px;letter-spacing:.06em;text-underline-offset:5px}
.site-footer{padding:30px 20px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:12px;letter-spacing:.06em}
.site-footer a{color:var(--gold);text-decoration:none}

[data-theme="night"]{
  --paper:#171611;
  --paper-deep:#1f1c15;
  --paper-glass:rgba(23,22,17,.92);
  --ink:#eee3ce;
  --ink-soft:#cec1a9;
  --muted:#9d9079;
  --gold:#d0a443;
  --gold-bright:#e0b85a;
  --vermilion:#cf7465;
  --line:rgba(208,164,67,.2);
  --wash:rgba(208,164,67,.075);
  --shadow:0 24px 70px rgba(0,0,0,.22);
}
[data-theme="night"] body{background:radial-gradient(circle at 20% 0,rgba(208,164,67,.08),transparent 30rem),var(--paper)}
[data-theme="night"] .article-card{background:rgba(28,26,20,.7)}
[data-theme="night"] .origin-link{background:rgba(255,255,255,.025)}

@media(max-width:980px){
  .reading-shell{display:block;width:min(760px,calc(100% - 34px))}
  .toc{position:relative;top:auto;max-height:none;margin:0 0 20px;padding:16px 20px;border:1px solid var(--line);background:rgba(255,255,255,.2)}
  .toc-title{margin-bottom:10px}
  .toc-list{columns:2;column-gap:24px}
  .toc a{break-inside:avoid}
}
@media(max-width:640px){
  :root{--reading-size:17px}
  .site-nav .inner{width:calc(100% - 24px)}
  .brand small{display:none}
  .hero{width:calc(100% - 30px);padding-top:56px}
  .hero h1{font-size:clamp(29px,9.5vw,42px)}
  .lead-box{padding:24px 20px;font-size:14px}
  .reading-shell{width:100%;margin-bottom:94px}
  .toc{margin:0 15px 16px}
  .toc-list{columns:1}
  .article-card{border-left:0;border-right:0;padding:38px 20px 52px;box-shadow:none}
  .prose{line-height:2.02}
  .prose .pull{margin:2.3em -5px;padding-left:18px}
  .reading-tools{left:9px;right:auto;bottom:15px}
}
@media print{
  body{background:#fff}
  body::before,.site-nav,.read-progress,.reading-tools,.toc,.article-footer,.site-footer{display:none!important}
  .hero{padding:30px 0}.hero::before{display:none}
  .reading-shell{display:block;width:100%;margin:0}
  .article-card{border:0;box-shadow:none;background:#fff;padding:0}
  .prose{font-size:12pt;line-height:1.8}
  .prose h2,.prose h3{break-after:avoid}
  .prose p{orphans:3;widows:3}
}