/* 设计变量 —— 青灰与湖蓝 配色 */
:root{
  --max-width:1280px; /* 在1120-1440范围内选择 */
  --bg: #ffffff;
  --masthead-bg: #2f4b4a; /* 深色报头（不科技仪表盘） */
  --text: #111216;
  --muted: #6b7680;
  --accent: #3ca6b3; /* 湖蓝 */
  --sep: #e6ebeb;
  --line: #d6dddc;
  --density-padding: 14px; /* 紧凑布局 */
  --title-size: 28px;
  --body-size: 16px;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 基本重置 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}

/* Masthead（居中刊头 + 横线导航） */
.masthead{
  background:var(--masthead-bg);
  color:#fff;
  padding:18px 0;
  border-bottom:4px solid var(--accent); /* 视觉识别：深色页头与正文不同对齐基线 */
}
.masthead-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center; /* 居中刊头 */
  gap:18px;
}
.brand{font-weight:700;letter-spacing:1px}
.index-bar{
  margin-left:12px;
  color:rgba(255,255,255,0.85);
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.index-bar .home{color:rgba(255,255,255,0.95);font-weight:600}
.index-bar .sep{opacity:0.4}

/* 容器（桌面限制宽度） */
.container{
  max-width:var(--max-width);
  margin:18px auto;
  padding:0 18px 28px 18px;
  display:block;
}

/* Article 主体样式 */
.article{
  background:transparent; /* 正文纯白背景由 body 控制 */
}
.article-header{margin-bottom:10px}
.title{
  font-size:var(--title-size);
  margin:0 0 8px 0;
  font-weight:800; /* 报刊式紧凑标题 */
  letter-spacing:0.2px;
  text-align:left; /* 标题左对齐并构图 */
  position:relative;
  padding-left:0;
}
/* 标题的横线构图（粗细横线） */
.title::before{
  content:"";
  display:block;
  height:3px; /* 粗横线 */
  background:var(--accent);
  width:64px;
  margin-bottom:6px;
}
.title::after{
  content:"";
  display:block;
  height:1px; /* 细横线 */
  background:var(--line);
  margin-top:8px;
}

.meta{color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{margin:0 0 12px 0;color:var(--muted);font-size:15px}

.ad{border:1px dashed var(--sep);padding:12px;margin:14px 0;background:#fff}
.ad-top,.ad-middle,.ad-bottom{background:#fafcfc}

.content{
  font-size:var(--body-size);
  line-height:1.8; /* 舒展正文 */
  color:var(--text);
}
.content p{margin:0 0 12px 0}

/* FAQ 区域：主题色顶部边线 */
.faq{
  margin-top:18px;
  padding:12px 10px 10px 10px;
  border-top:4px solid var(--accent); /* faq_pattern 要求 */
  background:#fff;
}
.faq h2{margin:0 0 8px 0;font-size:16px}

/* 右列 编辑部 */
.editor{
  margin-top:18px;
  padding-left:18px;
  border-left:1px solid var(--sep); /* 使用分隔线而非卡片 */
}
.editor h3{margin-top:0;font-size:15px;color:var(--muted)}
.editor-list{margin-top:10px}

/* 相关阅读：带日期的分隔线列表 */
.related{margin-top:18px;padding-left:18px}
.related h3{margin:0 0 8px 0;font-size:15px;color:var(--muted)}
.related > *{border-top:1px solid var(--sep);padding:10px 0}
.related time{display:inline-block;color:var(--muted);font-size:13px;margin-left:8px}

/* Footer */
.site-footer{border-top:1px solid var(--sep);padding:14px 0;background:#fff}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 18px;color:var(--muted);font-size:13px}

/* 密集布局控制 */
article, .editor, .related{padding:0}

/* 桌面规则：非对称网格 8列文章 + 4列编辑推荐，使用分隔线 */
@media (min-width: 1024px){
  .container{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap:28px;
    align-items:start;
  }
  /* Article 占据前8栅格 */
  .article{
    grid-column: 1 / span 8;
    padding-right:18px;
  }
  /* 编辑部 占据后4栅格顶部 */
  .editor{
    grid-column: 9 / -1;
    grid-row: 1;
    padding-left:28px;
    border-left:1px solid var(--sep);
  }
  /* 相关阅读 放置在后4栅格下方，保持视觉分隔 */
  .related{
    grid-column: 9 / -1;
    grid-row: 2;
    padding-left:28px;
  }
  /* 在桌面端，标题与摘要通栏（article 已通栏8/12） */
  .article-header{position:sticky;top:18px;background:transparent}
}

/* 手机端规则：单列，报头压缩为一行，所有栏目顺序自然重排 */
@media (max-width: 767px){
  .masthead-inner{justify-content:space-between;padding:8px 16px}
  .brand{font-size:16px}
  .index-bar{display:flex;gap:6px;font-size:13px}

  .container{display:block;padding:0 12px}
  .article{padding:12px 0}
  .title{font-size:20px}
  .title::before{width:48px;height:2px}
  .title::after{height:1px}
  .article-header{padding-bottom:6px}

  /* 所有块单列堆叠（aside 下移） */
  .editor, .related{padding-left:0;border-left:none}
  .editor{margin-top:12px}
  .related{margin-top:12px}

  /* 确保在320px 不会横向滚动 */
  body, .container, .masthead, .article, .editor, .related{min-width:0}
  .content{word-break:break-word}
}

/* 中等宽度过渡规则，防止在1024以下出现布局跳变 */
@media (768px) and (max-width:1023px){
  .container{padding:0 16px}
  .editor, .related{padding-left:0;border-left:none}
}

/* 可访问性与可读性小调整 */
h1,h2,h3{line-height:1.2}