@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{
  --mint:#5cc6b0;
  --sand:#d4c4a8;
  --ink:#172623;
  --clay:#c67b5c;
  --paper:#fbf5ec;
  --paper-2:#f2e6d5;
  --muted:#5b675c;
  --line:rgba(23,38,35,.13);
  --shadow:0 18px 34px -24px rgba(23,38,35,.75);
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:132px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:"DM Sans","Nunito",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--ink);
  background:linear-gradient(180deg,#fbf5ec 0%,#f4e9da 42%,#efe1cd 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.2;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto}

:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* 顶栏 */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  padding:10px 18px 12px;
  background:rgba(251,245,236,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.brandline{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}

.mark{display:block;line-height:0;border-radius:14px}
.mark-img{width:44px;height:44px;border-radius:14px;object-fit:cover;display:block}

.brand{
  margin:0;
  font-family:"Nunito","DM Sans",sans-serif;
  font-weight:900;
  font-size:21px;
  letter-spacing:.03em;
  line-height:1.3;
}

.find{
  display:flex;
  gap:8px;
  margin-top:8px;
  max-width:460px;
}

.find input{
  flex:1 1 auto;
  min-width:0;
  min-height:46px;
  padding:0 16px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:#fffaf3;
  border:1px solid rgba(23,38,35,.18);
  border-radius:999px;
}

.find button{
  flex:0 0 auto;
  min-height:46px;
  padding:0 20px;
  font:inherit;
  font-size:16px;
  font-weight:700;
  color:#f2fbf7;
  background:var(--ink);
  border:0;
  border-radius:999px;
  cursor:pointer;
}

.find.miss{animation:shake .32s ease-out}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}

/* 骨架 */
main{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:1120px;
  margin:0 auto;
  padding:20px 18px 12px;
}

article{order:1;max-width:70ch}
aside{order:2}

/* 侧栏 */
.side{
  padding:16px 18px 18px;
  background:var(--sand);
  border-radius:22px 10px 22px 10px;
  box-shadow:var(--shadow);
}

.side h2{
  margin:0;
  font-family:"Nunito","DM Sans",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:.18em;
  color:#4c4133;
}

.side hr{
  margin:8px 0 12px;
  height:3px;
  width:44px;
  border:0;
  border-radius:3px;
  background:#8a7658;
}

.side-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:0;
  padding:0;
  list-style:none;
}

.side-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:6px 2px;
  font-size:16px;
  color:#22352f;
  text-decoration:none;
  border-bottom:1px dashed rgba(23,38,35,.16);
}

.side-list a:hover{color:#12574b}

/* 首屏 */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:45vh;
  padding:8px 0 34px;
  text-align:center;
}

.collage{
  display:flex;
  justify-content:center;
  width:100%;
  max-width:520px;
}

.collage figure{
  margin:0;
  width:46%;
  overflow:hidden;
  box-shadow:0 22px 36px -26px rgba(23,38,35,.9);
  border-radius:22px 10px 20px 12px;
}

.collage figure img{
  display:block;
  width:100%;
  height:148px;
  object-fit:cover;
}

.collage figure:first-child{transform:rotate(-3deg) translateY(10px)}

.collage figure:last-child{
  margin-left:-9%;
  transform:rotate(3deg) translateY(-12px);
  border-radius:10px 22px 12px 20px;
}

.hero-copy{display:flex;flex-direction:column;gap:12px;align-items:center}

.hero h1{
  margin:0;
  font-family:"Nunito","DM Sans",sans-serif;
  font-weight:900;
  font-size:clamp(28px,7.4vw,46px);
  line-height:1.26;
  letter-spacing:.01em;
}

.lede{
  margin:0;
  max-width:38ch;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}

/* 正文 */
article > section{scroll-margin-top:132px}

article > section + section{
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--line);
}

article h2{
  margin:0 0 6px;
  font-family:"Nunito","DM Sans",sans-serif;
  font-weight:900;
  font-size:clamp(21px,4.8vw,27px);
  line-height:1.36;
}

article h3{
  margin:24px 0 6px;
  font-family:"Nunito","DM Sans",sans-serif;
  font-weight:800;
  font-size:19px;
  line-height:1.4;
}

article hr{
  margin:2px 0 18px;
  height:3px;
  width:52px;
  border:0;
  border-radius:3px;
  background:var(--clay);
}

article p{margin:0 0 14px}

article ul,
article ol{margin:0 0 16px;padding-left:22px}

article li{margin:0 0 8px}

article a{
  color:#15695b;
  text-decoration:underline;
  text-underline-offset:3px;
}

article strong{color:#0f3f38}

article blockquote{
  margin:18px 0;
  padding:14px 18px;
  background:#fff8ee;
  border-left:5px solid var(--mint);
  border-radius:6px 18px 18px 6px;
}

article table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  font-size:16px;
}

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

article code{
  font-size:15px;
  padding:1px 6px;
  border-radius:6px;
  background:#efe2d0;
}

article figure{margin:18px 0}

article figure img{border-radius:16px}

/* 页脚 */
footer{
  position:relative;
  z-index:1;
  margin-top:44px;
  padding:32px 18px 118px;
  background:#ecdfca;
  border-top:3px solid #dcc9ae;
}

.foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 14px;
  max-width:1120px;
  margin:0 auto;
}

.foot address{
  font-family:"Nunito","DM Sans",sans-serif;
  font-style:normal;
  font-weight:900;
  font-size:18px;
  line-height:1.45;
}

.foot ul{margin:0;padding:0;list-style:none}

.foot li a{
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:16px;
  color:#2f423a;
  text-decoration:none;
}

.foot li a:hover{color:#12574b}

.legal{
  max-width:1120px;
  margin:20px auto 0;
  padding-top:12px;
  font-size:16px;
  color:#5c6a5d;
  border-top:1px solid rgba(23,38,35,.14);
}

/* 底部胶囊导航 */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:flex;
  justify-content:center;
  padding:10px 14px 14px;
  pointer-events:none;
}

.dock details{
  pointer-events:auto;
  background:var(--ink);
  border-radius:999px;
  box-shadow:0 18px 32px -16px rgba(23,38,35,.9);
}

.dock summary{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:50px;
  padding:0 24px;
  cursor:pointer;
  list-style:none;
  color:#eafaf5;
  font-family:"Nunito","DM Sans",sans-serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:.14em;
}

.dock summary::-webkit-details-marker{display:none}
.dock summary em{font-style:normal}

.bars{display:flex;flex-direction:column;gap:4px}

.bar{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#eafaf5;
}

.dock details[open] summary{
  position:fixed;
  top:14px;
  right:14px;
  z-index:60;
  background:var(--ink);
  border-radius:999px;
  padding:0 18px;
  min-height:46px;
}

.dock details[open] .bar:first-child{transform:rotate(45deg) translate(4px,4px)}
.dock details[open] .bar:nth-child(2){opacity:0}
.dock details[open] .bar:last-child{transform:rotate(-45deg) translate(4px,-4px)}

.dock .sheet{
  position:fixed;
  inset:0;
  z-index:55;
  display:grid;
  align-content:start;
  gap:6px;
  margin:0;
  padding:86px 18px 44px;
  list-style:none;
  overflow:auto;
  background:radial-gradient(circle at 82% 8%,#294a41 0%,#101d19 72%);
}

.dock .sheet li a{
  display:flex;
  align-items:center;
  min-height:54px;
  padding:0 16px;
  color:#eafaf5;
  text-decoration:none;
  font-family:"Nunito","DM Sans",sans-serif;
  font-weight:800;
  font-size:19px;
  border-bottom:1px solid rgba(234,250,245,.16);
  border-radius:10px;
}

.dock .sheet li a:hover{background:rgba(92,198,176,.2)}

/* 动效 */
html.js article > section{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .62s ease-out,transform .62s ease-out;
}

html.js article > section.in{opacity:1;transform:none}

html.js .side-list li{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .45s ease-out,transform .45s ease-out;
}

html.js .side.ready .side-list li{opacity:1;transform:none}

html.js .side.ready .side-list li:nth-child(1){transition-delay:.02s}
html.js .side.ready .side-list li:nth-child(2){transition-delay:.06s}
html.js .side.ready .side-list li:nth-child(3){transition-delay:.1s}
html.js .side.ready .side-list li:nth-child(4){transition-delay:.14s}
html.js .side.ready .side-list li:nth-child(5){transition-delay:.18s}
html.js .side.ready .side-list li:nth-child(6){transition-delay:.22s}
html.js .side.ready .side-list li:nth-child(7){transition-delay:.26s}

/* 宽屏 */
@media (min-width:900px){
  .topbar{padding:14px 26px 16px}

  main{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    align-items:start;
    gap:34px;
    padding:30px 26px 16px;
  }

  aside{
    grid-column:1;
    grid-row:1;
    position:sticky;
    top:140px;
    order:0;
  }

  article{grid-column:2;grid-row:1;order:0}

  .hero{padding-top:14px}

  .collage figure img{height:180px}

  .foot{grid-template-columns:1.4fr 1fr 1fr 1fr}
}

@media (min-width:1180px){
  .hero{min-height:48vh}
}

/* 减少动态 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js article > section,
  html.js .side-list li{opacity:1;transform:none;transition:none}
  .find.miss{animation:none}
}

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