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

:root{
  --ink:#000000;
  --paper:#ffffff;
  --line:#e4e4e4;
  --mid:#5b5b5b;
  --shell:1200px;
  --r:28px;
  --pad:1.15rem;
  --ui:Lato,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC",sans-serif;
  --serif:"EB Garamond",Georgia,"Songti SC","Times New Roman",serif;
}

*,*::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:var(--ui);
  font-size:17px;
  line-height:1.68;
  letter-spacing:.01em;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:.005em;
}

hr{
  border:0;
  border-top:1px solid var(--ink);
  margin:.55rem 0 1.2rem;
  height:0;
}

/* ---------- 顶栏 ---------- */

.bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem .8rem;
  padding:.7rem var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  position:relative;
  z-index:30;
}

.mark{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 .7rem;
  border:1.5px solid var(--ink);
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.04em;
  text-decoration:none;
  line-height:1;
}

.bar-nav{flex:1 1 auto;min-width:0}
.bar-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:0;
  padding:0;
  list-style:none;
}
.bar-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .85rem;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:.9rem;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .22s ease,color .22s ease;
}
.bar-nav a:hover,
.bar-nav a:focus-visible{
  background:var(--ink);
  color:var(--paper);
}

.call{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.35rem 1.05rem;
  margin-left:auto;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-size:.9rem;
  text-decoration:none;
  transition:background-color .22s ease,color .22s ease;
}
.call:hover,.call:focus-visible{background:var(--paper);color:var(--ink)}

/* ---------- 首屏 ---------- */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  padding:4.5rem var(--pad) 3.5rem;
  min-height:86vh;
  display:flex;
  align-items:flex-end;
  clip-path:polygon(0 0,100% 0,100% 100%,0 93%);
  scroll-margin-top:6rem;
}

.hero-mark{
  position:absolute;
  top:1.6rem;
  left:var(--pad);
  right:var(--pad);
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.5rem,13vw,9.5rem);
  line-height:.86;
  letter-spacing:-.02em;
  color:var(--paper);
  opacity:.16;
  overflow-wrap:anywhere;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  display:grid;
  gap:1.6rem;
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  align-items:end;
}

.hero-fig{margin:0}
.hero-img{
  width:100%;
  height:min(48vw,340px);
  object-fit:cover;
  border-radius:var(--r);
  filter:grayscale(1);
}

.hero-inner{
  text-align:right;
  max-width:44rem;
  margin-left:auto;
}

.hero h1{
  font-size:clamp(2rem,7vw,3.9rem);
  line-height:1.06;
  text-wrap:balance;
}

.hero-lede{
  margin:1rem 0 0 auto;
  max-width:34rem;
  font-size:1rem;
  color:#d9d9d9;
  line-height:1.7;
}

/* ---------- 主区域 ---------- */

.shell{
  max-width:var(--shell);
  margin:0 auto;
  padding:2.4rem var(--pad) 3.5rem;
  display:grid;
  gap:1.8rem;
}

.side{min-width:0}
.side h2{
  font-family:var(--ui);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.side hr{margin:.6rem 0 1rem}
.side ul{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:side;
}
.side li{counter-increment:side}
.side a{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:44px;
  padding-right:.4rem;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
  text-decoration:none;
  transition:background-color .22s ease,color .22s ease,padding-left .22s ease;
}
.side a::before{
  content:counter(side,decimal-leading-zero);
  font-family:var(--serif);
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--mid);
}
.side a:hover,.side a:focus-visible{
  background:var(--ink);
  color:var(--paper);
  padding-left:.55rem;
}
.side a:hover::before,.side a:focus-visible::before{color:var(--paper)}

.body{min-width:0}
.body > section{
  padding:2.3rem 0 2.6rem;
  border-bottom:1px solid var(--line);
  scroll-margin-top:6.5rem;
}
.body > section:first-child{padding-top:0}
.body > section:last-child{border-bottom:0;padding-bottom:.5rem}

.body h2{font-size:clamp(1.45rem,4vw,2.1rem)}
.body h2 + hr{margin:.55rem 0 1.15rem}
.body h3{font-size:1.18rem;margin:1.7rem 0 .5rem}
.body p{margin:0 0 1.05rem;max-width:70ch;color:#141414}
.body ul,.body ol{margin:0 0 1.1rem;padding-left:1.2rem}
.body li{margin-bottom:.45rem}
.body ul li::marker{color:var(--ink)}
.body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.body a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.body strong{font-weight:700}
.body blockquote{
  margin:1.4rem 0;
  padding:.15rem 0 .15rem 1.1rem;
  border-left:3px solid var(--ink);
  font-family:var(--serif);
  font-size:1.1rem;
  line-height:1.6;
}
.body figure{margin:1.5rem 0}
.body figure img{border-radius:var(--r);width:100%}
.body figcaption{font-size:.85rem;color:var(--mid);margin-top:.5rem}
.body table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.2rem}
.body th,.body td{border-bottom:1px solid var(--line);padding:.55rem .5rem;text-align:left;vertical-align:top}
.body th{font-weight:700}

/* ---------- 页脚 ---------- */

.foot{
  border-top:1px solid var(--ink);
  padding:2.6rem var(--pad) 1.8rem;
  margin-top:1rem;
}
.foot-top{
  display:grid;
  gap:2rem;
  max-width:var(--shell);
  margin:0 auto;
}
.foot-mark{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem,9vw,5rem);
  line-height:.92;
  letter-spacing:-.02em;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.foot-call{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:1rem;
  padding:0 1.1rem;
  border:1.5px solid var(--ink);
  border-radius:999px;
  font-size:.92rem;
  text-decoration:none;
  transition:background-color .22s ease,color .22s ease;
}
.foot-call:hover,.foot-call:focus-visible{background:var(--ink);color:var(--paper)}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
}
.foot dl{margin:0}
.foot dt{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--mid);
  margin-bottom:.45rem;
}
.foot dd{margin:0}
.foot dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:.94rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot dd a:hover,.foot dd a:focus-visible{border-bottom-color:var(--ink)}

.copy{
  max-width:var(--shell);
  margin:2.2rem auto 0;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.82rem;
  color:var(--mid);
}

/* ---------- 断点 ---------- */

@media (min-width:900px){
  .bar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    flex-wrap:nowrap;
    padding:.9rem 2rem;
  }
  .mark{margin-right:.6rem}
  .call{margin-left:0}
  .bar-nav{margin-left:auto;flex:0 1 auto}
  .bar-nav ul{flex-wrap:nowrap}

  .hero{
    min-height:100vh;
    padding:9rem 2rem 5rem;
    clip-path:polygon(0 0,100% 0,100% 100%,0 94%);
  }
  .hero-mark{top:5.5rem;left:2rem;right:2rem}
  .hero.has-img .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:2.5rem;
    align-items:end;
  }
  .hero.has-img .hero-img{height:min(52vh,430px)}

  .shell{
    grid-template-columns:250px minmax(0,1fr);
    gap:1.5rem 3.5rem;
    padding:4rem 2rem 5.5rem;
  }
  .side{position:sticky;top:6.4rem}

  .foot{padding:3.4rem 2rem 2rem}
  .foot-top{grid-template-columns:1.05fr 1fr;gap:3rem;align-items:start}
  .foot-cols{gap:1.6rem}
}

@media (max-width:400px){
  .bar-nav a{font-size:.86rem;padding:.35rem .7rem}
  .hero-mark{opacity:.14}
}

/* ---------- 动效 ---------- */

.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .62s ease,transform .62s ease;
}
.js [data-reveal].in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

@media print{
  .bar,.side,.foot-call{display:none}
  .hero{min-height:0;clip-path:none;color:#000;background:#fff}
  a{text-decoration:none}
}

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