@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#000000;
  --paper:#ffffff;
  --mute:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.16);
  --disp:'Libre Bodoni','Songti SC','Noto Serif SC',Georgia,serif;
  --sans:'Public Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --pad:clamp(1.1rem,4vw,4.5rem);
}

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

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1px);
  background-size:24px 24px;
  background-position:-12px -12px;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

p{margin:0 0 1em}

h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.04;letter-spacing:-.035em;margin:0 0 .45em}

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

/* 顶部 */
.top{
  display:flex;
  align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(.7rem,2vw,1.3rem) var(--pad);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  overflow:hidden;
  font-family:var(--disp);
  font-size:1.1rem;
  line-height:1;
}
.markimg{width:100%;height:100%;object-fit:cover}
.pills{flex:1 1 auto;min-width:0}
.pills p{
  display:flex;
  flex-wrap:nowrap;
  gap:.3rem;
  margin:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.pills p::-webkit-scrollbar{display:none}
.pills a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.35rem .85rem;
  border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none;
  font-size:.93rem;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pills a:hover,.pills a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.35rem 1rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-size:.93rem;
  font-weight:600;
  white-space:nowrap;
}

/* 粘性锚点条 */
.railsticky{position:sticky;top:0;z-index:40;background:var(--ink)}
.rail{padding:0 var(--pad)}
.rail p{
  display:flex;
  gap:.1rem;
  margin:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.rail p::-webkit-scrollbar{display:none}
.rail a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:46px;
  padding:.4rem .75rem;
  color:var(--paper);
  text-decoration:none;
  white-space:nowrap;
  font-size:.88rem;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease,opacity .18s ease;
}
.rail a i{font-style:normal;font-family:var(--disp);font-size:.78rem;opacity:.55}
.rail a b{font-weight:500}
.rail a:hover,.rail a:focus-visible{border-bottom-color:var(--paper)}
.rail a:focus-visible{outline-offset:-4px;outline-color:var(--paper)}

/* 主体 */
main{padding:0 var(--pad)}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
  gap:clamp(1.4rem,5vw,4rem);
  min-height:calc(100vh - 150px);
  min-height:calc(100svh - 150px);
  padding:clamp(2rem,6vw,5rem) 0 clamp(2.4rem,7vw,6rem);
}
.kicker{
  font-size:.8rem;
  letter-spacing:.26em;
  margin-bottom:1.1em;
}
.hero h1{
  font-size:clamp(2.9rem,8.4vw,7.6rem);
  letter-spacing:-.055em;
  line-height:.96;
  margin-bottom:.32em;
}
.subtitle{
  color:var(--mute);
  font-size:clamp(1rem,1.4vw,1.12rem);
  max-width:38ch;
}
.heroActions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.btn{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:.65rem 1.4rem;
  border-radius:10px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-weight:600;
  font-size:.98rem;
  transition:transform .18s ease,opacity .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn:focus-visible{outline-color:var(--ink)}

.heroF{margin:0;min-width:0}
.heroF img{border-radius:10px;aspect-ratio:4/5;object-fit:cover;width:100%}
.plate{
  aspect-ratio:4/5;
  border-radius:10px;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  place-items:center;
  font-family:var(--disp);
  font-size:clamp(2rem,6vw,3.6rem);
  letter-spacing:-.04em;
}
.heroF figcaption{
  margin-top:.7rem;
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--mute);
}

/* 左栏索引 + 正文 */
.split{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3.5rem);
  align-items:start;
  padding:clamp(1.6rem,5vw,3.5rem) 0 0;
}
.side{
  position:sticky;
  top:64px;
  border-top:2px solid var(--ink);
  padding-top:1rem;
}
.side h2{font-size:clamp(1.35rem,2.3vw,1.85rem)}
.side .subtitle{font-size:.9rem}
.idxlist{list-style:none;margin:1rem 0 0;padding:0}
.idxlist a{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  min-height:44px;
  padding:.35rem 0;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.idxlist i{font-style:normal;font-family:var(--disp);font-size:.82rem;color:var(--mute)}
.idxlist a:hover span{text-decoration:underline;text-underline-offset:3px}
.sidenote{font-size:.85rem;color:var(--mute);margin-top:1.1rem}

.prose{min-width:0}
.prose div[id]{
  padding:clamp(2.2rem,6vw,5rem) 0;
  border-top:1px solid var(--ink);
  scroll-margin-top:76px;
}
.prose div[id]:first-child{border-top:0;padding-top:0}
.prose h2{font-size:clamp(1.8rem,4.4vw,3.2rem);margin-bottom:.45em}
.prose h3{font-size:clamp(1.15rem,2.1vw,1.45rem);margin-top:1.6em}
.prose p{max-width:64ch}
.prose ul,.prose ol{max-width:64ch;padding-left:1.25em}
.prose li{margin-bottom:.4em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:10px;margin:1.5rem 0}
.prose blockquote{
  margin:1.6rem 0;
  padding:.15rem 0 .15rem 1.1rem;
  border-left:3px solid var(--ink);
  font-family:var(--disp);
  font-size:1.12rem;
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;
}
[ id ]{scroll-margin-top:76px}

/* 收尾 */
.outro{
  border-top:2px solid var(--ink);
  margin-top:clamp(2rem,5vw,4rem);
  padding:clamp(2.4rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);
}
.outro h2{font-size:clamp(2rem,5.6vw,4rem)}
.outro p{max-width:60ch}

/* 页脚 */
.foot{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(2.4rem,6vw,4.5rem) var(--pad) clamp(1rem,3vw,2rem);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);
}
.fcol h2{
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.14em;
  margin-bottom:.9em;
}
.fcol p{
  font-size:.92rem;
  line-height:1.65;
  color:rgba(255,255,255,.76);
  margin:0 0 .6em;
}
.fmark{font-family:var(--disp)!important;font-size:1.5rem!important;color:#fff!important;letter-spacing:-.03em}
.flinks{display:flex;flex-wrap:wrap;gap:.1rem 1rem}
.flinks a{display:inline-flex;align-items:center;min-height:42px;text-decoration:none;color:rgba(255,255,255,.8);font-size:.92rem}
.flinks a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot :focus-visible{outline-color:var(--paper)}
.ftbar{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.22);margin-top:1rem;padding-top:1rem}
.ftbar p{font-size:.8rem;color:rgba(255,255,255,.62);margin:0}

/* 动效 */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:2rem}
  .heroF{order:2;max-width:420px}
  .split{grid-template-columns:1fr}
  .side{position:static;top:auto}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:560px){
  body{font-size:16px}
  .top{gap:.5rem}
  .cta{font-size:.86rem;padding:.35rem .8rem}
  .pills a{font-size:.88rem;padding:.35rem .7rem}
  .foot{grid-template-columns:1fr}
  .hero h1{letter-spacing:-.045em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn,.pills a,.rail a{transition:none}
  .btn:hover{transform:none}
}

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