:root{
  --ink:#000000;
  --paper:#ffffff;
  --line:rgba(0,0,0,.14);
  --muted:#575757;
  --r:18px;
  --wrap:1200px;
  --pad:clamp(1.15rem,4vw,2rem);
}

*,*::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:Inter,-apple-system,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.66;
  font-weight:400;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- 顶部两行：品牌行 + 菜单行 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink);
}

.brandline{
  max-width:var(--wrap);
  margin:0 auto;
  padding:.5rem var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  text-decoration:none;
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:-.015em;
}

.mark{display:inline-flex;align-items:center;gap:3px}
.mark b{display:block;width:7px;height:17px;background:var(--ink)}
.mark b:nth-child(2){opacity:.55}
.mark b:nth-child(3){opacity:.25}
.brand .logo{width:26px;height:26px}

.contact{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.3rem 1rem;
  border:1px solid var(--ink);
  border-radius:999px;
  text-decoration:none;
  font-size:.88rem;
  font-weight:500;
  transition:background .22s ease,color .22s ease;
}
.contact:hover{background:var(--ink);color:var(--paper)}

.nav{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad) .55rem;
}

.nav summary{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:40px;
  padding:.25rem .85rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.85rem;
  cursor:pointer;
  list-style:none;
  transition:border-color .22s ease;
}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{
  content:"";
  width:6px;height:6px;
  border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translateY(-2px);
}
.nav[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.nav summary:hover{border-color:var(--ink)}

.navmenu{
  list-style:none;
  margin:.55rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 .3rem;
}
.navmenu a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.25rem .6rem;
  font-size:.9rem;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .22s ease,opacity .22s ease;
}
.navmenu a:hover,.navmenu a:focus-visible{border-color:var(--ink)}

/* ---------- 主体骨架 ---------- */
main{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

.sheet{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
  padding:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,6vw,4rem);
}

/* ---------- 首屏 ---------- */
.hero{
  min-height:70vh;
  display:grid;
  grid-template-rows:auto minmax(22vh,1fr);
  gap:clamp(1.25rem,4vw,2.5rem);
  padding-bottom:clamp(1rem,3vw,2rem);
  border-bottom:1px solid var(--ink);
  text-align:right;
}

.hero-text{
  display:grid;
  justify-items:end;
  gap:1rem;
}

h1{
  margin:0;
  max-width:22ch;
  font-size:clamp(2.05rem,7vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:600;
}

.lede{
  margin:0;
  max-width:44ch;
  font-size:clamp(1rem,2vw,1.12rem);
  line-height:1.55;
  color:#2c2c2c;
}

.hero-media{
  min-height:22vh;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background-color:rgba(255,255,255,.6);
  background-image:radial-gradient(rgba(0,0,0,.22) 1px,transparent 1px);
  background-size:20px 20px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hero-media.has-img{
  background-image:none;
  background-color:#f2f2f2;
}
.hero-media img{
  width:100%;
  height:100%;
  max-height:52vh;
  object-fit:cover;
}

/* ---------- 正文区（玻璃卡片） ---------- */
.sheet > div{
  padding:clamp(1.15rem,3.2vw,2.25rem);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  scroll-margin-top:9.5rem;
  overflow-wrap:break-word;
  transition:border-color .24s ease,background .24s ease;
}
.sheet > div:hover{
  border-color:var(--ink);
  background:rgba(255,255,255,.94);
}

.sheet > div h2{
  margin:.3rem 0 .85rem;
  font-size:clamp(1.28rem,2.8vw,1.85rem);
  line-height:1.26;
  letter-spacing:-.02em;
  font-weight:600;
}

.sheet > div h3{
  margin:1.5rem 0 .4rem;
  font-size:1.08rem;
  font-weight:600;
}

.sheet > div p{margin:0 0 .95rem;max-width:68ch}
.sheet > div p:last-child{margin-bottom:0}
.sheet > div ul,.sheet > div ol{margin:0 0 1rem;padding-left:1.15rem;max-width:66ch}
.sheet > div li{margin:.3rem 0}
.sheet > div a{text-underline-offset:3px}
.sheet > div table{width:100%;border-collapse:collapse}

small{
  display:block;
  font-size:.74rem;
  letter-spacing:.22em;
  color:var(--muted);
  font-weight:500;
}

/* ---------- 右侧栏 ---------- */
.side{
  display:grid;
  align-content:start;
  gap:.3rem;
  padding-top:.85rem;
  border-top:2px solid var(--ink);
}
.side h2{
  margin:0;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.sidelist{list-style:none;margin:.35rem 0 0;padding:0;display:grid}
.sidelist a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.25rem 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:.92rem;
  transition:padding-left .22s ease,border-color .22s ease;
}
.sidelist a:hover{padding-left:.55rem;border-color:var(--ink)}

@media (min-width:920px){
  .sheet{
    grid-template-columns:minmax(0,1fr) 19rem;
    column-gap:clamp(2rem,4vw,4rem);
  }
  .sheet > *{grid-column:1}
  .sheet > .side{
    grid-column:2;
    grid-row:1 / span 40;
    position:sticky;
    top:9.5rem;
  }
}

/* ---------- 页脚两栏 ---------- */
footer{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  background:var(--ink);
  color:var(--paper);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
  padding:clamp(2rem,5vw,3rem) max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad))) 1.25rem;
}

@media (min-width:760px){
  footer{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:2rem;
  }
}

footer .brand{color:var(--paper);min-height:40px}
footer .mark b{background:var(--paper)}

.footlist{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.footlist a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:.9rem;
  text-decoration:none;
  opacity:.84;
  transition:opacity .2s ease;
}
.footlist a:hover{opacity:1;text-decoration:underline}

.copy{
  grid-column:1/-1;
  margin:0;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:.8rem;
  opacity:.7;
}

/* ---------- 逐个入场的列表 ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }
  .hero,.sheet > div,.side{
    animation:rise .55s cubic-bezier(.22,.68,.34,1) both;
  }
  .sheet > *:nth-child(2){animation-delay:.05s}
  .sheet > *:nth-child(3){animation-delay:.1s}
  .sheet > *:nth-child(4){animation-delay:.15s}
  .sheet > *:nth-child(5){animation-delay:.2s}
  .sheet > *:nth-child(6){animation-delay:.25s}
  .sheet > *:nth-child(7){animation-delay:.3s}
  .sheet > *:nth-child(8){animation-delay:.35s}
  .sheet > *:nth-child(9){animation-delay:.4s}
  .sheet > *:nth-child(10){animation-delay:.45s}
}

@media (max-width:919px){
  .navmenu{margin-top:.45rem}
  .side{margin-top:.5rem}
}

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