/* 主题变量 - 黑白 + 单一朱红强调 */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --rule: #e9e9e9;
  --accent: #b31b1b; /* 朱红 */
  --max-width: 1200px; /* 在 1120-1440 之间取中值 */
  --gap: 16px;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{margin:0 auto;padding:20px;max-width:calc(var(--max-width));}

/* 报刊双层报头 */
.site-header{border-bottom:1px solid var(--rule);background:transparent}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;font-size:14px;color:var(--muted)}
.header-top .header-center{font-weight:700;color:var(--text);text-align:center}
.header-sub{padding:6px 20px 12px;font-size:13px;color:var(--muted);border-top:1px solid transparent}

/* 布局基础（移动优先） */
.page-wrap{padding:0}
.container{display:flex;flex-direction:column;gap:var(--gap)}

.left-rail{display:none} /* 桌面才显示左索引 */
.content-article{background:transparent}
.article-header{padding:6px 0 12px}
.article-title{font-size:24px;margin:8px 0 6px;line-height:1.18;font-weight:800;color:var(--text)}
/* 保持大标题但不刻意使用圆角等 */
.mobile-info{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.article-summary{color:var(--muted);margin:6px 0 14px}
.article-body{font-size:16px;color:var(--text)}
.body-content{white-space:normal}

/* 章节标题的视觉签名：短编号线（不生成编号） */
.section-title{font-size:15px;margin:20px 0 10px;display:flex;align-items:center;font-weight:700}
.section-title::before{content:'';display:inline-block;width:26px;height:4px;background:var(--accent);margin-right:10px}

/* FAQ 横线问答列表 - 模板提供容器，由内容方填充问答条目 */
.faq-list{border-top:1px solid var(--rule);margin-top:8px}
.faq-list > *{padding:12px 0;border-bottom:1px solid var(--rule);color:var(--text)}

/* 相关阅读：移动端单列，桌面端四列紧凑网格 */
.related-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.related-grid > *{font-size:14px;color:var(--muted)}

/* 广告容器样式（独立且不覆盖正文） */
.left-rail .rail-ad, .ad-middle, .ad-bottom{border:1px dashed var(--rule);padding:10px;margin:14px 0;background:transparent}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:14px}

/* 页脚 */
.site-footer{border-top:1px solid var(--rule);padding:14px 20px;text-align:center;color:var(--muted);font-size:13px}

/* 桌面规则：1024px 及以上使用左三右九列布局、不同排版密度 */
@media (min-width:1024px){
  .container{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;padding:28px;max-width:var(--max-width)}

  /* 左侧窄信息索引占3列 */
  .left-rail{display:flex;flex-direction:column;grid-column:span 3;border-right:1px solid var(--rule);padding-right:18px}
  .left-rail .rail-brand{margin-bottom:12px}
  .left-rail .rail-site{font-weight:800;color:var(--text);margin-bottom:6px}
  .left-rail .rail-nav{display:flex;flex-direction:column;font-size:14px;color:var(--muted);gap:6px}
  .left-rail .rail-nav a{color:var(--text)}
  .left-rail .rail-row{font-size:13px;color:var(--muted);margin:8px 0}
  .left-rail .rail-footer{margin-top:auto;font-size:12px;color:var(--muted)}

  /* 文章占9列 */
  .content-article{grid-column:4 / span 9;padding-left:18px}

  /* 站名与导航纵向排列（左侧索引承担站名与导航的纵向排列） */
  .header-top{display:block}
  .header-top .header-center{display:none} /* 桌面阅读以左侧为主索引，顶部居中简化 */

  /* 标题更大但仍保持紧凑密度（不使用圆角或阴影） */
  .article-title{font-size:34px;margin-top:2px}
  .article-summary{font-size:15px}

  /* 章节签名更醒目 */
  .section-title{font-size:15px}
  .section-title::before{width:36px;height:5px}

  /* 相关阅读四列紧凑标题网格 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid > *{font-size:13px;color:var(--muted)}

  /* 隐藏移动信息带（由左侧索引承担信息显示） */
  .mobile-info{display:none}
}

/* 手机规则：最大宽度 767px，单栏流式；标题下方有紧凑信息带（已放在文章头部） */
@media (max-width:767px){
  .container{padding:14px}
  .header-top{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
  .header-top .header-center{font-size:16px}
  .header-sub{display:none}

  /* 隐藏桌面左索引 */
  .left-rail{display:none}

  /* 文本更适配窄屏，保持阅读顺序：标题 -> 移动信息带 -> 摘要 -> 正文 */
  .article-title{font-size:22px;line-height:1.18}
  .article-summary{font-size:14px}
  .article-body{font-size:15px}

  /* FAQ 仍为横线问答列表 */
  .faq-list > *{padding:12px 0;border-bottom:1px solid var(--rule)}

  /* 相关阅读单列，转为紧凑列表（避免占据大量屏幕空间） */
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{padding:8px 0;border-bottom:1px solid var(--rule)}

  /* 广告容器在文章流中呈现但不覆盖正文 */
  .ad-middle,.ad-bottom{border-style:solid;border-color:var(--rule)}
}

/* 无大圆角、无阴影、细线分割的视觉语言（遵守 surface: 无圆角、细分隔线、无阴影） */
*{border-radius:0}