@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap');

:root{
  --clay:#5cc6b0;
  --clay-d:#2d7f72;
  --sand:#d4c4a8;
  --ink:#172623;
  --terra:#b9724f;
  --bg:#f8f2e9;
  --bg-2:#f2e8d9;
  --card:#fffcf7;
  --line:rgba(23,38,35,.13);
  --muted:#5c6b64;
  --soft:#8a7f6d;
  --r:28px;
  --rail:88px;
  --shadow:0 22px 44px -26px rgba(23,38,35,.5), 0 3px 8px -4px rgba(23,38,35,.12);
  --shadow-s:0 10px 22px -14px rgba(23,38,35,.45);
}

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

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

body{
  margin:0;
  padding-left:var(--rail);
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 4%, rgba(212,196,168,.5), transparent 56%),
    radial-gradient(circle at 92% 84%, rgba(92,198,176,.24), transparent 62%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  background-image:radial-gradient(rgba(23,38,35,.11) .7px, transparent .7px);
  background-size:4px 4px;
  opacity:.5;
}

body.menu-open{overflow:hidden}

h1,h2,h3,h4,.burger,.rail-brand,.drawer-brand,.drawer-col a,.side-title,.side-sub,.hero-cta,.side-list a::before,.foot-addr{
  font-family:"Nunito","DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}

a{color:var(--clay-d)}

::selection{background:rgba(92,198,176,.4)}

/* 左侧竖栏 */
.rail{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  z-index:70;
  width:var(--rail);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 12px;
  background:rgba(255,252,247,.84);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--line);
  box-shadow:8px 0 26px -24px rgba(23,38,35,.7);
}

.burger,.rail-search{
  width:100%;
  min-height:46px;
  font:inherit;
  font-size:16px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 0;
  cursor:pointer;
  box-shadow:var(--shadow-s);
  transition:transform .25s ease-out, background .25s ease-out;
}

.burger:hover,.rail-search:hover{transform:translateY(-2px);background:#fff}

.rail-brand{
  margin:auto 0;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:900;
  color:#12312b;
  text-decoration:none;
  background:linear-gradient(150deg,#7fd8c6,var(--clay) 55%,#bfe6d3);
  border-radius:38% 62% 56% 44% / 52% 44% 56% 48%;
  box-shadow:var(--shadow-s);
  transition:border-radius .55s ease-out, transform .35s ease-out;
}

.rail-brand:hover{
  transform:rotate(-7deg) scale(1.07);
  border-radius:54% 46% 42% 58% / 60% 54% 46% 40%;
}

/* 全屏遮罩菜单 */
.drawer{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:40px;
  padding:64px 48px 56px calc(var(--rail) + 56px);
  overflow-y:auto;
  background:linear-gradient(158deg,#fdf9f3,#f1e7d8 58%,#e6dac6);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .32s ease-out, transform .32s ease-out, visibility .32s linear;
}

.drawer.is-open{opacity:1;visibility:visible;transform:none}

.drawer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px 48px;
  width:100%;
  max-width:1020px;
  margin:0 auto;
}

.drawer-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

.drawer-col-r{align-items:flex-end;text-align:right}

.drawer-col a{
  display:inline-block;
  min-height:44px;
  padding:8px 4px;
  font-size:22px;
  font-weight:800;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s ease-out, border-color .2s ease-out;
}

.drawer-col a:hover{color:var(--clay-d);border-color:var(--clay)}

.drawer-brand{
  font-size:clamp(28px,3.4vw,44px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:.04em;
  text-align:center;
  color:var(--ink);
  text-decoration:none;
  text-shadow:0 2px 0 rgba(255,255,255,.85);
}

.drawer-search{display:flex;gap:10px;width:100%;max-width:520px;margin:0 auto}

.drawer-input{
  flex:1;
  min-height:48px;
  font:inherit;
  font-size:16px;
  padding:11px 20px;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow-s);
}

.drawer-input:focus{outline:2px solid var(--clay);outline-offset:2px}

.drawer-go{
  min-height:48px;
  font:inherit;
  font-weight:800;
  padding:11px 24px;
  color:#12312b;
  background:var(--clay);
  border:0;
  border-radius:999px;
  cursor:pointer;
  box-shadow:var(--shadow-s);
  transition:transform .2s ease-out;
}

.drawer-go:hover{transform:translateY(-2px)}

/* 首屏 */
.hero{
  position:relative;
  overflow:hidden;
  min-height:45vh;
  display:flex;
  align-items:flex-end;
  padding:52px 40px 40px;
  background:linear-gradient(135deg,#efe5d4,#e1d6c1);
  border-bottom:1px solid var(--line);
}

.hero-texture{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(23,38,35,.17) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.6;
}

.hero-media{position:absolute;inset:0}

.hero-img{width:100%;height:100%;object-fit:cover;display:block}

.hero-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(248,242,233,.95) 0%, rgba(248,242,233,.84) 44%, rgba(248,242,233,.32) 100%);
}

.hero-inner{position:relative;max-width:660px}

.hero-title{
  margin:0 0 14px;
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.012em;
}

.hero-lead{margin:0 0 22px;max-width:54ch;color:var(--muted);font-size:17px;line-height:1.66}

.hero-cta{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:12px 28px;
  font-size:16px;
  font-weight:800;
  color:#f2f8f5;
  background:var(--ink);
  border-radius:999px;
  text-decoration:none;
  box-shadow:var(--shadow-s);
  transition:transform .25s ease-out, background .25s ease-out;
}

.hero-cta:hover{transform:translateY(-2px);background:#0d1a17}

/* 正文 + 右侧栏 */
.main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 296px;
  align-items:start;
  gap:44px;
  max-width:1160px;
  margin:0 auto;
  padding:52px 40px 84px;
}

.doc{min-width:0;font-size:17px;line-height:1.78}

.doc article{
  scroll-margin-top:24px;
  margin:0 0 26px;
  padding:30px 30px 12px;
  background:var(--card);
  border:1px solid rgba(23,38,35,.06);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  animation:rise .52s ease-out both;
}

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

.doc article:nth-child(1){animation-delay:.02s}
.doc article:nth-child(2){animation-delay:.06s}
.doc article:nth-child(3){animation-delay:.1s}
.doc article:nth-child(4){animation-delay:.14s}
.doc article:nth-child(5){animation-delay:.18s}
.doc article:nth-child(6){animation-delay:.22s}
.doc article:nth-child(7){animation-delay:.26s}

.doc h2{
  margin:0 0 16px;
  font-size:clamp(22px,2.4vw,29px);
  line-height:1.3;
  font-weight:800;
}

.doc h2 span{background:linear-gradient(transparent 64%, rgba(92,198,176,.5) 0);padding:0 .12em;border-radius:3px}

.doc h3{margin:24px 0 10px;font-size:20px;font-weight:800;line-height:1.4}

.doc h3 span{border-bottom:3px solid var(--sand);padding-bottom:2px}

.doc p{margin:0 0 16px}

.doc ul,.doc ol{margin:0 0 18px;padding-left:1.3em}

.doc li{margin:.35em 0}

.doc a{color:var(--clay-d);text-underline-offset:3px}

.doc a:hover{color:var(--terra)}

.doc img{max-width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow-s)}

.doc blockquote{
  margin:20px 0;
  padding:14px 20px;
  background:rgba(92,198,176,.12);
  border-left:4px solid var(--clay);
  border-radius:0 18px 18px 0;
}

.doc blockquote p:last-child{margin-bottom:0}

.doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px}

.doc th,.doc td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}

.doc strong{font-weight:700}

.side{
  position:sticky;
  top:26px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.side-card{
  padding:22px;
  background:var(--card);
  border:1px solid rgba(23,38,35,.06);
  border-radius:var(--r);
  box-shadow:var(--shadow-s);
}

.side-title,.side-sub{margin:0 0 12px;font-size:17px;font-weight:800;line-height:1.4}

.side-title span,.side-sub span{border-bottom:3px solid var(--sand);padding-bottom:2px}

.side-list{list-style:none;margin:0;padding:0;counter-reset:s}

.side-list li{counter-increment:s}

.side-list a{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-height:40px;
  padding:7px 0;
  font-size:16px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(23,38,35,.08);
  transition:color .2s ease-out, padding-left .2s ease-out;
}

.side-list li:last-child a{border-bottom:0}

.side-list a::before{
  content:counter(s,decimal-leading-zero);
  font-size:13px;
  font-weight:800;
  color:var(--clay-d);
}

.side-list a:hover{color:var(--clay-d);padding-left:4px}

.side-up{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s ease-out;
}

.side-up:hover{color:var(--clay-d)}

/* 页脚 */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  padding:22px 40px 26px;
  font-size:16px;
  border-top:1px solid var(--line);
  background:rgba(255,252,247,.62);
}

.foot-addr{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-weight:800}

.foot-mark{width:14px;height:14px;border-radius:56% 44% 48% 52%;background:var(--clay);display:inline-block}

.foot-ul{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0;padding:0}

.foot-ul a,.foot-dl a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--muted);
  text-decoration:none;
}

.foot-ul a:hover,.foot-dl a:hover{color:var(--ink);text-decoration:underline}

.foot-nav{margin-left:auto}

.foot-dl{display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:center;margin:0}

.foot-dl dt{color:var(--soft)}

.foot-dl dd{margin:0}

.foot-copy{flex-basis:100%;margin:4px 0 0;color:var(--soft)}

@media (max-width:1080px){
  .main{grid-template-columns:minmax(0,1fr) 258px;gap:30px;padding:44px 28px 68px}
}

@media (max-width:860px){
  .main{grid-template-columns:minmax(0,1fr)}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side-card{flex:1 1 240px}
}

@media (max-width:760px){
  :root{--rail:64px}

  body{font-size:16px}

  .rail{padding:14px 8px}

  .burger,.rail-search{font-size:15px;letter-spacing:0;padding:12px 0;min-height:44px}

  .rail-brand{width:44px;height:44px;font-size:20px}

  .drawer{
    justify-content:flex-start;
    gap:28px;
    padding:56px 20px 40px calc(var(--rail) + 20px);
  }

  .drawer-grid{grid-template-columns:1fr;gap:12px}

  .drawer-col-r{align-items:flex-start;text-align:left}

  .drawer-brand{text-align:left;font-size:26px}

  .drawer-search{max-width:none}

  .hero{min-height:52vh;padding:32px 20px 26px}

  .hero-title{font-size:clamp(26px,7.2vw,34px)}

  .hero-lead{font-size:16px}

  .main{padding:26px 20px 56px;gap:22px}

  .doc article{padding:22px 20px 6px;border-radius:22px;margin-bottom:18px}

  .foot{padding:18px 20px 22px;gap:8px 16px}

  .foot-nav{margin-left:0}

  .doc img{border-radius:16px}
}

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

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