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

:root{
  --ink:#172623;
  --ink-soft:#3f4f49;
  --teal:#5cc6b0;
  --teal-deep:#2c8273;
  --sand:#d4c4a8;
  --clay:#c67b5c;
  --cream:#f7f1e6;
  --paper:#fffdf7;
  --line:rgba(23,38,35,.16);
  --rail:266px;
  --pad:clamp(18px,4vw,56px);
  --edge:max(var(--pad),calc((100% - 1180px)/2));
}

*{box-sizing:border-box}

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

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(92,198,176,.20), transparent 62%),
    radial-gradient(760px 520px at -10% 22%, rgba(198,123,92,.15), transparent 60%),
    linear-gradient(180deg,#f9f4ea 0%, var(--cream) 42%, #f3ead9 100%);
  font-family:'Raleway','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.78;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

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

img{max-width:100%;height:auto}
a{color:var(--teal-deep)}
p{margin:0 0 14px}

h1,h2,h3{font-family:'Lora','Noto Sans SC',serif;font-weight:600}

/* ---------- 头部 ---------- */
.site-head{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,241,230,.94);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}

.head-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1180px;
  margin:0 auto;
  padding:12px var(--pad) 6px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  text-decoration:none;
  color:var(--ink);
}

.brand-seal{
  width:36px;
  height:36px;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(23,38,35,.22);
  border-radius:12px 17px 13px 18px;
  background:linear-gradient(140deg,var(--teal),var(--sand) 78%);
}

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

.brand-name{
  font-family:'Lora',serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:.08em;
}

.find{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  max-width:330px;
}

.find-in{
  flex:1 1 auto;
  min-width:0;
  height:44px;
  padding:0 14px;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px 19px 15px 20px;
}

.find-in::placeholder{color:rgba(63,79,73,.72)}
.find-in:focus{outline:2px solid var(--teal);outline-offset:1px}
.find-in[aria-invalid]{border-color:var(--clay)}

.find-btn{
  height:44px;
  padding:0 16px;
  font:inherit;
  font-size:16px;
  color:#f7f1e6;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:16px 20px 15px 19px;
  cursor:pointer;
  transition:background .25s ease-out;
}

.find-btn:hover{background:#25392f}

.head-nav{
  display:flex;
  gap:6px;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--pad) 10px;
  overflow-x:auto;
  scrollbar-width:none;
}

.head-nav::-webkit-scrollbar{display:none}

.nav-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  font-size:16px;
  letter-spacing:.02em;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:16px;
  transition:background .25s ease-out,color .25s ease-out;
}

.nav-link:hover,
.nav-link[aria-current]{
  color:var(--ink);
  background:rgba(92,198,176,.24);
}

/* ---------- 首屏 ---------- */
main{display:block;padding-bottom:20px}

.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  grid-template-rows:1fr;
  align-items:center;
  gap:0 18px;
  max-width:1180px;
  min-height:70vh;
  margin:0 auto;
  padding:28px var(--pad) 44px;
  scroll-margin-top:20px;
}

.hero-copy{
  grid-column:2;
  grid-row:1;
  padding-left:26px;
  text-align:right;
}

.hero h1{
  margin:0 0 18px;
  font-size:clamp(1.95rem,4.6vw,3.4rem);
  line-height:1.16;
  font-weight:600;
  letter-spacing:.005em;
}

.hero-lede{
  max-width:34ch;
  margin:0 0 26px auto;
  color:var(--ink-soft);
}

.hero-more{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 24px;
  font-size:16px;
  color:#0e1c18;
  text-decoration:none;
  background:linear-gradient(120deg,rgba(92,198,176,.95),rgba(92,198,176,.7));
  border:1px solid rgba(23,38,35,.24);
  border-radius:18px 25px 20px 27px;
  transition:transform .3s ease-out,background .3s ease-out;
}

.hero-more:hover{transform:translateY(-2px);background:var(--teal)}

.shot{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(150deg,#e8dcc8,#d2c3a7 58%,#c4dcd3);
}

.shot-a{
  grid-column:1;
  grid-row:1;
  z-index:1;
  align-self:start;
  justify-self:start;
  width:78%;
  border-radius:24px 28px 20px 26px;
  transform:rotate(-2.2deg);
}

.shot-b{
  grid-column:1;
  grid-row:1;
  z-index:2;
  align-self:end;
  justify-self:end;
  width:64%;
  border-radius:20px 26px 24px 28px;
  transform:rotate(2deg) translateY(13%);
}

.shot-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  will-change:transform;
}

.shot-a .shot-img{aspect-ratio:4/5;min-height:220px}
.shot-b .shot-img{aspect-ratio:3/4;min-height:200px}

/* ---------- 正文区 ---------- */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail);
  gap:clamp(20px,3vw,38px);
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:36px var(--pad) 64px;
  border-top:1px solid var(--line);
}

.prose{min-width:0}

.prose section{
  margin:0 0 22px;
  padding:clamp(20px,3vw,32px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  transition:border-color .3s ease-out,transform .3s ease-out;
}

.prose section:hover{
  border-color:rgba(92,198,176,.62);
  transform:translateY(-2px);
}

.prose section[id]{scroll-margin-top:150px}
.prose section.hit{outline:2px dashed var(--teal);outline-offset:4px}

.prose h2{
  margin:0 0 14px;
  font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.34;
}

.prose h2 > span,
.prose h3 > span{
  display:inline-block;
  position:relative;
  padding-left:20px;
}

.prose h2 > span::before,
.prose h3 > span::before{
  content:'';
  position:absolute;
  left:0;
  top:.36em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--clay);
}

.prose h3{
  margin:22px 0 10px;
  font-size:1.14rem;
  line-height:1.4;
}

.prose h3 > span{padding-left:16px}
.prose h3 > span::before{width:6px;height:6px;top:.5em;background:var(--teal-deep)}

.prose ul,
.prose ol{padding-left:1.25em;margin:0 0 16px}
.prose li{margin:0 0 8px}

.prose img{
  border:1px solid var(--line);
  border-radius:14px;
}

.prose figure{margin:18px 0}

.prose blockquote{
  margin:18px 0;
  padding:12px 18px;
  color:var(--ink-soft);
  background:rgba(92,198,176,.10);
  border-left:3px solid var(--teal);
  border-radius:0 14px 14px 0;
}

.prose a{
  color:var(--teal-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}

.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,
.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}

/* ---------- 侧栏 ---------- */
.rail{
  position:sticky;
  top:150px;
  padding:20px;
  background:rgba(255,253,247,.74);
  border:1px solid var(--line);
  border-radius:20px 25px 18px 23px;
}

.rail-h{
  margin:0 0 12px;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.14em;
}

.rail-h-two{margin-top:24px}

.rail-h > span{
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--clay);
}

.rail-list{
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 10px;
  font-size:16px;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid transparent;
  border-radius:13px;
  transition:background .25s ease-out,border-color .25s ease-out,color .25s ease-out;
}

.rail-list a:hover{
  color:var(--ink);
  background:rgba(92,198,176,.16);
  border-color:rgba(92,198,176,.42);
}

.rail-top{margin:0}

.rail-top a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:6px 12px;
  font-size:16px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:13px;
  transition:background .25s ease-out;
}

.rail-top a:hover{background:rgba(198,123,92,.16)}

/* ---------- 页脚 ---------- */
.site-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding:18px var(--edge);
  background:rgba(212,196,168,.30);
  border-top:1px solid var(--line);
}

.foot-logo{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-family:'Lora',serif;
  font-size:17px;
  letter-spacing:.08em;
  color:var(--ink);
  text-decoration:none;
}

.foot-nav dl{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 2px;
  margin:0;
}

.foot-nav dt{
  margin-right:6px;
  font-size:16px;
  letter-spacing:.16em;
  color:var(--ink-soft);
}

.foot-nav dd{margin:0}

.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 10px;
  font-size:16px;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:12px;
  transition:background .25s ease-out,color .25s ease-out;
}

.foot-nav a:hover{color:var(--ink);background:rgba(92,198,176,.22)}

.foot-legal{
  font-size:16px;
  color:var(--ink-soft);
  letter-spacing:.04em;
}

/* ---------- 动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s ease-out,transform .7s ease-out;
}

.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .shot-img{transform:none !important}
  .prose div:hover,
  .hero-more:hover{transform:none}
}

/* ---------- 自适应 ---------- */
@media (max-width:960px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;order:2}
  .rail-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .prose div[id]{scroll-margin-top:20px}
}

@media (max-width:760px){
  :root{--pad:18px}

  .site-head{position:static}
  .head-top{flex-wrap:wrap;padding-bottom:2px}
  .brand{flex:1 1 100%}
  .find{flex:1 1 100%;max-width:none;margin-bottom:6px}

  .hero{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    min-height:0;
    padding:22px var(--pad) 40px;
  }

  .hero-copy{
    grid-column:1 / -1;
    grid-row:1;
    padding:0 0 24px;
  }

  .hero-lede{max-width:none}

  .shot-a{
    grid-column:1;
    grid-row:2;
    width:100%;
    justify-self:stretch;
    align-self:start;
    transform:rotate(-1.6deg);
  }

  .shot-b{
    grid-column:2;
    grid-row:2;
    width:100%;
    justify-self:stretch;
    transform:rotate(1.6deg) translateY(10%);
  }

  .shot-a .shot-img{aspect-ratio:3/4;min-height:160px}
  .shot-b .shot-img{aspect-ratio:3/4;min-height:160px}

  .stage{padding-top:28px}
  .site-foot{justify-content:flex-start;gap:10px 16px}
  .foot-legal{flex:1 1 100%}
}

@media (max-width:420px){
  body{font-size:16px}
  .brand-name{font-size:19px}
  .hero h1{font-size:1.85rem}
  .find-btn{padding:0 13px}
}

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