:root{
  --paper:#fdfbf7;
  --paper-2:#f5f5f5;
  --ink:#1a1a1a;
  --ink-soft:#5a5a5a;
  --ink-faint:#8a867e;
  --line:#e0e0e0;
  --glass:rgba(255,255,255,.58);
  --rail:232px;
  --stick:126px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Chakra Petch",Georgia,"Songti SC","Noto Serif SC",serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

img{max-width:100%}

a{color:var(--ink)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 顶部：品牌行 + 菜单行 */
.masthead{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(253,251,247,.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ink);
}

.brandline{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:.35rem 1rem .05rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 .3rem;
  font-family:"Russo One","Chakra Petch","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:clamp(1.05rem,3.6vw,1.45rem);
  font-weight:700;
  letter-spacing:.18em;
  text-decoration:none;
  color:var(--ink);
}

.menubar{border-top:1px solid var(--line)}

.menu{
  display:flex;
  align-items:stretch;
  gap:.15rem;
  margin:0;
  padding:0 .6rem;
  list-style:none;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}

.menu::-webkit-scrollbar{height:2px}
.menu::-webkit-scrollbar-thumb{background:var(--line)}

.menu li{flex:0 0 auto}

.menu a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .62rem;
  font-size:16px;
  line-height:1.3;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink);
  border-bottom:3px solid transparent;
}

.menu a:hover,
.menu a:focus-visible{border-bottom-color:var(--ink)}

/* 满屏首屏 */
.hero{
  display:grid;
  grid-template-rows:1fr auto;
  min-height:100vh;
  min-height:100svh;
  border-bottom:2px solid var(--ink);
  background:var(--paper);
}

.hero-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1.1rem 2rem;
  text-align:center;
}

.hero h1{
  margin:0;
  max-width:22ch;
  font-family:"Russo One","Chakra Petch","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:700;
  font-size:clamp(1.85rem,6.6vw,4rem);
  line-height:1.14;
  letter-spacing:.01em;
  overflow-wrap:break-word;
}

.hero-figure{
  position:relative;
  margin:0;
  width:100%;
  height:min(44vh,400px);
  overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--paper-2);
}

.hero-shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  opacity:0;
}

.hero-shot:first-child{opacity:1}

/* 正文骨架：aside 在左，section 在右 */
.spread{
  max-width:1180px;
  margin:0 auto;
  padding:2.6rem 1.15rem 3.4rem;
}

.sheet{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:2rem;
  align-items:start;
}

.rail{
  position:sticky;
  top:var(--stick);
  padding:1.05rem 1rem 1.15rem;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:4px;
  font-size:16px;
}

.rail h2{
  margin:0 0 .55rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--line);
  font-family:"Russo One","Chakra Petch","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.4;
}

.rail h2:not(:first-child){margin-top:1.4rem}

.rail h2 > span{display:inline-block}

.rail .toc{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:toc;
}

.rail .toc li{counter-increment:toc}

.rail .toc a{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:40px;
  padding:.3rem 0;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px dotted var(--line);
  line-height:1.35;
}

.rail .toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--ink-faint);
}

.rail .toc a:hover,
.rail .toc a:focus-visible{color:var(--paper);background:var(--ink)}
.rail .toc a:hover::before,
.rail .toc a:focus-visible::before{color:var(--paper)}

.rail-mark{
  margin:0;
  font-size:15px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  overflow-wrap:anywhere;
}

.prose{
  min-width:0;
  counter-reset:chap;
}

.prose > section{
  counter-increment:chap;
  scroll-margin-top:calc(var(--stick) + 12px);
  margin:0 0 2rem;
  padding:1.6rem 1.35rem 1.35rem;
  background:var(--glass);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:4px;
}

.prose > section:last-child{margin-bottom:0}

.prose :is(h2,h3){
  font-family:"Russo One","Chakra Petch","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:700;
  line-height:1.38;
  letter-spacing:.01em;
  overflow-wrap:break-word;
}

.prose h2{
  margin:0 0 .85rem;
  font-size:clamp(1.22rem,2.6vw,1.55rem);
}

.prose > div h2::before{
  display:block;
  margin-bottom:.45rem;
  content:counter(chap,decimal-leading-zero);
  font-size:12px;
  font-weight:400;
  letter-spacing:.24em;
  color:var(--ink-faint);
}

.prose h2 > span,
.prose h3 > span{display:inline-block}

.prose > div h2 + h2::before{display:none}

.prose h3{
  margin:1.6rem 0 .6rem;
  font-size:1.08rem;
  padding-left:.7rem;
  border-left:4px solid var(--ink);
}

.prose p{margin:0 0 1rem}
.prose p:last-child{margin-bottom:0}

.prose ul,
.prose ol{margin:0 0 1rem;padding-left:1.35rem}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--ink-faint)}

.prose strong{font-weight:700;border-bottom:2px solid var(--line)}

.prose a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.prose a:hover{background:var(--ink);color:var(--paper);text-decoration:none}

.prose blockquote{
  margin:1.1rem 0;
  padding:.5rem 0 .5rem 1rem;
  border-left:3px solid var(--ink);
  color:var(--ink-soft);
  font-size:16px;
}

.prose blockquote p:last-child{margin-bottom:0}

.prose table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:0 0 1.1rem;
  font-size:16px;
}

.prose th,
.prose td{
  border:1px solid var(--line);
  padding:.5rem .65rem;
  text-align:left;
  vertical-align:top;
}

.prose th{background:var(--paper-2);font-weight:700}

.prose img{
  height:auto;
  filter:grayscale(1);
  border:1px solid var(--line);
  border-radius:4px;
}

.prose hr{
  height:0;
  border:0;
  border-top:1px dashed var(--line);
  margin:1.4rem 0;
}

/* 页脚三栏 */
.colophon{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:.6rem 1.2rem;
  align-items:center;
  padding:1.6rem 1.15rem 2.4rem;
  margin-top:2rem;
  background:var(--paper-2);
  border-top:2px solid var(--ink);
  font-size:16px;
}

.colophon p{margin:0;line-height:1.5}

.col-brand{font-weight:700;letter-spacing:.06em}

.col-kw{color:var(--ink-soft);letter-spacing:.06em;overflow-wrap:anywhere}

.col-top a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 .8rem;
  border:1px solid var(--ink);
  border-radius:4px;
  text-decoration:none;
  font-size:16px;
}

.col-top a:hover{background:var(--ink);color:var(--paper)}

.colophon small{
  grid-column:1/-1;
  display:block;
  margin-top:.7rem;
  padding-top:.7rem;
  border-top:1px dashed var(--line);
  font-size:14px;
  letter-spacing:.06em;
  color:var(--ink-soft);
}

/* 动效：轮播 + 依次入场 */
@media (prefers-reduced-motion: no-preference){
  .hero-shot:nth-child(1){animation:turn 18s steps(1,end) infinite}
  .hero-shot:nth-child(2){animation:turn 18s steps(1,end) infinite 6s}
  .hero-shot:nth-child(3){animation:turn 18s steps(1,end) infinite 12s}
  .hero-shot:nth-child(n+4){display:none}
  .hero-shot:only-child{opacity:1;animation:none}
  .rail .toc li{animation:drop .28s steps(2,end) both}
  .rail .toc li:nth-child(1){animation-delay:.02s}
  .rail .toc li:nth-child(2){animation-delay:.05s}
  .rail .toc li:nth-child(3){animation-delay:.08s}
  .rail .toc li:nth-child(4){animation-delay:.11s}
  .rail .toc li:nth-child(5){animation-delay:.14s}
  .rail .toc li:nth-child(6){animation-delay:.17s}
  .rail .toc li:nth-child(7){animation-delay:.2s}
}

@keyframes turn{
  0%{opacity:1}
  33.3%{opacity:0}
  100%{opacity:0}
}

@keyframes drop{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero-shot{animation:none!important}
}

/* 窄屏 */
@media (max-width:860px){
  :root{--stick:118px}

  .menu{justify-content:flex-start}

  .hero-copy{padding:2.2rem 1.1rem 1.6rem}
  .hero-figure{height:min(32vh,260px)}

  .spread{padding:1.8rem 1rem 2.6rem}

  .sheet{grid-template-columns:minmax(0,1fr);gap:1.3rem}

  .rail{position:static;padding:.9rem .9rem 1rem}

  .rail .toc{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.2rem}

  .rail .toc li{flex:0 0 auto;max-width:100%}

  .rail .toc a{
    min-height:40px;
    padding:.25rem .55rem;
    border:1px solid var(--line);
    border-radius:4px;
    font-size:15px;
    white-space:normal;
  }

  .rail h2:not(:first-child){margin-top:1.1rem}

  .prose > div{padding:1.25rem 1rem 1.1rem;margin-bottom:1.4rem;scroll-margin-top:calc(var(--stick) + 8px)}

  .colophon{grid-template-columns:1fr;gap:.55rem;padding:1.4rem 1rem 2rem}

  .colophon small{grid-column:auto}
}

@media (max-width:420px){
  body{font-size:16px}
  .menu a{padding:.35rem .5rem;font-size:15px}
  .hero-figure{height:min(28vh,220px)}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

button[aria-expanded]{min-width:44px;min-height:44px}