:root{
  --ink:#000000;
  --paper:#ffffff;
  --muted:#3f3f3f;
  --hair:rgba(0,0,0,.2);
  --dur:220ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand,address{
  font-family:"Poppins","Open Sans",system-ui,-apple-system,sans-serif;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
}
p{margin:0 0 1.1em}
ul,ol,menu{margin:0 0 1.2em;padding-left:1.2em}
menu{list-style:none}
img{max-width:100%;height:auto;display:block}
a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  transition:background var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
a:hover,a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
hr{border:0;border-top:1px solid var(--ink);width:64px;margin:1.1rem 0 1.6rem}
.shell{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}

/* 头部与导航 */
.masthead{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 1.15rem;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.brand{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem .1rem;
  font-size:1rem;letter-spacing:.02em;
  border-bottom:1px solid transparent;
}
.brand:hover,.brand:focus-visible{background:none;color:var(--ink);border-bottom-color:var(--ink)}
.nav{position:relative}
.nav summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.5rem 1rem;
  border:1px solid var(--ink);border-radius:999px;
  font-size:.9rem;letter-spacing:.1em;
}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"+";font-family:"Poppins",sans-serif;line-height:1}
.nav[open] summary{background:var(--ink);color:var(--paper)}
.nav[open] summary::after{content:"–"}
.nav-list{
  position:absolute;right:0;top:calc(100% + .5rem);
  min-width:min(80vw,16rem);max-width:88vw;
  padding:.35rem;background:var(--paper);border:1px solid var(--ink);
}
.nav-list li+li{margin-top:.3rem}
.nav-list a{
  display:flex;align-items:center;min-height:44px;
  padding:.4rem 1rem;
  border:1px solid var(--hair);border-radius:999px;
  font-size:.92rem;
}
.nav-list a:hover,.nav-list a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 首屏 */
.hero{
  position:relative;
  display:grid;grid-template-rows:1fr auto;gap:1.5rem;
  min-height:100vh;min-height:100svh;
  max-width:1200px;margin:0 auto;
  padding:1.75rem 1.15rem 0;
  text-align:right;
}
.badge{
  position:absolute;top:1.35rem;right:1.15rem;
  margin:0;max-width:60%;
  padding:.3rem .85rem;
  border:1px solid var(--ink);border-radius:999px;
  font-size:.76rem;letter-spacing:.12em;line-height:1.6;
}
.hero-copy{align-self:start;justify-self:end;max-width:min(100%,44rem);padding-top:3.7rem}
.hero h1{font-size:clamp(2.05rem,7.2vw,4.4rem);letter-spacing:-.035em}
.lede{margin:1.25rem 0 0 auto;max-width:34rem;color:var(--muted);font-size:1rem;line-height:1.65}
.hero-media{align-self:end;width:100%}
.hero-media img{width:100%;max-height:46svh;object-fit:cover;border-top:1px solid var(--ink)}

/* 正文与侧栏 */
.wrap{
  max-width:1200px;margin:0 auto;
  padding:3rem 1.15rem 0;
  display:grid;gap:3rem;
}
.content{min-width:0}
.content section>div{
  padding-bottom:2rem;margin-bottom:2.5rem;
  border-bottom:1px solid var(--ink);
  scroll-margin-top:96px;
}
.content section>div:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.content h2{font-size:clamp(1.35rem,3.2vw,2rem);margin-bottom:.35rem}
.content h3{font-size:1.15rem;margin:2rem 0 .5rem;letter-spacing:-.01em}
.content p{color:#111;max-width:64ch}
.content ul,.content ol{max-width:64ch;padding-left:1.15em}
.content li{margin-bottom:.4rem}
.content strong{font-weight:600}
.content a{border-bottom:1px solid var(--ink)}
.content blockquote{margin:1.5rem 0;padding-left:1.1rem;border-left:2px solid var(--ink);color:var(--muted)}
.content table{width:100%;border-collapse:collapse;font-size:.95rem}
.content td,.content th{border-bottom:1px solid var(--hair);padding:.5rem .4rem;text-align:left}

.side{border-top:1px solid var(--ink);padding-top:1rem;font-size:.92rem}
.side h2{font-size:1rem;letter-spacing:.12em}
.side hr{width:100%;margin:.7rem 0 1rem;border-top-color:var(--hair)}
.side-list{list-style:none;margin:0;padding:0}
.side-list a{
  display:flex;align-items:center;min-height:40px;padding:.2rem 0;
  border-bottom:1px solid var(--hair);font-size:.92rem;
  transition:background var(--dur) ease,color var(--dur) ease,padding-left var(--dur) ease;
}
.side-list a:hover,.side-list a:focus-visible{background:var(--ink);color:var(--paper);padding-left:.5rem}
.top-link{margin:1.1rem 0 0}
.top-link a{display:inline-flex;align-items:center;min-height:40px;border-bottom:1px solid var(--ink)}

/* 页脚 */
footer{
  margin-top:4rem;border-top:1px solid var(--ink);
  padding:1.25rem 1.15rem 2.25rem;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  text-align:center;font-size:.88rem;
}
footer address{font-style:normal;letter-spacing:.02em}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 .65rem;border-bottom:1px solid var(--hair)}
footer .copy{margin:.2rem 0 0;color:var(--muted);font-size:.8rem}

/* 入场动效 */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* 宽屏：左侧固定竖排导航 */
@media (min-width:60rem){
  body{padding-left:17rem}
  .masthead{
    position:fixed;inset:0 auto 0 0;width:17rem;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2.5rem;
    padding:2rem 1.6rem;
    border-bottom:0;border-right:1px solid var(--ink);
    overflow-y:auto;
  }
  .brand{padding:.2rem 0 1.15rem;border-bottom:1px solid var(--ink);font-size:1.05rem}
  .js .nav summary{display:none}
  .nav-list{
    position:static;display:flex;flex-direction:column;gap:.5rem;
    min-width:0;max-width:none;padding:0;border:0;background:none;
  }
  .nav-list a{border:1px solid var(--ink);padding:.5rem 1rem}
  .hero{padding:2.5rem 2.5rem 0}
  .badge{top:2.5rem;right:2.5rem}
  .hero-copy{padding-top:2.6rem}
  .wrap{grid-template-columns:minmax(0,1fr) 15rem;gap:4rem;padding:4rem 2.5rem 0}
  .side{position:sticky;top:2rem}
  footer{flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1.25rem 2rem 2rem}
  footer .copy{margin:0}
}

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