:root{
  --ink:#172623;
  --ink-2:#1d302c;
  --ink-3:#27423c;
  --sand:#d4c4a8;
  --sand-2:#bcb097;
  --jade:#5cc6b0;
  --clay:#c67b5c;
  --line:rgba(212,196,168,.16);
  --line-2:rgba(212,196,168,.32);
  --glass:rgba(212,196,168,.055);
  --r:4px;
  --pad:clamp(1.15rem,4.2vw,3.25rem);
  --max:1160px;
}

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

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

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(920px 540px at 88% -10%,rgba(92,198,176,.15),transparent 66%),
    radial-gradient(720px 500px at -12% 24%,rgba(198,123,92,.13),transparent 72%),
    linear-gradient(180deg,var(--ink) 0%,#152220 62%,#131f1d 100%);
  background-attachment:fixed;
  color:var(--sand);
  font-family:"Inter",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

img{max-width:100%;display:block}
a{color:var(--jade)}

/* 顶部：细条 + 品牌 + 横排链接 */
.site-top{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 1.1rem;
  padding:0 var(--pad);
  background:rgba(21,34,32,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  transition:box-shadow .35s ease-out;
}

.site-top.is-stuck{box-shadow:0 14px 34px rgba(0,0,0,.42)}

.strip{
  flex:1 0 100%;
  min-width:0;
  margin:0 calc(var(--pad) * -1);
  padding:.32rem var(--pad);
  border-bottom:1px dashed rgba(212,196,168,.14);
  background:linear-gradient(90deg,rgba(198,123,92,.14),transparent 70%);
}

.strip p{
  min-width:0;
  margin:0;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.16em;
  color:var(--sand-2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.62rem 0;
  text-decoration:none;
  color:var(--sand);
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-size:1.32rem;
  line-height:1.35;
  letter-spacing:.01em;
  white-space:nowrap;
}

.mark{
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 auto;
  border-radius:2px;
  background:linear-gradient(140deg,var(--jade),var(--clay));
  box-shadow:0 0 0 1px rgba(23,38,35,.5) inset;
  font-size:11px;
  line-height:14px;
  text-align:center;
  color:#10201d;
  overflow:hidden;
}

.mark--dot{
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%,var(--jade),#2f7c6c);
}

.site-top nav{
  margin-left:auto;
  min-width:0;
  max-width:100%;
}

.site-top nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
  max-width:100%;
}

.site-top nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:.42rem;
  padding:.72rem .62rem;
  min-height:44px;
  text-decoration:none;
  color:var(--sand-2);
  font-size:16px;
  line-height:1.5;
  white-space:nowrap;
  transition:color .22s ease-out;
}

.ic{
  width:6px;
  height:6px;
  flex:0 0 auto;
  background:var(--jade);
  transform:rotate(45deg);
  opacity:.42;
  transition:opacity .22s ease-out,transform .22s ease-out;
}

.site-top nav a::after{
  content:"";
  position:absolute;
  left:.62rem;
  right:.62rem;
  bottom:.42rem;
  height:1px;
  background:var(--jade);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease-out;
}

.site-top nav a:hover,
.site-top nav a:focus-visible{color:var(--sand)}
.site-top nav a:hover .ic,
.site-top nav a:focus-visible .ic{opacity:1;transform:rotate(45deg) scale(1.15)}
.site-top nav a:hover::after,
.site-top nav a:focus-visible::after{transform:scaleX(1)}

/* 首屏 */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(1.6rem,5vw,4rem) var(--pad) clamp(1.8rem,5vw,3.6rem);
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(1.4rem,5vw,3.6rem);
  align-items:center;
  min-height:clamp(480px,86svh,840px);
}

.hero > *{min-width:0}
.hero-txt{text-align:center}

.hero h1{
  margin:0 0 1.1rem;
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.35rem,7vw,4.6rem);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--sand);
  overflow-wrap:break-word;
  text-shadow:0 20px 50px rgba(0,0,0,.35);
}

.lede{
  max-width:40ch;
  margin:0 auto;
  color:var(--sand-2);
  font-size:17px;
  line-height:1.75;
}

.hero-pic{
  margin:0;
  aspect-ratio:4/5;
  min-height:300px;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(92,198,176,.16),rgba(212,196,168,.07) 52%,rgba(198,123,92,.14));
  box-shadow:0 26px 62px rgba(0,0,0,.42);
}

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

/* 正文骨架 */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(1.8rem,5vw,3.4rem) var(--pad) clamp(2.6rem,7vw,5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) 272px;
  gap:clamp(1.4rem,4vw,3rem);
  align-items:start;
}

.wrap > *{min-width:0}

.body-col{min-width:0}

.sec-h{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.8rem,4.2vw,2.8rem);
  line-height:1.16;
  color:var(--sand);
  overflow-wrap:break-word;
}

.subtitle{
  margin:.45rem 0 1.9rem;
  font-size:16px;
  letter-spacing:.06em;
  color:var(--jade);
}

.prose{font-size:17px;line-height:1.78;overflow-wrap:break-word;min-width:0}

.prose > *{max-width:100%}

.prose > section{
  scroll-margin-top:150px;
  animation:rise .6s cubic-bezier(.2,.72,.28,1) backwards;
}

.prose > section:nth-child(1){animation-delay:.04s}
.prose > section:nth-child(2){animation-delay:.1s}
.prose > section:nth-child(3){animation-delay:.16s}
.prose > section:nth-child(4){animation-delay:.22s}
.prose > section:nth-child(5){animation-delay:.28s}
.prose > section:nth-child(6){animation-delay:.34s}
.prose > section:nth-child(7){animation-delay:.4s}
.prose > section:nth-child(n+8){animation-delay:.46s}

.prose > section + section{
  margin-top:2.6rem;
  padding-top:2.1rem;
  border-top:1px solid var(--line);
}

.prose h2{
  margin:0 0 .75rem;
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.45rem,3.2vw,2rem);
  line-height:1.26;
  color:var(--sand);
}

.prose h3{
  margin:1.6rem 0 .55rem;
  font-size:1.14rem;
  line-height:1.5;
  color:var(--sand);
}

.prose p{margin:0 0 1.05rem;color:var(--sand-2)}
.prose p strong{color:var(--sand)}
.prose a{color:var(--jade);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.prose ul,
.prose ol{margin:0 0 1.05rem;padding-left:1.25rem}
.prose li{margin:.36rem 0;color:var(--sand-2)}

.prose blockquote{
  margin:1.3rem 0;
  padding:.85rem 1.1rem;
  border-left:3px solid var(--clay);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--glass);
}

.prose img{
  margin:1.1rem 0;
  border-radius:var(--r);
  border:1px solid var(--line);
  height:auto;
}

.prose table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  font-size:16px;
}

.prose pre{
  max-width:100%;
  overflow-x:auto;
  padding:.85rem 1rem;
  border-radius:var(--r);
  background:rgba(0,0,0,.3);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:15px;
}

/* 右侧目录 */
.rail{
  position:sticky;
  top:130px;
  padding:1rem .9rem 1.1rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.rail-t{
  margin:.15rem 0 .7rem;
  font-size:16px;
  letter-spacing:.2em;
  color:var(--jade);
}

.rail ul{list-style:none;margin:0;padding:0;display:grid;gap:.12rem}

.rail a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.5rem .6rem;
  border-left:2px solid transparent;
  border-radius:0 var(--r) var(--r) 0;
  text-decoration:none;
  color:var(--sand-2);
  font-size:16px;
  line-height:1.5;
  transition:color .2s ease-out,background .2s ease-out,border-color .2s ease-out,transform .2s ease-out;
}

.rail a:hover,
.rail a.on{
  color:var(--sand);
  background:rgba(92,198,176,.09);
  border-left-color:var(--jade);
  transform:translateX(2px);
}

.rail li:nth-child(2) a{transition-delay:.02s}
.rail li:nth-child(3) a{transition-delay:.04s}
.rail li:nth-child(4) a{transition-delay:.06s}
.rail li:nth-child(5) a{transition-delay:.08s}
.rail li:nth-child(6) a{transition-delay:.1s}
.rail li:nth-child(7) a{transition-delay:.12s}

/* 页脚 */
.site-foot{
  display:grid;
  grid-template-columns:1.35fr .8fr .8fr 1.4fr;
  gap:1.3rem 1.6rem;
  padding:clamp(1.9rem,5vw,3rem) max(var(--pad),calc((100% - var(--max)) / 2)) 1.4rem;
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(29,48,44,.45),rgba(19,31,29,.85));
}

.site-foot > *{min-width:0}

.f-brand{
  margin:0;
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;
  font-size:1.24rem;
  line-height:1.5;
  color:var(--sand);
}

.f-col{margin:0;display:flex;flex-direction:column}

.f-col a{
  display:block;
  padding:.45rem 0;
  min-height:40px;
  text-decoration:none;
  color:var(--sand-2);
  font-size:16px;
  line-height:1.6;
  transition:color .2s ease-out,transform .2s ease-out;
}

.f-col a:hover{color:var(--jade);transform:translateX(2px)}

.f-form{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}

.f-form label{font-size:16px;color:var(--sand-2)}

.sub-input{
  flex:1 1 120px;
  min-width:0;
  min-height:44px;
  padding:.6rem .7rem;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:rgba(0,0,0,.24);
  color:var(--sand);
  font-family:inherit;
  font-size:16px;
}

.sub-input:focus{
  outline:none;
  border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(92,198,176,.16);
}

.sub-btn{
  min-height:44px;
  padding:.6rem 1.05rem;
  border:0;
  border-radius:var(--r);
  background:linear-gradient(150deg,var(--jade),#3c9c8a);
  color:#10201d;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease-out,filter .2s ease-out;
}

.sub-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sub-btn[disabled]{opacity:.6;cursor:default;transform:none}

.f-base{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.4rem 1rem;
  margin-top:.5rem;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  font-size:16px;
  color:var(--sand-2);
}

.f-base a{
  display:inline-block;
  padding:.45rem 0;
  min-height:40px;
  color:var(--sand-2);
  text-decoration:none;
}

.f-base a:hover{color:var(--jade)}

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

@media (max-width:960px){
  .hero{grid-template-columns:1fr;min-height:0;gap:1.6rem}
  .hero-pic{aspect-ratio:16/10;min-height:0}
  .wrap{grid-template-columns:1fr}
  .rail{position:static;top:auto}
  .prose > article{scroll-margin-top:120px}
}

@media (max-width:760px){
  .strip p{letter-spacing:.08em}
  .site-top nav{
    flex:1 0 100%;
    width:100%;
    min-width:0;
    max-width:100%;
    margin-left:0;
    border-top:1px solid var(--line);
  }
  .site-top nav ul{
    flex-wrap:nowrap;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0;
    padding:0;
  }
  .site-top nav ul::-webkit-scrollbar{display:none}
  .site-top nav a{padding:.72rem .58rem}
  .site-foot{grid-template-columns:1fr 1fr}
  .f-base{flex-direction:column;align-items:flex-start}
}

@media (max-width:600px){
  .strip{display:none}
  .site-foot{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.1rem,10vw,3rem)}
  .f-col{flex-direction:row;flex-wrap:wrap;gap:0 1rem}
}

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

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