/* 基础变量与重置 */
:root{
  --bg:#f7f7f6; /* 浅背景 */
  --surface:#ffffff;
  --text:#2b2b2b; /* 石墨灰 */
  --muted:#6c6c6c;
  --accent:#b59b00; /* 芥末黄 - 克制强调色 */
  --max-page:1280px; /* 页面最大宽度，处于1120-1440范围内 */
  --article-width:860px; /* 正文宽度约860px */
  --gap:20px;
  --dense-line:1.45;
  font-family: -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;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--dense-line);
}
.page{
  margin:0 auto;
  padding:28px 18px 48px;
  max-width:var(--max-page);
  min-width:auto;
}
/* Header：左右分置编辑部报头 */
.site-header{
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:transparent;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 18px;
  max-width:var(--max-page);
  margin:0 auto;
}
.branding{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.site-home{font-weight:700;color:var(--text);text-decoration:none}
.tagline{font-size:12px;color:var(--muted)}
.index-bar{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.index-bar a{color:var(--text);text-decoration:none;font-weight:600}
.index-bar .sep{color:rgba(0,0,0,0.08)}

/* 标题区：大标题配窄元信息列 */
.title-region{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  align-items:start;
  padding:28px 18px 14px;
}
.meta-col{color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:8px}
.meta-item{line-height:1.3}
.meta-item .kw{color:var(--muted);}
.title-col h1{
  margin:0 0 10px 0;
  font-size:30px;
  line-height:1.06;
  font-weight:800; /* 报刊式紧凑标题 */
  letter-spacing:-0.01em;
}
.title-col h1::first-letter{
  color:var(--accent); /* 视觉识别：标题首字强调 */
}
.summary{margin:0;color:var(--muted);font-size:15px}

.ad-slot{margin:18px 0;padding:10px 12px;background:transparent;border:1px dashed rgba(0,0,0,0.04);color:var(--muted);font-size:13px}
.ad-slot[aria-label]{border-style:dotted}

/* 主体布局：正文约860px居中 */
.layout-main{display:block;padding:6px 18px}
.article{margin:8px auto 24px;max-width:var(--article-width);background:transparent}
.article-meta{display:flex;gap:12px;color:var(--muted);font-size:13px;margin-bottom:12px}
.content{color:var(--text);font-size:17px;line-height:1.8}
.content p{margin:0 0 14px}

/* FAQ 两列（桌面） */
.faq-section{max-width:var(--article-width);margin:30px auto 20px}
.faq-section h2{font-size:18px;margin:0 0 12px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-grid > *{background:var(--surface);padding:12px;border-top:1px solid rgba(0,0,0,0.03)}

/* 相关阅读：底部紧凑网格 */
.related-section{max-width:var(--max-page);margin:18px auto 36px;padding:0 4px}
.related-section h2{font-size:16px;margin:0 0 12px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:transparent;padding:8px 6px;border-top:1px solid rgba(0,0,0,0.03);font-size:14px;color:var(--text)}
.related-grid a{color:inherit;text-decoration:none}

.site-footer{border-top:1px solid rgba(0,0,0,0.04);margin-top:40px;padding-top:14px;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-page);margin:0 auto;padding:10px 18px}

/* 视觉与表面：大留白、无边框、仅章节横线 */
/* 已通过简洁线条与留白实现，禁止玻璃/模糊/阴影风格 */

/* 密度调整（紧凑） */
.title-col h1{margin-bottom:8px}

/* 响应式：桌面规则（必须包含 min-width:1024px） */
@media (min-width:1024px){
  body{background:var(--bg)}
  .page{padding:36px 28px 60px}
  /* 保证页面容器处于1120-1440范围：当更宽时限制为1280 */
  @media (min-width:1120px){
    .page{max-width:1280px}
  }
  .title-region{grid-template-columns:240px 1fr;gap:28px;padding:36px 24px 18px}
  .title-col h1{font-size:42px}
  .article{max-width:860px}
  /* 相关阅读：在非常宽屏时采用四列（满足 visual related_pattern），
     在常见桌面宽度（1024-1279）使用三列，遵循 desktop_contract */
  .related-grid{grid-template-columns:repeat(3,1fr)}
  @media (min-width:1280px){
    .related-grid{grid-template-columns:repeat(4,1fr)}
  }
}

/* 手机规则（必须包含 max-width:767px） */
@media (max-width:767px){
  .header-inner{padding:10px 12px}
  .page{padding:18px 12px 28px}
  /* 标题区堆叠：标题与元信息分开（手机端非对称布局恢复自然顺序） */
  .title-region{display:block;padding:8px 6px}
  .meta-col{flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px}
  .title-col{margin-top:8px}
  .title-col h1{font-size:22px;line-height:1.08}
  .summary{font-size:14px}
  /* 正文全宽减安全边距 */
  .layout-main{padding:8px 6px}
  .article{max-width:100%;margin:8px 0}
  .content{font-size:16px}
  /* FAQ 单列 */
  .faq-section{max-width:100%;margin:18px 0}
  .faq-grid{display:block}
  .faq-grid > *{margin-bottom:10px}
  /* 相关阅读底部三列变单列 */
  .related-section{padding:0}
  .related-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .related-grid > *{padding:10px;background:var(--surface)}
  /* 广告边界：不悬浮、不可覆盖 */
  .ad-slot{font-size:13px}
}

/* 可访问性与微调 */
h1,h2{color:var(--text)}
a{color:var(--text)}