:root{
  --ink:#121816;
  --muted:#5d6a64;
  --paper:#f4f7f6;
  --jade:#2f6f5e;
  --jade-soft:#d7e6e0;
  --pearl:#ffffff;
  --champagne:#c2a978;
  --line:rgba(18,24,22,.08);
  --shadow:0 22px 50px rgba(18,24,22,.08);
  --serif:"Cormorant Garamond","Noto Serif SC","Songti SC",serif;
  --sans:"Manrope","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(100% - 2rem,var(--max));margin-inline:auto}
.page-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(800px 420px at 0% 0%,rgba(47,111,94,.14),transparent 60%),
    radial-gradient(680px 420px at 100% 10%,rgba(194,169,120,.14),transparent 55%),
    linear-gradient(180deg,#f7faf9 0%,#eef3f1 48%,#e8efec 100%);
}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(244,247,246,.82);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-mark{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(145deg,var(--jade),#79a897 55%,var(--champagne));
  box-shadow:0 0 0 4px rgba(47,111,94,.1);
}
.brand-text{
  font-family:var(--serif);
  font-size:1.45rem;
  letter-spacing:.12em;
  font-weight:600;
}
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.site-nav a{
  font-size:.92rem;color:var(--muted);
  position:relative;padding:.25rem 0;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--jade);transition:right .25s ease;
}
.site-nav a:hover::after{right:0}
.nav-toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}
.hero{
  position:relative;min-height:min(88vh,760px);
  display:grid;align-items:end;overflow:hidden;
}
.hero-visual{
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(18,24,22,.62),rgba(18,24,22,.2) 48%,rgba(18,24,22,.42)),
    url("/assets/img/hero.svg") center/cover no-repeat;
  animation:heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:scale(1.02)}
  to{transform:scale(1.07) translate3d(-1%,-1%,0)}
}
.hero-content{
  position:relative;z-index:1;color:#f4f8f6;
  padding:5rem 0 4rem;
  animation:fadeUp .9s ease both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.hero-brand{
  font-family:var(--serif);
  letter-spacing:.38em;
  font-size:.88rem;
  color:rgba(244,248,246,.84);
  margin:0 0 1rem;
}
.hero-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem,5vw,3.55rem);
  line-height:1.18;
  max-width:11.5em;
  margin:0 0 1rem;
}
.hero-sub{
  max-width:28em;margin:0 0 1.75rem;
  color:rgba(244,248,246,.88);font-size:1.05rem;
}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 1.35rem;border-radius:999px;
  border:1px solid transparent;font-size:.95rem;transition:.25s ease;
}
.btn-primary{background:#f4f8f6;color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{border-color:rgba(244,248,246,.45);color:#f4f8f6}
.btn-ghost:hover{background:rgba(244,248,246,.1)}
.section{padding:4.5rem 0}
.section-alt{background:rgba(255,255,255,.42)}
.section-head{margin-bottom:2rem;max-width:36rem}
.section-head h2,.list-head h1,.article-head h1{
  font-family:var(--serif);font-weight:500;letter-spacing:.02em;margin:0 0 .6rem;
  font-size:clamp(1.65rem,3vw,2.25rem);
}
.section-head p,.list-head p{margin:0;color:var(--muted)}
.article-grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(3,1fr);
}
.article-item{
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  padding:1.35rem 1.25rem 1.2rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.article-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.article-item h3{
  font-family:var(--serif);font-size:1.18rem;line-height:1.45;margin:0 0 .7rem;font-weight:500;
}
.article-item p{margin:0 0 .9rem;color:var(--muted);font-size:.92rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-item time{font-size:.8rem;color:var(--jade);letter-spacing:.04em}
.hot-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.hot-list li{display:flex;gap:1rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line)}
.hot-num{font-family:var(--serif);color:var(--jade);font-size:1.1rem;min-width:2rem}
.hot-list a:hover{color:var(--jade)}
.list-page{padding:2.5rem 0 4rem}
.list-head{margin-bottom:2rem}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;color:var(--champagne);font-size:.75rem;margin:0 0 .6rem}
.article-list{display:grid;gap:1rem}
.list-item{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.list-item h2{font-family:var(--serif);font-size:1.25rem;margin:0 0 .5rem;font-weight:500}
.list-item p{margin:0 0 .4rem;color:var(--muted);font-size:.95rem}
.list-item time{font-size:.8rem;color:var(--jade)}
.list-item a:hover h2{color:var(--jade)}
.pagination{display:flex;gap:1rem;align-items:center;justify-content:center;margin-top:2.5rem}
.pagination a{padding:.45rem 1rem;border:1px solid var(--line);border-radius:999px}
.pagination a:hover{border-color:var(--jade);color:var(--jade)}
.article-layout{padding:2rem 0 4rem}
.article-grid-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:2.5rem;
  align-items:start;
}
.article-main{min-width:0;max-width:760px}
.article-aside{
  position:sticky;top:88px;
  display:grid;gap:1.25rem;
}
.aside-block{
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);
  padding:1.1rem 1rem 1rem;
}
.aside-block h2{
  font-family:var(--serif);font-size:1.15rem;margin:0 0 .85rem;font-weight:500;
  padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.aside-block ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.aside-block a{
  display:block;padding:.4rem 0;font-size:.92rem;line-height:1.45;
  border-bottom:1px dashed var(--line);color:var(--ink);
}
.aside-block a:hover{color:var(--jade)}
.aside-topics a{
  display:inline-block;border:1px solid var(--line);border-bottom-style:solid;
  padding:.28rem .7rem;margin:0 .35rem .45rem 0;font-size:.86rem;
  background:rgba(255,255,255,.65);
}
.aside-topics ul{display:block}
.aside-topics li{display:inline}
.aside-topics a:hover{border-color:var(--jade);color:var(--jade)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;color:var(--muted);font-size:.85rem;margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--jade)}
.article-meta{color:var(--muted);font-size:.9rem;margin-bottom:1.75rem}
.article-meta .dot{margin:0 .35rem}
.article-body{font-size:1.05rem;color:#1d2622}
.article-body p{margin:0 0 1.15rem}
.article-body h2,.article-body h3{font-family:var(--serif);margin:1.8rem 0 .8rem;font-weight:500}
.article-body img{border-radius:2px;margin:1rem 0}
.article-body a{color:var(--jade);text-decoration:underline;text-underline-offset:3px}
.site-footer{padding:3rem 0;border-top:1px solid var(--line);text-align:center}
.footer-brand{font-family:var(--serif);font-size:1.4rem;letter-spacing:.14em;margin-bottom:.4rem}
.footer-desc,.footer-icp,.footer-copy{margin:.25rem 0;color:var(--muted);font-size:.9rem}
.footer-icp a:hover{color:var(--jade)}
.empty{color:var(--muted);padding:2rem 0}
@media (max-width:900px){.article-grid{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  .article-grid-detail{grid-template-columns:1fr;gap:1.75rem}
  .article-aside{position:static}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:72px;
    background:rgba(244,247,246,.98);padding:1rem 1.25rem 1.25rem;
    border-bottom:1px solid var(--line);flex-direction:column;gap:.85rem;
  }
  .site-nav.open{display:flex}
  .article-grid{grid-template-columns:1fr}
  .hero{min-height:78vh}
  .header-inner{position:relative}
  /* 手机端面包屑不显示文章标题（兼容已生成静态页） */
  .breadcrumb .crumb-current,
  .breadcrumb > :last-child,
  .breadcrumb > :nth-last-child(2){display:none}
}