/* RESET & BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  background:#FAF8F4;
  color:#2c2c2c;
  line-height:1.85;
  min-height:100vh;
  display:flex;flex-direction:column;
}
a{color:#D97706;text-decoration:none;transition:color .2s}
a:hover{color:#b45309}

/* NAV */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,244,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid #e8e3d8;
  padding:0 2rem;
}
.nav-inner{
  max-width:720px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;
}
.nav-brand{
  display:flex;align-items:center;gap:8px;
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:1.15rem;font-weight:700;color:#2c2c2c;
}
.nav-brand:hover{color:#D97706}
.nav-logo{width:28px;height:28px;flex-shrink:0}
.nav-links{
  display:flex;align-items:center;gap:4px;
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:.875rem;list-style:none;
}
.nav-link{
  color:#6b6b6b;padding:6px 14px;border-radius:6px;
  transition:color .2s,background .2s;
}
.nav-link:hover,.nav-link.active{color:#D97706;background:#f5f0e6}
.nav-toggle{
  display:none;background:none;border:none;
  cursor:pointer;padding:8px;color:#2c2c2c;
}
.nav-toggle svg{width:22px;height:22px}

/* MAIN */
.main{
  flex:1;max-width:720px;width:100%;
  margin:0 auto;padding:2.5rem 2rem 4rem;
}

/* HERO */
.hero{
  text-align:center;padding:3.5rem 0 2.5rem;
  border-bottom:1px solid #e8e3d8;margin-bottom:2.5rem;
}
.hero-sub{padding:2rem 0 1.5rem}
.hero h1{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:2rem;font-weight:800;letter-spacing:.04em;
}
.hero .slogan{
  font-family:"Noto Serif SC","Source Han Serif SC",serif;
  font-size:1.05rem;color:#8b8b8b;font-style:italic;
  margin-top:.5rem;
}
.hero .desc{
  margin-top:1rem;font-size:.9rem;color:#a3a3a3;
  max-width:420px;margin-left:auto;margin-right:auto;line-height:1.7;
}

/* FILTER */
.filter-bar{
  display:flex;align-items:center;gap:8px;
  margin-bottom:2rem;flex-wrap:wrap;
}
.filter-bar .label{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.8rem;color:#a3a3a3;margin-right:4px;
}
.filter-btn{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.8rem;padding:5px 16px;
  border:1px solid #e0dbd0;border-radius:20px;
  color:#6b6b6b;transition:all .2s;
  display:inline-block;
}
.filter-btn:hover{border-color:#D97706;color:#D97706}
.filter-btn.active{background:#D97706;color:#fff;border-color:#D97706}

/* ARTICLE CARDS */
.articles{display:flex;flex-direction:column;gap:1.5rem}
.article-card{
  background:#fff;border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition:box-shadow .2s,transform .2s;
  border:1px solid #f0ece4;
}
.article-card-link{
  display:block;padding:1.5rem 1.75rem;color:inherit;
}
.article-card:hover{
  box-shadow:0 4px 20px rgba(0,0,0,.07);
  transform:translateY(-1px);
}
.article-card .meta{
  display:flex;align-items:center;gap:12px;
  margin-bottom:.5rem;flex-wrap:wrap;
}
.article-card .date{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.78rem;color:#b0b0b0;
}
.cat-tag{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.72rem;padding:2px 10px;border-radius:12px;font-weight:500;
}
.cat-tag.zhe-teng{background:#fef3c7;color:#92400e}
.cat-tag.ri-chang{background:#e0f2fe;color:#075985}
.cat-tag.du-shu{background:#f3e8ff;color:#6b21a8}
.article-card h2{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:1.15rem;font-weight:700;
  margin-bottom:.4rem;line-height:1.5;
}
.article-card .excerpt{
  font-size:.9rem;color:#8b8b8b;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ARTICLE DETAIL */
.article-detail{padding-top:1rem}
.back-link{
  display:inline-flex;align-items:center;gap:4px;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.85rem;color:#a3a3a3;margin-bottom:2rem;
}
.back-link:hover{color:#D97706}
.article-detail h1{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:1.6rem;font-weight:800;line-height:1.45;
  margin-bottom:.75rem;color:#1a1a1a;
}
.art-meta{
  display:flex;align-items:center;gap:12px;
  margin-bottom:2.5rem;flex-wrap:wrap;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.8rem;color:#b0b0b0;
}
.art-body{font-size:1rem;line-height:2}
.art-body p{margin-bottom:1.25rem}
.art-body h2{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:1.2rem;font-weight:700;margin:2rem 0 .75rem;color:#1a1a1a;
}
.art-body h3{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:1.05rem;font-weight:600;margin:1.5rem 0 .5rem;
}
.art-body ul,.art-body ol{margin:0 0 1.25rem 1.5rem}
.art-body li{margin-bottom:.4rem}
.art-body code{
  font-family:"JetBrains Mono","Fira Code","Cascadia Code",Consolas,monospace;
  font-size:.88rem;background:#f5f0e6;padding:2px 6px;
  border-radius:4px;color:#92400e;
}
.art-body pre{
  background:#1e1e1e;color:#e0e0e0;
  padding:1.25rem 1.5rem;border-radius:8px;
  overflow-x:auto;margin:1rem 0 1.5rem;
  font-family:"JetBrains Mono","Fira Code","Cascadia Code",Consolas,monospace;
  font-size:.85rem;line-height:1.7;
}
.art-body pre code{background:transparent;padding:0;color:inherit;font-size:inherit}
/* 长代码块折叠：is-folded 时 pre 限高 360px，底部渐隐，按钮展开/收起 */
.code-fold{position:relative;margin:1rem 0 1.5rem}
.code-fold pre{margin:0}
.code-fold.is-folded pre{max-height:360px;overflow:hidden}
.code-fold.is-folded::before{content:"";position:absolute;top:250px;left:0;right:0;height:110px;
  background:linear-gradient(to bottom,rgba(30,30,30,0),#1e1e1e);pointer-events:none;border-radius:0 0 8px 8px}
.code-fold-btn{display:block;width:100%;padding:.55rem 0;background:#2a2a2a;color:#c9a227;
  border:none;border-radius:0 0 8px 8px;font-size:.82rem;letter-spacing:.05em;cursor:pointer}
.code-fold-btn:hover{background:#333;color:#e0b53f}
.art-body blockquote{
  border-left:3px solid #D97706;padding:.5rem 1rem;
  margin:1.25rem 0;color:#6b6b6b;font-style:italic;
  background:#fdfaf5;
}
/* 正文配图：居中、限宽、与卡片风格协调（配图放 static/images/，md 里用 /images/xx.jpg 引用） */
.art-body img{
  display:block;
  max-width:100%;
  height:auto;
  margin:1.75rem auto;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

/* FOOTER */
.footer{
  text-align:center;padding:1.5rem 2rem 3rem;
  border-top:1px solid #e8e3d8;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.78rem;color:#c5c0b5;
}
.footer a{color:#c5c0b5}
.footer a:hover{color:#D97706}

/* FOOTER QUOTE：页脚随机一条语录（语料与 Kindle 名言屏同源, /quotes.json + JS 每次加载随机） */
.footer-quote{
  max-width:640px;margin:0 auto 1.1rem;
  font-family:"Noto Serif SC","Songti SC",SimSun,serif;
  font-size:.86rem;line-height:1.9;color:#8a857a;
}
.footer-quote .fq-badge{
  display:block;margin-bottom:.35rem;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.68rem;letter-spacing:.12em;
  color:#D97706;
}
.footer-quote .fq-cn{display:block;font-size:.78rem;color:#a09a8e;margin-top:.15rem}
.footer-quote .fq-s{display:block;font-size:.75rem;color:#c5c0b5;margin-top:.3rem}

/* RESPONSIVE */
@media(max-width:640px){
  .nav{padding:0 1rem}
  .nav-links{
    display:none;position:absolute;top:56px;left:0;right:0;
    background:rgba(250,248,244,.98);
    backdrop-filter:blur(8px);
    flex-direction:column;padding:.5rem 1rem 1rem;
    border-bottom:1px solid #e8e3d8;gap:2px;
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .main{padding:1.5rem 1rem 3rem}
  .hero{padding:2rem 0 1.5rem}
  .hero h1{font-size:1.6rem}
  .article-card-link{padding:1.25rem}
  .article-detail h1{font-size:1.35rem}
}