:root{
  --bg:#f6f5f4; /* 暖灰背景 */
  --surface:#ffffff; /* 内容面板 */
  --charcoal:#111213; /* 炭黑 */
  --muted:#8b8580; /* 暖灰文本 */
  --accent:#2b2b2b; /* 用于反向标题 */
  --border:rgba(16,16,16,0.08);
  --radius:2px; /* 2px 小圆角 */
  --max-width:1200px; /* 总体容器宽度，位于1120-1440区间 */
  --gutter:20px;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--charcoal);font-family:Georgia, 'Times New Roman', serif;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* 顶层布局：在 desktop 下为三列网格（刊头、内容区留白、实际内容）
   注意：DOM 顺序让文章在相关之前以确保信息在早期加载 */
.site-root{display:flex;min-height:100vh}

/* 左侧刊头 */
.site-nav{width:220px;padding:28px 16px;border-right:1px solid var(--border);background:transparent;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.site-brand a{font-weight:700;color:var(--charcoal);letter-spacing:0.4px}
.nav-list{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted)}
.nav-list a{color:var(--charcoal)}

/* 内容帧：居中并限定宽度 */
.content-frame{flex:1;display:flex;flex-direction:column;align-items:center;padding:22px}
.main-area{width:100%;max-width:var(--max-width);display:grid;grid-template-columns:1fr;gap:20px}

/* 广告容器样式：独立容器，不悬浮、不覆盖 */
.ad{background:transparent;border:1px dashed var(--border);padding:12px;border-radius:var(--radius);color:var(--muted);font-size:14px}
.ad-top{width:100%;max-width:var(--max-width);margin-bottom:12px}
.ad-middle{width:100%;margin-top:18px}
.ad-bottom{width:100%;max-width:var(--max-width);margin:18px 0}

/* 文章区 */
.article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.article-header{margin-bottom:10px}
.title{font-size:34px;line-height:1.05;margin:0 0 10px 0;font-weight:700;max-height:3.1em;overflow:hidden}
.meta{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-bottom:12px}
.summary{color:var(--muted);margin:0 0 18px 0}
.article-body{color:var(--charcoal);font-size:17px}

/* 相关推荐（视觉签名：反向色块标题栏） */
.related{margin-top:10px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.related-head{background:var(--accent);color:#fff;padding:10px 14px;font-weight:700}
.related-list{padding:10px 14px;background:var(--surface)}
.related-list a{display:block;padding:10px 0;border-bottom:1px solid var(--border);color:var(--charcoal)}
.related-list time{display:block;color:var(--muted);font-size:13px}

/* FAQ 列表：桌面为表格式左问右答，移动端堆叠 */
.faq-section{margin-top:18px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:transparent;border-radius:var(--radius);padding:10px;border:1px solid var(--border)}
.faq-item .q{font-weight:600;color:var(--charcoal);margin-bottom:6px}
.faq-item .a{color:var(--charcoal)}

/* 页脚 */
.site-footer{width:100%;max-width:var(--max-width);padding:18px 0;color:var(--muted);font-size:13px}

/* ---------- Desktop: min-width:1024px 样式 ---------- */
@media (min-width:1024px){
  .site-root{align-items:stretch}

  /* 左侧刊头固定宽度已定义，内容区可使用非对称双栏布局：正文偏右，推荐偏左 */
  .main-area{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}

  /* DOM 中 article 在前，related 后；用 grid-area 显示时将 related 放左 */
  .article{grid-column:2;order:2}
  .related{grid-column:1;order:1}

  /* 标题区与摘要采用错位宽度以形成对角平衡：标题靠右占较窄列、摘要占全文宽度 */
  .article-header{max-width:78%;margin-left:auto}
  .summary{max-width:60%;margin-left:0}

  /* FAQ：左问右答表格式 */
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .faq-item{display:grid;grid-template-columns:35% 65%;gap:12px;align-items:start}
  .faq-item .q{grid-column:1}
  .faq-item .a{grid-column:2}

  /* 相关推荐列表带日期分隔线：在相关列表中每条显示时间（假定 {{related}} 包含日期） */
  .related-list a{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
  .related-list a time{color:var(--muted);font-size:13px;margin-left:12px}
}

/* ---------- Mobile: max-width:767px 样式 ---------- */
@media (max-width:767px){
  /* 刊头变为顶部极简细导航 */
  .site-root{flex-direction:column}
  .site-nav{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 14px;border-right:0;border-bottom:1px solid var(--border)}
  .nav-list{flex-direction:row;gap:8px;font-size:13px}

  .content-frame{padding:12px}
  .main-area{padding:0;grid-template-columns:1fr}

  /* 取消桌面错位，严格自然阅读顺序：标题、摘要、正文、FAQ、推荐 */
  .article-header{max-width:100%;margin-left:0}
  .summary{max-width:100%}

  .article{padding:16px}
  .related{margin-top:12px}

  /* FAQ 改为堆叠式：问题在上，回答在下 */
  .faq-item{display:block}
  .faq-item .q{margin-bottom:8px}

  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 避免使用阴影以传达层级（禁止的套路）——因此未使用 box-shadow */