@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');

:root{
  --paper:#fdfbf7;
  --paper-2:#f5f5f5;
  --ink:#1a1a1a;
  --ink-soft:#3a3a3a;
  --mute:#6b6b6b;
  --rule:#e0e0e0;
  --rule-ink:#c9c9c9;
  --sans:"Manrope","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --display:"Syne","Manrope","PingFang SC","Microsoft YaHei",sans-serif;
  --serif:Georgia,"Songti SC","Noto Serif SC","SimSun",serif;
  --r:10px;
}

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

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

body{
  margin:0;
  background-color:var(--paper);
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.005em;
}

a{color:var(--ink);text-decoration:none;transition:background-color .12s linear,color .12s linear,border-color .12s linear}
img{max-width:100%;height:auto;display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ————— 顶部品牌行 ————— */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.75rem);
  border-bottom:1px solid var(--rule);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  padding-right:.4rem;
}

.brand .mark{
  width:30px;
  height:30px;
  border:1px solid var(--ink);
  border-radius:8px;
  background:var(--paper-2);
}

.brand-text{
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.01em;
}

.call{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 1.1rem;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:.86rem;
  font-weight:600;
}

.call:hover{background:var(--ink);color:var(--paper)}

/* ————— 粘性锚点条 ————— */
.anchorbar{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(253,251,247,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-ink);
  padding:.5rem clamp(.75rem,3vw,2.75rem);
}

.pills{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  padding:.15rem 0;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}

.pills::-webkit-scrollbar{display:none}

.pills a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 .95rem;
  border:1px solid var(--rule-ink);
  border-radius:999px;
  background:var(--paper-2);
  font-size:.84rem;
  font-weight:600;
  white-space:nowrap;
}

.pills a:hover,
.pills a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ————— 主区 ————— */
main{display:block}
section[id]{scroll-margin-top:110px}

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:70vh;
  padding:clamp(2.5rem,7vw,5rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,3.5rem);
  border-bottom:1px solid var(--rule);
}

.hero h1{
  margin:0 0 .9rem;
  max-width:20ch;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,6.2vw,3.5rem);
  line-height:1.14;
  letter-spacing:-.025em;
}

.lede{
  margin:0 auto clamp(1.8rem,4vw,2.6rem);
  max-width:48ch;
  color:var(--ink-soft);
  font-size:.98rem;
  line-height:1.85;
}

.hero-figure{
  position:relative;
  margin:0;
  width:100%;
  max-width:900px;
  min-height:200px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--rule-ink);
  border-radius:var(--r);
  background:var(--paper-2);
}

.hero-figure .hero-img{width:100%;height:auto}

.badge{
  position:absolute;
  left:.9rem;
  bottom:.9rem;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 .85rem;
  border:1px solid var(--ink);
  border-radius:999px;
  background:rgba(253,251,247,.82);
  backdrop-filter:blur(6px);
  font-family:var(--display);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.04em;
}

/* ————— 阅读区 + 侧栏 ————— */
.reading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 238px;
  gap:clamp(1.5rem,4vw,3.25rem);
  max-width:1120px;
  margin:0 auto;
  padding:clamp(2rem,5vw,3.75rem) clamp(1rem,4vw,2.5rem) clamp(2.5rem,6vw,4.5rem);
}

.prose{
  min-width:0;
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.9;
  overflow-wrap:break-word;
}

.prose section[id]{
  padding:2rem 0 2.4rem;
  border-bottom:1px dashed var(--rule);
}

.prose section[id]:last-child{border-bottom:0}

.prose h2,
.prose h3{
  font-family:var(--display);
  line-height:1.3;
  letter-spacing:-.015em;
  margin:2.2rem 0 .9rem;
}

.prose section[id] > h2:first-child{margin-top:.2rem}
.prose h2{font-size:1.45rem}
.prose h3{font-size:1.15rem}

h2 > span,
h3 > span{display:inline}

.rail-title > span::before,
.prose h2 > span::before,
.prose h3 > span::before{
  content:"";
  display:inline-block;
  width:.55em;
  height:.55em;
  margin-right:.55em;
  background:var(--ink);
  vertical-align:baseline;
}

.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.35rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.4rem}
.prose blockquote{
  margin:1.6rem 0;
  padding:.35rem 0 .35rem 1.1rem;
  border-left:3px solid var(--ink);
  color:var(--ink-soft);
  font-style:normal;
}
.prose a{border-bottom:1px solid var(--rule-ink)}
.prose a:hover{background:var(--ink);color:var(--paper)}
.prose figure{margin:1.6rem 0}
.prose figcaption{margin-top:.5rem;font-family:var(--sans);font-size:.8rem;color:var(--mute)}
.prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.9rem;margin:1.4rem 0}
.prose th,.prose td{border:1px solid var(--rule-ink);padding:.55rem .7rem;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2)}
.prose code{font-size:.88em;background:var(--paper-2);border:1px solid var(--rule);padding:.05em .3em;border-radius:4px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

/* 侧栏 */
.rail{
  align-self:start;
  position:sticky;
  top:96px;
  border-left:1px solid var(--rule);
  padding-left:1.15rem;
}

.rail-title{
  margin:0 0 .8rem;
  font-family:var(--display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--mute);
}

.rail-title > span::before{width:.5em;height:.5em;vertical-align:.05em}

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

.rail-list li{
  opacity:0;
  animation:rise .18s linear forwards;
}
.rail-list li:nth-child(1){animation-delay:.02s}
.rail-list li:nth-child(2){animation-delay:.06s}
.rail-list li:nth-child(3){animation-delay:.1s}
.rail-list li:nth-child(4){animation-delay:.14s}
.rail-list li:nth-child(5){animation-delay:.18s}
.rail-list li:nth-child(6){animation-delay:.22s}
.rail-list li:nth-child(7){animation-delay:.26s}

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

.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.3rem .1rem;
  border-bottom:1px dotted var(--rule-ink);
  font-size:.9rem;
}

.rail-list a:hover,
.rail-list a[aria-current]{background:var(--ink);color:var(--paper);padding-left:.55rem;padding-right:.55rem}

.rail-foot{margin:1rem 0 0}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 .9rem;
  border:1px solid var(--rule-ink);
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
}

.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ————— 页脚 ————— */
footer{
  border-top:2px solid var(--ink);
  padding:clamp(1.75rem,4vw,2.75rem) clamp(1rem,4vw,2.5rem) 1.25rem;
  background:var(--paper-2);
}

.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  max-width:1120px;
  margin:0 auto clamp(1.5rem,3vw,2.25rem);
  padding-bottom:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1px solid var(--rule-ink);
}

.cta-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.35rem,4.5vw,2.1rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
}

.cta-title > span::before{
  content:"";
  display:inline-block;
  width:.5em;
  height:.5em;
  margin-right:.5em;
  background:var(--ink);
}

.backtop{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 1.2rem;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:.86rem;
  font-weight:600;
}

.backtop:hover{background:var(--ink);color:var(--paper)}

.cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2rem);
  max-width:1120px;
  margin:0 auto;
}

.cols dl{margin:0}
.cols dt{
  font-family:var(--display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--mute);
}
.cols dd{
  margin:.45rem 0 0;
  font-size:.9rem;
  line-height:1.6;
}

.linkwall{display:flex;flex-wrap:wrap;gap:0 .9rem}

.linkwall a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  border-bottom:1px dotted var(--rule-ink);
  font-size:.88rem;
}

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

.foot-line{
  max-width:1120px;
  margin:clamp(1.25rem,3vw,2rem) auto 0;
  padding-top:1rem;
  border-top:1px solid var(--rule-ink);
  text-align:center;
  color:var(--mute);
  font-size:.78rem;
  letter-spacing:.06em;
}

.foot-line p{margin:0}

/* ————— 断点 ————— */
@media (max-width:900px){
  .reading{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:static;
    order:2;
    border-left:0;
    border-top:1px solid var(--rule);
    padding:1.1rem 0 0;
  }
  .rail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 .8rem}
  .rail-list a{min-height:44px}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:auto;padding-top:2rem}
  .hero h1{max-width:100%}
  .cols{grid-template-columns:minmax(0,1fr)}
  .cta{flex-direction:column;align-items:flex-start}
  .rail-list{grid-template-columns:minmax(0,1fr)}
  .prose{font-size:1rem}
  .badge{left:.6rem;bottom:.6rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a{transition:none}
  .rail-list li{animation:none;opacity:1}
}

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