/*
Theme Name: 吴丽玉婚姻家事法律科普
Theme URI: https://fzlhls.com
Author: 吴丽玉
Description: 温润杂志风婚姻家事法律科普博客。低饱和度配色 / Noto Serif 标题 / 阅读进度条 / 毛玻璃导航。
Version: 3.9
License: GPL v2 or later
Text Domain: wuliyu-blog
*/

/* ==============================================
   1. DESIGN TOKENS
   ============================================== */
:root {
  /* Warm paper palette */
  --bg:          #faf8f5;
  --bg-card:     #ffffff;
  --bg-hover:    #f5f2ee;
  --bg-soft:     #f5f0ea;   /* warm beige for alternating sections */

  /* Text */
  --tx:          #2d2723;
  --tx-mid:      #5c5550;
  --tx-dim:      #9e9590;
  --tx-heading:  #1a1511;

  /* Accent — warm copper / terracotta */
  --accent:      #a05a2c;
  --accent-btn:  #7a4a2a;
  --accent-lite: #e8d5c4;

  /* Secondary accent — sage green (categories, tags) */
  --sage:        #5b7b5e;
  --sage-lite:   #e2ece3;

  /* Borders & dividers */
  --border:      #e6ddd4;
  --divider:     #efe8e0;

  /* Shadows */
  --sh-sm:       0 1px 2px rgba(60,30,10,.04);
  --sh-md:       0 4px 18px rgba(60,30,10,.06);
  --sh-lg:       0 8px 36px rgba(60,30,10,.08);

  /* Typography */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, serif;

  /* Radii */
  --r:     10px;
  --r-sm:  6px;
  --r-pill: 20px;
}

/* ==============================================
   2. RESET & BASE
   ============================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:16px;line-height:1.75;
  color:var(--tx);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .25s}
a:hover{color:var(--accent-btn)}
::selection{background:var(--bg-soft);color:var(--tx)}
ul,ol{padding-left:1.5em}

.container{max-width:860px;margin:0 auto;padding:0 24px}
.container-wide{max-width:1200px;margin:0 auto;padding:0 24px}

/* ==============================================
   3. READING PROGRESS BAR
   ============================================== */
#reading-progress{
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:var(--accent);width:0;transition:width .1s linear;
  border-radius:0 2px 0 0;
}

/* ==============================================
   4. HEADER
   ============================================== */
.site-header{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  position:sticky;top:0;z-index:100;
  transition:all .35s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 8px rgba(60,30,10,.04);
  border-bottom-color:var(--border);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .35s ease;
}
.site-header.scrolled .header-inner{padding:12px 24px}

.site-branding{display:flex;align-items:baseline;gap:12px}
.site-title{
  font-family:var(--serif);font-size:20px;font-weight:700;color:var(--tx-heading);
  letter-spacing:1px;transition:font-size .35s;
}
.site-header.scrolled .site-title{font-size:18px}
.site-title a{color:var(--tx-heading)}
.site-title a:hover{color:var(--accent)}
.site-desc{font-size:12px;color:var(--tx-dim);display:none}
@media(min-width:768px){.site-desc{display:block}}

.main-nav ul{list-style:none;display:flex;gap:28px;padding:0}
.main-nav a{
  font-size:14px;font-weight:500;color:var(--tx-mid);
  padding:4px 0;position:relative;transition:color .25s;
}
.main-nav a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;
  background:var(--accent);border-radius:1px;
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.main-nav a:hover,.main-nav .current-menu-item a{color:var(--accent)}
.main-nav a:hover::after,.main-nav .current-menu-item a::after{width:100%}
.menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--tx);padding:4px 8px}

/* ── header search ── */
.header-inner{position:relative}
.search-toggle{background:none;border:none;font-size:16px;cursor:pointer;color:var(--tx-mid);padding:4px 8px;transition:color .2s}
.search-toggle:hover{color:var(--accent)}
.search-dropdown{position:absolute;top:100%;right:24px;width:320px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:99}
.search-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.search-dropdown .search-form{max-width:none}
@media(max-width:600px){.search-dropdown{right:12px;width:calc(100% - 24px)}}

/* ==============================================
   5. HERO V2 — 双栏合并版（左简介 + 右统计）
   ============================================== */
.hero-v2{background:linear-gradient(180deg, #f7f4ef 0%, var(--bg) 100%);padding:48px 0 36px}
.hero-v2-grid{display:flex;gap:48px;align-items:center}
@media(max-width:700px){.hero-v2-grid{flex-direction:column;gap:24px;text-align:center}}
.hero-v2-left{flex:1;min-width:0}
.hero-v2-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;margin-bottom:16px;background:var(--divider);border:3px solid var(--accent-lite)}
.hero-v2-avatar img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.hero-v2-avatar{margin:0 auto 16px}}
.hero-v2-name{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--tx-heading);margin-bottom:4px}
.hero-v2-subtitle{font-size:15px;color:var(--tx-mid);margin-bottom:8px}
.hero-v2-bio{font-size:13px;color:var(--tx-dim);line-height:1.7;max-width:480px}
.hero-v2-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero-v2-right{flex-shrink:0;display:flex;gap:20px}
.hero-v2-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-stat{
  text-align:center;padding:18px 20px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--sh-sm);min-width:90px;
}
.hero-stat-num{
  display:block;font-family:var(--serif);font-size:26px;font-weight:700;
  color:var(--accent);margin-bottom:4px;line-height:1;
}
.hero-stat-label{font-size:11px;color:var(--tx-dim);text-transform:uppercase;letter-spacing:0.5px}

/* ==============================================
   5.5 TOPICS — 科普方向卡片 (六主题入口)
   ============================================== */
.topics{padding:64px 0 32px;background:var(--bg-soft)}
.section-header-center{text-align:center;margin-bottom:40px}
.section-header-num{
  display:block;font-family:var(--serif);font-size:13px;font-weight:700;
  color:var(--accent);opacity:.5;margin-bottom:8px;letter-spacing:2px;
}
.topics-title{
  font-family:var(--serif);font-size:26px;font-weight:700;
  color:var(--tx-heading);margin-bottom:6px;
}
.topics-title::after{
  content:'';display:block;width:30px;height:2px;background:var(--accent);
  margin:10px auto 0;border-radius:1px;
}
.topics-subtitle{
  color:var(--tx-mid);font-size:13px;margin-top:10px;
}
.topic-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.topic-grid{grid-template-columns:1fr}}

.topic-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  padding:32px 24px 26px;text-align:center;color:var(--tx);
  transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;
  display:flex;flex-direction:column;align-items:center;
}
.topic-card:hover{
  border-color:var(--accent);box-shadow:0 8px 24px rgba(160,90,44,.12);
  transform:translateY(-4px);
}

.topic-icon{
  position:relative;width:56px;height:56px;display:flex;align-items:center;
  justify-content:center;color:var(--accent);margin-bottom:14px;
}
.topic-icon-bg{
  position:absolute;inset:0;background:var(--bg-soft);
  transform:rotate(45deg);border-radius:4px;transition:background .35s;
}
.topic-icon svg{position:relative;z-index:1;width:24px;height:24px}
.topic-card:hover .topic-icon-bg{background:var(--accent-lite)}

.topic-name{
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--tx-heading);
  margin-bottom:8px;
}
.topic-underline{
  width:28px;height:2px;background:var(--accent);border-radius:1px;margin-bottom:12px;
}
.topic-desc{font-size:12.5px;color:var(--tx-mid);line-height:1.7;margin-bottom:2px}
.topic-sub{font-size:12.5px;color:var(--tx-mid);line-height:1.7;margin-bottom:0}

/* ==============================================
   5.6 LATEST — 最新动态时间线式列表
   ============================================== */
.latest-section{padding:64px 0 48px;background:var(--bg)}
.latest-header{
  display:flex;align-items:flex-start;gap:16px;margin-bottom:40px;
}
.latest-header-num{
  font-family:var(--serif);font-size:36px;font-weight:700;
  color:var(--accent);opacity:.25;line-height:1;
}
.latest-header-body{flex:1;padding-top:4px}
.latest-title-left{
  font-family:var(--serif);font-size:26px;font-weight:700;
  color:var(--tx-heading);margin-bottom:6px;
}
.latest-title-left::after{
  content:'';display:block;width:30px;height:2px;background:var(--accent);
  margin:10px 0 0;border-radius:1px;
}
.latest-subtitle-left{
  color:var(--tx-mid);font-size:13px;margin-top:10px;
}

/* ── Featured article (first item) ── */
.latest-featured{margin-bottom:24px}
.latest-featured__inner{
  display:flex;gap:28px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;transition:all .35s;
  box-shadow:var(--sh-sm);text-decoration:none;color:inherit;
}
.latest-featured__inner:hover{border-color:var(--accent);box-shadow:var(--sh-lg);transform:translateY(-2px)}
.latest-featured__img{flex-shrink:0;width:340px;max-height:220px;overflow:hidden;background:var(--divider)}
.latest-featured__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.latest-featured__inner:hover .latest-featured__img img{transform:scale(1.04)}
.latest-featured__body{flex:1;padding:24px 28px 24px 0;display:flex;flex-direction:column;justify-content:center}
.latest-featured__title{
  font-family:var(--serif);font-size:20px;font-weight:700;color:var(--tx-heading);
  line-height:1.4;margin:10px 0 12px;
}
.latest-featured__excerpt{font-size:14px;color:var(--tx-mid);line-height:1.7;flex:1;margin-bottom:12px}
.latest-featured__meta{font-size:12px;color:var(--tx-dim)}
@media(max-width:700px){
  .latest-featured__inner{flex-direction:column}
  .latest-featured__img{width:100%;max-height:180px}
  .latest-featured__body{padding:16px 20px 20px}
}

/* ── Remaining articles grid ── */
.latest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:40px}
@media(max-width:768px){.latest-grid{grid-template-columns:1fr}}

.latest-item{
  display:flex;gap:18px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:18px 22px;transition:all .35s;
}
.latest-item:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(160,90,44,.08);transform:translateY(-2px)}

.latest-badge{
  flex-shrink:0;width:64px;height:64px;border-radius:8px;background:var(--accent);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;transition:all .3s;
}
.latest-badge:hover{background:var(--accent-btn)}
.latest-day{font-family:var(--serif);font-size:22px;font-weight:700;line-height:1;letter-spacing:1px}
.latest-month{font-size:10px;opacity:.9;margin-top:2px}

.latest-body{flex:1;min-width:0}
.latest-name{font-family:var(--serif);font-size:15px;font-weight:700;line-height:1.4;margin-bottom:6px;color:var(--tx-heading)}
.latest-name a{color:var(--tx-heading)}
.latest-name a:hover{color:var(--accent)}
.latest-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx-dim)}
.latest-meta .cat-pill{font-size:9.5px;padding:2px 10px}

.friend-links{
  text-align:center;padding-top:24px;border-top:1px solid var(--border);
  font-size:12px;color:var(--tx-dim);
}
.friend-label{color:var(--tx-mid);font-weight:600;margin-right:8px}
.friend-links a{color:var(--tx-mid);margin:0 4px;transition:color .2s}
.friend-links a:hover{color:var(--accent)}
.friend-sep{margin:0 6px;color:var(--tx-dim)}

/* ==============================================
   5.7 CASES — 以案说法（深色 banner + 案例卡片）
   ============================================== */
.cases{padding:0 0 56px;background:var(--bg)}
.cases-hero{
  background:linear-gradient(135deg,#2d2420 0%,#3a2e28 60%,#3a2e28 100%);
  padding:56px 0 48px;margin-bottom:32px;color:#fff;
  position:relative;overflow:hidden;
}
.cases-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(180,120,70,.16), transparent 50%);
  pointer-events:none;
}
.cases-hero-inner{position:relative;z-index:1}
.cases-hero-num{
  display:block;font-family:var(--serif);font-size:13px;font-weight:700;
  color:rgba(255,255,255,.35);margin-bottom:10px;letter-spacing:2px;
}
.cases-breadcrumb{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:14px}
.cases-breadcrumb a{color:rgba(255,255,255,.7)}
.cases-breadcrumb a:hover{color:var(--accent-lite)}
.cases-title{
  font-family:var(--serif);font-size:30px;font-weight:700;color:#fff;
  letter-spacing:4px;margin-bottom:8px;
}
.cases-tagline{font-size:13px;color:rgba(255,255,255,.65);letter-spacing:1px}

.cases-intro{text-align:center;color:var(--tx-mid);font-size:13px;margin-bottom:24px}

.cases-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media(max-width:900px){.cases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cases-grid{grid-template-columns:1fr}}

.case-card{
  background:var(--bg-card);border-radius:10px;overflow:hidden;
  text-align:center;color:var(--tx);text-decoration:none;
  display:flex;flex-direction:column;align-items:stretch;
  box-shadow:0 1px 2px rgba(60,30,10,.04);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  border:1px solid var(--border);
}
.case-card:hover{box-shadow:0 10px 28px rgba(60,30,10,.10);transform:translateY(-3px);border-color:var(--accent-lite)}

/* ── 案例封面图（有特色图时显示） ── */
.case-cover{
  position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
  background:var(--divider);
}
.case-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.case-card:hover .case-cover img{transform:scale(1.04)}

/* ── 占位图：按分类着色 ── */
.case-cover--placeholder{display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:2px;text-shadow:0 1px 3px rgba(0,0,0,.18)}
.case-cover--placeholder::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18),transparent 55%);
  pointer-events:none;
}
.case-cover__label{position:relative;z-index:1}
.case-cover--xieyi-lihun{background:linear-gradient(135deg,#a05a2c 0%,#c97a45 100%)}
.case-cover--hunqian-caichan{background:linear-gradient(135deg,#7a5c3a 0%,#b08856 100%)}
.case-cover--zinv-fuyang{background:linear-gradient(135deg,#8b5a3c 0%,#c08262 100%)}

/* 默认兜底（未识别分类） */
.case-cover--default{background:linear-gradient(135deg,var(--accent) 0%,#c97a45 100%)}

/* ── 卡片正文 ── */
.case-body{padding:18px 22px 22px;display:flex;flex-direction:column;align-items:center}
.case-name{
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--tx-heading);
  line-height:1.5;margin-bottom:8px;
}
.case-name:hover{color:var(--accent)}
.case-divider{width:28px;height:1px;background:#d8d0c8;margin:6px 0 10px}
.case-cat{font-size:12px;color:var(--tx-mid);margin:0 0 4px;line-height:1.6}
.case-court{font-size:11px;color:var(--tx-dim);margin:0}

.case-icon{display:none}    /* 旧版图标已弃用 */

.case-name{
  font-family:var(--serif);font-size:14px;font-weight:700;color:var(--tx-heading);
  line-height:1.45;margin-bottom:8px;
}
.case-divider{width:28px;height:1px;background:#d8d0c8;margin:10px 0 12px}
.case-cat{font-size:12px;color:var(--tx-mid);margin:0 0 4px;line-height:1.6}
.case-court{font-size:11px;color:var(--tx-dim);margin:0}

/* ── cases page banner tweak ── */
.cases-hero-page{margin-bottom:0}

/* ==============================================
   5.8 CASE FILTER & LIST — 以案说法筛选页
   ============================================== */
.case-filter-bar{
  background:var(--bg-card);border-bottom:1px solid var(--border);
  padding:20px 0;position:sticky;top:58px;z-index:90;
  backdrop-filter:blur(8px);background:rgba(255,255,255,.92);
}
.case-filter-inner{
  display:flex;flex-wrap:wrap;gap:10px;
}

.case-filter-btn{
  padding:7px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--tx-mid);
  background:var(--bg);border:1px solid var(--border);
  cursor:pointer;transition:all .25s;font-family:var(--sans);
  white-space:nowrap;
}
.case-filter-btn:hover{
  border-color:var(--accent);color:var(--accent);
}
.case-filter-btn.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 2px 8px rgba(160,90,44,.25);
}

/* ── article list ── */
.case-list-section{padding:32px 0 56px}
.case-list{
  display:flex;flex-direction:column;gap:16px;
}

/* 文字卡片（无图） */
.case-list-body{padding:22px 26px}
@media(max-width:600px){
  .case-list-body{padding:18px 20px}
}

.case-list-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:0;overflow:hidden;
  transition:all .35s;box-shadow:var(--sh-sm);
}
.case-list-item:hover{
  border-color:var(--accent-lite);box-shadow:var(--sh-md);
  transform:translateY(-1px);
}

.case-list-tag{
  display:inline-block;padding:3px 12px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:.5px;
  color:var(--sage);background:var(--sage-lite);
  margin-bottom:10px;
}

.case-list-title{
  font-family:var(--serif);font-size:18px;font-weight:700;
  line-height:1.5;color:var(--tx-heading);margin-bottom:8px;
}
.case-list-title a{color:var(--tx-heading)}
.case-list-title a:hover{color:var(--accent)}

.case-list-excerpt{
  font-size:14px;color:var(--tx-mid);line-height:1.7;
  margin-bottom:10px;
}

.case-list-meta{
  font-size:12px;color:var(--tx-dim);
  display:flex;align-items:center;gap:8px;
}

@media(max-width:600px){
  .case-filter-inner{gap:8px}
  .case-filter-btn{padding:6px 14px;font-size:12px}
  .case-list-title{font-size:16px}
}

.cat-pill{
  display:inline-block;padding:4px 14px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--sage);background:var(--sage-lite);
  transition:all .25s;
}
a.cat-pill:hover{color:#fff;background:var(--sage)}

/* ==============================================
   7. BLOG CARD GRID
   ============================================== */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0 56px;
}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}

.post-card{
  background:var(--bg-card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:box-shadow .4s,transform .4s cubic-bezier(.4,0,.2,1);
}
.post-card:hover{box-shadow:var(--sh-lg);transform:translateY(-4px)}

/* ── card image ── */
.post-card__thumb{
  position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--divider);
}
.post-card__thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.post-card:hover .post-card__thumb img{transform:scale(1.05)}

/* image overlay on hover */
.post-card__thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.3) 0%,transparent 60%);
  opacity:0;transition:opacity .4s;
}
.post-card:hover .post-card__thumb::after{opacity:1}

/* pill on image */
.post-card__pill{
  position:absolute;top:12px;left:12px;z-index:2;
}

/* read-time on image bottom */
.post-card__read{
  position:absolute;bottom:12px;right:12px;z-index:2;
  font-size:11px;color:rgba(255,255,255,.85);font-weight:500;
  opacity:0;transition:opacity .4s;
}
.post-card:hover .post-card__read{opacity:1}

/* ── card body ── */
.post-card__body{padding:20px;flex:1;display:flex;flex-direction:column}
.post-card__title{
  font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.45;
  margin:10px 0 8px;color:var(--tx-heading);
}
.post-card__title a{color:var(--tx-heading)}
.post-card__title a:hover{color:var(--accent)}
.post-card__excerpt{font-size:13px;color:var(--tx-mid);line-height:1.65;flex:1}
.post-card__meta{
  font-size:11px;color:var(--tx-dim);margin-top:14px;
  padding-top:12px;border-top:1px solid var(--divider);
  display:flex;align-items:center;gap:8px;
}

/* ==============================================
   8. SINGLE POST PAGE
   ============================================== */
.single-main{padding:48px 0 0}
.single-header{margin-bottom:32px}

.single-header .cat-pill{margin-bottom:14px}

.single-header h1{
  font-family:var(--serif);font-size:34px;font-weight:700;
  line-height:1.35;color:var(--tx-heading);margin-bottom:16px;
}
.single-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  font-size:13px;color:var(--tx-dim);padding-bottom:28px;
  border-bottom:2px solid var(--divider);
}
.single-meta .m-item{display:inline-flex;align-items:center;gap:5px}
.single-meta .m-icon{font-size:15px;opacity:.6}

.single-featured img{border-radius:12px;width:100%;max-height:440px;object-fit:cover;margin-bottom:36px}

/* ── article content ── */
.article-body{font-size:17px;line-height:2;color:var(--tx);letter-spacing:.01em}

.article-body h2{
  font-family:var(--serif);font-size:23px;font-weight:700;margin:44px 0 16px;
  color:var(--tx-heading);position:relative;padding-left:16px;
}
.article-body h2::before{
  content:'';position:absolute;left:0;top:5px;bottom:5px;
  width:3px;background:var(--accent);border-radius:2px;
}
.article-body h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:32px 0 12px;color:var(--tx-heading)}
.article-body p{margin-bottom:1.3em}
.article-body ul,.article-body ol{margin-bottom:1.3em}
.article-body li{margin-bottom:6px}
.article-body a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent);text-decoration-thickness:1px}
.article-body a:hover{text-decoration-color:var(--accent-btn)}
.article-body strong{color:var(--tx-heading);font-weight:600}

/* ── blockquote ── */
.article-body blockquote{
  border:none;padding:24px 28px;margin:36px 0;
  background:var(--bg-soft);border-radius:var(--r);
  color:var(--tx-mid);font-style:normal;position:relative;
}
.article-body blockquote::before{
  content:'\201c';position:absolute;top:-12px;left:16px;
  font-family:var(--serif);font-size:54px;color:var(--accent);
  opacity:.3;line-height:1;
}
.article-body blockquote p:last-child{margin-bottom:0}

.article-body code{background:var(--bg-soft);padding:2px 8px;border-radius:5px;font-size:14px;color:var(--accent-btn)}
.article-body img{border-radius:var(--r);margin:32px 0}
.article-body hr{border:none;border-top:1px solid var(--divider);margin:40px 0}

/* ── legal key box ── */
.legal-box{
  border:1px solid var(--border);border-radius:var(--r);padding:22px 26px;
  margin:36px 0;background:linear-gradient(135deg,var(--bg-soft),#fff);
}
.legal-box h3{font-family:var(--serif);font-size:17px;font-weight:700;margin:0 0 8px;color:var(--tx-heading)}
.legal-box p,.legal-box ul{font-size:14px;color:var(--tx-mid);margin-bottom:0}

/* ── FAQ accordion ── */
.faq{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:36px 0}
.faq-item{border-bottom:1px solid var(--divider)}
.faq-item:last-child{border-bottom:none}
.faq-question{
  width:100%;text-align:left;padding:16px 20px;font-size:15px;font-weight:600;
  color:var(--tx-heading);background:var(--bg-card);border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);transition:background .2s;
}
.faq-question:hover{background:var(--bg-soft)}
.faq-question::after{content:'+';font-size:18px;color:var(--tx-dim);transition:transform .3s}
.faq-item.open .faq-question::after{content:'−';transform:rotate(180deg)}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-item.open .faq-answer{padding:0 20px 16px;max-height:600px}
.faq-answer p{font-size:14px;color:var(--tx-mid);margin:0}

/* ── tags ── */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding-top:28px;border-top:1px solid var(--divider)}
.post-tags a{
  font-size:12px;color:var(--tx-mid);background:var(--bg-soft);
  padding:4px 14px;border-radius:var(--r-pill);transition:all .25s;
}
.post-tags a:hover{color:#fff;background:var(--accent)}

/* ── author bio ── */
.author-bio{
  margin:44px 0;padding:24px;background:var(--bg-soft);border-radius:var(--r);
  display:flex;gap:20px;align-items:center;
}
.author-bio__avatar{width:72px;height:72px;border-radius:50%;flex-shrink:0;overflow:hidden;background:var(--divider)}
.author-bio__avatar img{width:100%;height:100%;object-fit:cover}
.author-bio h4{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--tx-heading)}
.author-bio p{font-size:13px;color:var(--tx-mid);line-height:1.7;margin:0}

/* ── post navigation ── */
.post-nav{display:flex;justify-content:space-between;gap:16px;padding:32px 0 0;margin-top:36px;border-top:1px solid var(--divider)}
.post-nav a{font-size:14px;font-weight:500;color:var(--tx-mid);max-width:46%;line-height:1.5}
.post-nav a:hover{color:var(--accent)}

/* ── related posts ── */
.related-posts{margin-top:48px;padding-top:40px;border-top:2px solid var(--divider)}
.related-posts h3{font-family:var(--serif);font-size:20px;font-weight:700;margin-bottom:24px;color:var(--tx-heading)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:600px){.related-grid{grid-template-columns:1fr}}
.related-card__thumb{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-sm);margin-bottom:10px;background:var(--divider)}
.related-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.related-card__thumb:hover img{transform:scale(1.04)}
.related-card h4{font-size:14px;font-weight:600;line-height:1.5;margin-top:4px}
.related-card h4 a{color:var(--tx-heading)}
.related-card h4 a:hover{color:var(--accent)}

/* ── hot posts sidebar ── */
.hot-posts{padding:32px 0 0;margin-top:40px;border-top:2px solid var(--divider)}
.hot-posts h3{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--tx-heading);margin-bottom:20px}
.hot-list{display:flex;flex-direction:column;gap:12px}
.hot-item{display:flex;align-items:center;gap:14px}
.hot-num{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--accent);min-width:24px;opacity:.7}
.hot-item:first-child .hot-num{font-size:20px;opacity:1}
.hot-item a{font-size:15px;color:var(--tx-heading);font-weight:500;line-height:1.4}
.hot-item a:hover{color:var(--accent)}

/* ==============================================
   9. PAGINATION
   ============================================== */
.pagination{text-align:center;padding:48px 0}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 6px;margin:0 3px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;color:var(--tx-mid);
  background:var(--bg-card);border:1px solid var(--border);transition:all .25s;
}
.pagination .page-numbers:hover{background:var(--bg-soft);border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.pagination .dots{border:none;background:none}

/* ==============================================
   10. PAGE & ARCHIVE HEADERS
   ============================================== */
.page-header{padding:44px 0 24px}
.page-header h1{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--tx-heading)}
.page-header .archive-desc{color:var(--tx-mid);margin-top:8px;font-size:15px}
.page-content{padding:48px 0}

/* ==============================================
   11. FOOTER
   ============================================== */
.site-footer{
  background:#f0ebe5;padding:48px 24px 32px;margin-top:72px;
}
.footer-grid{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.8fr 0.9fr 1fr;gap:40px;
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

.footer-col h4{font-size:14px;font-weight:700;color:var(--tx-heading);margin-bottom:12px}
.footer-col p,.footer-col a{font-size:13px;color:var(--tx-mid);line-height:1.8}
.footer-col a:hover{color:var(--accent-btn)}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:6px}

.footer-bottom{
  max-width:1200px;margin:28px auto 0;padding-top:24px;
  border-top:1px solid rgba(160,90,44,.12);
  text-align:center;font-size:12px;color:var(--tx-dim);
}
.footer-bottom a{color:var(--tx-mid)}

/* social icons */
.social-row{display:flex;gap:12px;margin-top:12px}
.social-row a{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--bg-card);
  font-size:14px;color:var(--tx-mid);transition:all .25s;
}
.social-row a:hover{background:var(--accent);color:#fff}

/* decorative divider */
.footer-divider{
  max-width:1200px;margin:0 auto 24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,90,44,.18),transparent);
}

/* friend links bottom row */
.footer-friendlinks{
  max-width:1200px;margin:24px auto 0;padding-top:20px;
  border-top:1px solid rgba(160,90,44,.12);
  text-align:center;font-size:13px;color:var(--tx-dim);
}
.footer-friendlinks .fl-label{
  color:var(--tx-mid);font-weight:600;margin-right:12px;
}
.footer-friendlinks .fl-list{
  display:inline-flex;flex-wrap:wrap;justify-content:center;
  gap:0 16px;list-style:none;padding:0;margin:0;vertical-align:middle;
}
.footer-friendlinks .fl-list li{display:inline}
.footer-friendlinks .fl-list a{
  font-size:13px;color:var(--tx-mid);transition:color .2s;
}
.footer-friendlinks .fl-list a:hover{color:var(--accent)}

/* ICP / legal disclaimer line */
.footer-icp{
  max-width:1200px;margin:16px auto 0;
  text-align:center;font-size:11px;color:var(--tx-dim);
  opacity:.7;
}

/* ==============================================
   12. 404
   ============================================== */
.page-404{text-align:center;padding:100px 24px}
.page-404 .code{font-family:var(--serif);font-size:120px;color:var(--bg-soft);line-height:1;margin-bottom:16px}
.page-404 p{color:var(--tx-mid);margin-bottom:24px}

/* ==============================================
   13. SEARCH
   ============================================== */
.search-form{display:flex;gap:8px;max-width:480px;margin:0 auto}
.search-form input[type=search]{
  flex:1;padding:10px 16px;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;font-family:var(--sans);outline:none;background:var(--bg-card);
  transition:border-color .25s;
}
.search-form input[type=search]:focus{border-color:var(--accent)}
.search-form button{
  padding:10px 20px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--r-sm);font-size:14px;cursor:pointer;
  font-family:var(--sans);transition:background .25s;
}
.search-form button:hover{background:var(--accent-btn)}

/* ==============================================
   14. BACK TO TOP
   ============================================== */
#back-to-top{
  position:fixed;bottom:28px;right:28px;z-index:99;
  width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;
  border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .35s ease;box-shadow:var(--sh-md);
}
#back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{background:var(--accent-btn);transform:translateY(-2px)}

/* ==============================================
   15. COMMENTS
   ============================================== */
.comments-area{margin-top:48px;padding-top:40px;border-top:2px solid var(--divider)}
.comments-title{font-family:var(--serif);font-size:20px;font-weight:700;margin-bottom:24px;color:var(--tx-heading)}

/* ==============================================
   16. SECTION TRANSITIONS — 首页区块过渡
   ============================================== */
.section-divider{
  max-width:1200px;margin:0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--divider),transparent);
}
.section-wave{
  max-width:1200px;margin:0 auto;text-align:center;padding:8px 0;
}
.section-wave svg{width:32px;height:8px;opacity:.4}

/* ==============================================
   17. ABOUT PAGE — 关于页面
   ============================================== */
.about-hero{
  background:linear-gradient(180deg,#f7f4ef 0%,var(--bg) 100%);
  padding:56px 0 48px;
}
.about-hero-grid{
  display:flex;gap:56px;align-items:center;
}
@media(max-width:768px){
  .about-hero-grid{flex-direction:column;gap:32px;text-align:center}
}
.about-hero-left{flex:1;min-width:0}
.about-hero-right{
  flex-shrink:0;display:flex;flex-direction:column;gap:14px;
  min-width:200px;
}

.about-avatar{
  width:100px;height:100px;border-radius:50%;overflow:hidden;
  margin-bottom:20px;background:var(--divider);
  border:3px solid var(--accent-lite);
}
.about-avatar img{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){.about-avatar{margin:0 auto 20px}}

.about-name{
  font-family:var(--serif);font-size:36px;font-weight:700;
  color:var(--tx-heading);margin-bottom:6px;line-height:1.2;
}
.about-role{
  font-size:15px;color:var(--tx-mid);margin-bottom:16px;
}
.about-divider{
  width:40px;height:2px;background:var(--accent);border-radius:1px;margin-bottom:20px;
}
@media(max-width:768px){.about-divider{margin:0 auto 20px}}
.about-bio{
  font-size:15px;color:var(--tx-mid);line-height:1.9;max-width:520px;
}

.about-photo{
  width:280px;max-width:100%;border-radius:14px;overflow:hidden;
  background:var(--bg-card);border:3px solid var(--accent-lite);
  box-shadow:var(--sh-md);margin:0 0 6px;
}
.about-photo img{width:100%;height:auto;display:block;object-fit:cover}
@media(max-width:768px){.about-photo{margin:0 auto 6px}}

.about-stat-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:18px 24px;text-align:center;
  box-shadow:var(--sh-sm);transition:all .3s;
}
.about-stat-card:hover{
  border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-2px);
}
.about-stat-num{
  display:block;font-family:var(--serif);font-size:24px;font-weight:700;
  color:var(--accent);margin-bottom:4px;line-height:1;
}
.about-stat-label{
  font-size:12px;color:var(--tx-dim);letter-spacing:.5px;
}

/* ── about sections ── */
.about-section{padding:56px 0}
.about-section-header{margin-bottom:36px;text-align:center}
.about-section-tag{
  display:inline-block;font-size:11px;font-weight:600;
  color:var(--accent);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:10px;
}
.about-section-title{
  font-family:var(--serif);font-size:26px;font-weight:700;
  color:var(--tx-heading);margin-bottom:8px;
}
.about-section-desc{
  font-size:14px;color:var(--tx-mid);max-width:500px;margin:0 auto;
}

/* ── disclaimer ── */
.about-disclaimer{background:var(--bg-soft)}
.disclaimer-box{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:28px 32px;box-shadow:var(--sh-sm);
}
@media(max-width:600px){.disclaimer-box{flex-direction:column;text-align:center}}
.disclaimer-icon{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:var(--accent-lite);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.disclaimer-icon svg{width:22px;height:22px}
.disclaimer-body h3{
  font-family:var(--serif);font-size:17px;font-weight:700;
  color:var(--tx-heading);margin-bottom:8px;
}
.disclaimer-body p{
  font-size:14px;color:var(--tx-mid);line-height:1.7;margin:0;
}

/* ── info cards ── */
.about-bg-section{background:var(--bg)}
.about-info-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media(max-width:900px){.about-info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.about-info-grid{grid-template-columns:1fr}}

.about-info-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;padding:28px 22px 24px;
  transition:all .35s;box-shadow:var(--sh-sm);
}
.about-info-card:hover{
  border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-3px);
}
.about-info-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--bg-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.about-info-icon svg{width:20px;height:20px}
.about-info-card h4{
  font-family:var(--serif);font-size:15px;font-weight:700;
  color:var(--tx-heading);margin-bottom:8px;
}
.about-info-card p{
  font-size:13px;color:var(--tx-mid);line-height:1.7;margin:0;
}

/* ── topic list ── */
.about-topics-section{background:var(--bg-soft)}
.about-topic-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media(max-width:900px){.about-topic-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.about-topic-list{grid-template-columns:1fr}}

.about-topic-item{
  display:flex;align-items:center;gap:18px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:22px 24px;
  text-decoration:none;color:inherit;
  transition:all .35s;box-shadow:var(--sh-sm);
}
.about-topic-item:hover{
  border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-2px);
}
.about-topic-num{
  font-family:var(--serif);font-size:22px;font-weight:700;
  color:var(--accent);opacity:.4;line-height:1;min-width:32px;
}
.about-topic-body h4{
  font-family:var(--serif);font-size:15px;font-weight:700;
  color:var(--tx-heading);margin-bottom:4px;
}
.about-topic-body p{
  font-size:12px;color:var(--tx-mid);margin:0;
}

/* ── contact ── */
.about-contact{background:var(--bg)}
.about-contact-inner{
  display:flex;gap:48px;align-items:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;padding:40px 48px;box-shadow:var(--sh-sm);
}
@media(max-width:768px){
  .about-contact-inner{flex-direction:column;gap:28px;padding:32px 24px;text-align:center}
}
.about-contact-left{flex:1}
.about-contact-left .about-section-title{text-align:left;margin-bottom:12px}
.about-contact-left .about-section-tag{text-align:left;display:block}
.about-contact-left p{
  font-size:14px;color:var(--tx-mid);line-height:1.8;margin:0;
}
@media(max-width:768px){
  .about-contact-left .about-section-title,.about-contact-left .about-section-tag{text-align:center}
}
.about-contact-right{flex-shrink:0;min-width:240px}

.contact-item{
  display:flex;align-items:center;gap:14px;
  margin-bottom:16px;
}
@media(max-width:768px){.contact-item{justify-content:center}}
.contact-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--bg-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.contact-icon svg{width:18px;height:18px}
.contact-body{display:flex;flex-direction:column}
.contact-label{font-size:12px;color:var(--tx-dim);margin-bottom:2px}
.contact-value{
  font-size:15px;font-weight:600;color:var(--tx-heading);
  text-decoration:none;transition:color .2s;
}
.contact-value:hover{color:var(--accent)}
.contact-note{
  padding-top:14px;border-top:1px solid var(--divider);
  font-size:13px;color:var(--tx-dim);line-height:1.7;
}

/* ==============================================
   18. MOBILE
   ============================================== */
@media(max-width:768px){
  .hero h1{font-size:26px}
  .hero p{font-size:14px}
  .single-header h1{font-size:26px}
  .article-body{font-size:16px}
  .article-body h2{font-size:20px}
  .header-inner{flex-wrap:wrap}
  .menu-toggle{display:block}
  .main-nav{display:none;width:100%;margin-top:12px}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--divider)}
  .main-nav a::after{display:none}
  .author-bio{flex-direction:column;text-align:center}
  .post-nav{flex-direction:column;gap:12px}
  .post-nav a{max-width:100%}
}