/* 全局变量与重置 */
:root{
  --bg:#f6f4ec; /* 米白 */
  --ink:#0b2818; /* 深墨绿偏黑 */
  --accent:#184e3a; /* 墨绿 */
  --muted:#6b6b60;
  --max-read-width:860px; /* 正文宽度 */
  --page-max:1320px;
  --gutter:24px;
  --serif: "Songti", "Georgia", Palatino, "Times New Roman", serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.8; /* 舒展阅读 */
  padding:0 12px;
}

a{color:var(--accent);text-decoration:none}

/* 报刊双层报头 */
.masthead{max-width:var(--page-max);margin:18px auto 28px;display:block}
.masthead-top{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;color:var(--muted)}
.masthead-top .site-id a{font-weight:700;color:var(--ink)}
.masthead-bot{display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid rgba(11,40,24,0.06);padding-top:10px}
.paper-title{font-family:var(--serif);font-size:22px;color:var(--accent);letter-spacing:0.02em}
.site-nav{display:flex;gap:14px;font-size:14px;color:var(--muted)}
.site-nav .nav-home{font-weight:600;color:var(--ink)}

/* 页面主区布局 */
.page{max-width:var(--page-max);margin:0 auto 48px;display:flex;flex-direction:column;gap:28px}
.ad-zone{width:100%;text-align:center;color:var(--muted);font-size:13px;padding:8px 0}

/* Article */
.article{display:flex;flex-direction:column;align-items:center}
.article-head{width:100%;max-width:1180px;padding:6px 0}
.article-title{margin:0 0 8px 0;font-size:28px;font-weight:800;text-align:left;max-width:calc(100% - 0px);color:var(--ink);line-height:1.12}
/* 标题构图：细线上、粗线下（视觉） */
.title-rule{height:6px;margin-top:8px;margin-bottom:18px;background:linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.02) 40%, var(--accent) 100%);opacity:0.12}
.meta-row{font-size:13px;color:var(--muted);margin-bottom:10px}
.summary{margin:0 0 18px 0;color:var(--muted);max-width:var(--max-read-width)}

/* 正文区：桌面中心化有限宽度 */
.article-body{width:100%;display:flex;justify-content:center}
.content{width:100%;max-width:var(--max-read-width);padding:0 calc(var(--gutter));color:var(--ink);font-size:17px}
.content p{margin:0 0 1.1em}
/* 视觉标识：正文首段首字轻量强调 */
.content p:first-of-type::first-letter{font-size:1.6em;color:var(--accent);font-weight:700;float:left;line-height:0.9;margin-right:8px}

/* FAQ 样式：编号式问答，但不虚构步骤，内容由 {{faq}} 提供 */
.faq{max-width:var(--max-read-width);padding:0 calc(var(--gutter));margin-top:22px}
.faq .section-title{font-size:16px;margin:0 0 10px 0;color:var(--accent)}
.faq-list{color:var(--ink)}

/* 相关阅读：底部区域 */
.related{width:100%;max-width:var(--page-max);display:block}
.related .section-title{font-size:16px;color:var(--accent);margin:8px 0 12px;padding-left:calc(var(--gutter));}
.related-grid{display:grid;gap:14px;padding:0 calc(var(--gutter));}
.related-grid > *{background:transparent;padding:8px 0;border-bottom:1px solid rgba(11,40,24,0.06)}
.related-grid a{display:block;color:var(--ink)}
.related-grid .excerpt{color:var(--muted);font-size:13px;margin-top:6px}

/* 页脚 */
.site-footer{border-top:1px solid rgba(11,40,24,0.06);padding:18px 12px;color:var(--muted);font-size:13px;text-align:center}

/* 响应式规则 - 手机优先 320px 上无横向滚动 */
@media (max-width: 767px){
  body{padding:0 12px}
  .masthead{margin:12px auto 18px}
  .masthead-bot{flex-direction:column;align-items:flex-start;gap:8px}
  .paper-title{font-size:18px}
  .site-nav{display:flex;gap:10px;flex-wrap:wrap}

  /* 标题占比与正文全宽（减安全边距） */
  .article-head{padding:0}
  .article-title{font-size:20px}
  .title-rule{display:block}
  .meta-row{font-size:12px}
  .summary{font-size:14px}

  /* 正文全宽（减安全边距），自然重排 */
  .content{max-width:100%;padding:0}
  .content p:first-of-type::first-letter{font-size:1.3em}

  /* FAQ 与相关阅读重排：相关阅读单列 */
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{padding-left:0;padding-right:0}

  /* 广告边界：不覆盖正文，不悬浮 */
  .ad-zone{font-size:13px}
}

/* 桌面规则：两套不同排版，正文固定约860px，标题区可更宽 */
@media (min-width: 1024px){
  body{padding:0}
  .masthead{margin:28px auto 36px}
  .paper-title{font-size:24px}
  .masthead-bot{align-items:flex-end}

  /* 文章头使用更宽的带状区域，正文居中并受限为约860px */
  .article-head{max-width:var(--page-max);padding:0 40px}
  .article-title{font-size:34px}
  .title-rule{height:8px;margin-bottom:22px}
  .summary{font-size:15px}

  .article-body{justify-content:center}
  .content{max-width:var(--max-read-width);font-size:18px;padding:0}

  /* 页面宽屏感：在正文左侧保留窄边注列（非侧栏，内容居中），仅在 1024+ 可见，形成桌面差异 */
  .page{display:grid;grid-template-columns:1fr minmax(auto,var(--page-max)) 1fr}
  .article{grid-column:2}
  .related{grid-column:2}

  /* 相关阅读：按 desktop_contract 展示三列（底部三列展开），同时每条显示两行摘要以贴合 related_pattern 的摘要密度 */
  .related-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .related-grid > *{border-bottom:0;padding:0}
  .related-grid .excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* FAQ 列表样式更松散 */
  .faq{padding-left:0}
}

/* 无圆角统一卡片样式，避免使用相同圆角卡片布局（遵守 forbidden_pattern） */
/* 保持页面以条带、分隔线与留白为主，无同尺寸圆角卡片 */