*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#000000;
  --paper:#ffffff;
  --line:#3a3a3a;
  --faint:#1e1e1e;
  --dim:#a6a6a6;
  --pad:clamp(1.25rem,4vw,5rem);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--paper);
  font-family:"Source Sans 3","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.005em;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
li[hidden]{display:none}

/* ---------- 顶栏：品牌行 + 药丸菜单行 ---------- */
.top{
  position:sticky;
  top:0;
  z-index:30;
  padding:0 var(--pad);
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.brandline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.4rem 1.5rem;
  padding:1rem 0 .85rem;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  text-decoration:none;
  font-weight:900;
  font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.04em;
  line-height:1;
}
.brand .mark{font-weight:400;font-size:.8em;color:var(--dim)}
.brand:hover .word{background:var(--paper);color:var(--ink)}
.blurb{
  margin:0;
  max-width:48ch;
  color:var(--dim);
  font-size:1rem;
  line-height:1.5;
  text-align:right;
}
.menuline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem 1rem;
  padding-bottom:1rem;
}
.pills{flex:1 1 auto;min-width:0}
.pills ul{
  display:flex;
  gap:.45rem;
  margin:0;
  padding:0 0 .2rem;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.pills ul::-webkit-scrollbar{display:none}
.pills li{flex:0 0 auto}
.pills a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.45rem 1.1rem;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  font-size:1rem;
  line-height:1.2;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.pills a:hover,.pills a:focus-visible{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
  transform:translateY(-2px);
}
.finder{flex:0 1 12rem;min-width:0}
.finder input{
  width:100%;
  min-height:44px;
  padding:.45rem 1.05rem;
  background:transparent;
  color:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  font:inherit;
  font-size:1rem;
  line-height:1.2;
}
.finder input::placeholder{color:#8a8a8a}
.finder input:focus{border-color:var(--paper)}

/* ---------- 首屏 ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  min-height:70vh;
  padding:clamp(2rem,6vw,5rem) var(--pad);
}
.hero-art{
  margin:0;
  border:1px solid var(--line);
  align-self:stretch;
  display:flex;
  min-height:0;
  overflow:hidden;
}
.hero-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.08);
}
.hero-copy{text-align:right}
.hero h1{
  margin:0;
  font-size:clamp(3rem,10vw,12rem);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.86;
  overflow-wrap:break-word;
}
.lead{
  margin:1.6rem 0 0 auto;
  max-width:36ch;
  color:var(--dim);
  font-size:1.0625rem;
  line-height:1.6;
}

/* ---------- 主体：正文 + 右侧栏 ---------- */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 16.5rem;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  padding:clamp(2rem,5vw,5rem) var(--pad);
  border-top:1px solid var(--line);
}
.prose{min-width:0;overflow-wrap:break-word}
.prose article{
  padding:clamp(2.5rem,6vw,5rem) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:11rem;
}
.prose article:first-child{border-top:0;padding-top:0}
.prose h2{
  margin:0 0 .35rem;
  font-size:clamp(1.75rem,4.5vw,3rem);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.06;
}
.prose h3{
  margin:2.6rem 0 .4rem;
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25;
}
.prose p{margin:1.25rem 0;max-width:64ch}
.prose ul,.prose ol{margin:1.25rem 0;padding-left:1.3rem;max-width:62ch}
.prose li{margin:.5rem 0}
.prose a{text-underline-offset:.25rem;text-decoration-thickness:1px}
.prose a:hover{background:var(--paper);color:var(--ink);text-decoration:none}
.prose figure{margin:2rem 0;border:1px solid var(--line);padding:0;overflow:hidden}
.prose figure img{width:100%;filter:grayscale(1)}
.prose figcaption{font-size:1rem;color:var(--dim);padding:.75rem 1rem;border-top:1px solid var(--line)}
.prose blockquote{
  margin:2rem 0;
  padding:.9rem 0 .9rem 1.4rem;
  border-left:3px solid var(--paper);
  font-size:1.15rem;
  color:#e8e8e8;
}
.prose blockquote p{max-width:none}
.prose table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:1rem}
.prose th,.prose td{border:1px solid var(--line);padding:.7rem .85rem;text-align:left;vertical-align:top}
.prose th{font-weight:700;background:#0d0d0d}
.prose code,.prose pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em}
.prose pre{overflow-x:auto;padding:1rem;border:1px solid var(--line);margin:1.75rem 0}
hr{
  border:0;
  border-top:2px solid var(--paper);
  width:3.5rem;
  margin:1.1rem 0;
}

/* ---------- 右侧栏 ---------- */
.rail{
  position:sticky;
  top:9.5rem;
  border:1px solid var(--line);
  padding:1.15rem 1.15rem 1.35rem;
}
.rail-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.4;
}
.rail nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.rail a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.3rem .3rem;
  text-decoration:none;
  font-size:1rem;
  line-height:1.35;
  border-bottom:1px solid var(--faint);
  transition:padding-left .16s ease,background .16s ease,color .16s ease;
}
.rail a:hover{padding-left:.7rem;border-color:var(--paper)}
.rail a[aria-current="true"]{background:var(--paper);color:var(--ink);padding-left:.7rem;font-weight:600}
.totop{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  margin-top:.9rem;
  padding:0 .3rem;
  font-size:1rem;
  color:var(--dim);
  text-underline-offset:.28rem;
}
.totop:hover{color:var(--paper)}

/* ---------- 页脚 ---------- */
.base{
  padding:clamp(2.5rem,7vw,6rem) var(--pad) 1.75rem;
  border-top:1px solid var(--paper);
}
.cta h2{
  margin:0;
  font-size:clamp(2.5rem,11vw,9rem);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.88;
  overflow-wrap:break-word;
}
.cta-link{
  display:inline-flex;
  align-items:center;
  min-height:46px;
  margin-top:1.4rem;
  padding:.5rem 1.4rem;
  border:1px solid var(--paper);
  border-radius:999px;
  text-decoration:none;
  font-size:1rem;
  transition:background .18s ease,color .18s ease;
}
.cta-link:hover,.cta-link:focus-visible{background:var(--paper);color:var(--ink)}
.colophon{
  margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  color:var(--dim);
  font-size:1rem;
}
.colophon p{margin:0}

/* ---------- 入场 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pills li,.rail li{animation:rise .5s cubic-bezier(.22,.7,.3,1) both}
.pills li:nth-child(1),.rail li:nth-child(1){animation-delay:.03s}
.pills li:nth-child(2),.rail li:nth-child(2){animation-delay:.07s}
.pills li:nth-child(3),.rail li:nth-child(3){animation-delay:.11s}
.pills li:nth-child(4),.rail li:nth-child(4){animation-delay:.15s}
.pills li:nth-child(5),.rail li:nth-child(5){animation-delay:.19s}
.pills li:nth-child(6),.rail li:nth-child(6){animation-delay:.23s}
.pills li:nth-child(7),.rail li:nth-child(7){animation-delay:.27s}

/* ---------- 断点 ---------- */
@media (max-width:1080px){
  .stage{grid-template-columns:1fr}
  .rail{position:static;order:2}
  .rail nav ul{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0 .9rem}
  .prose article{scroll-margin-top:9.5rem}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:2.25rem;padding-bottom:clamp(2rem,6vw,3rem)}
  .hero-copy{order:-1;text-align:left}
  .lead{margin-left:0;max-width:44ch}
  .hero-art{aspect-ratio:16/10;align-self:auto}
  .blurb{text-align:left;max-width:100%}
  .menuline{align-items:stretch}
  .finder{flex:1 1 100%}
  .rail{border-left:0;border-right:0;padding-left:0;padding-right:0}
  .prose article{scroll-margin-top:12rem}
}
@media (max-width:420px){
  .brand{font-size:1.5rem}
  .hero h1{font-size:clamp(2.6rem,13vw,4rem)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

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