/* 统一变量与基础复位 */
:root{
  --bg: #ffffff;
  --ink: #1b1b1b;               /* 炭黑 */
  --muted: #6f6b66;            /* 暖灰 */
  --accent: #3a3a3a;           /* 用于首字强调（轻量） */
  --border: #e6e2df;           /* 浅边框 */
  --radius: 2px;               /* 2px 小圆角 */
  --max-width: 1280px;         /* 在 1120-1440 范围内取中间值 */
  --gutter: 24px;
  font-synthesis: none;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;}

a{color:inherit;text-decoration:none}

/* 报刊双层报头 */
.site-header{padding:18px var(--gutter);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.site-logo{font-weight:700;font-size:18px;letter-spacing:0.02em;color:var(--ink)}
.header-line{font-size:13px;color:var(--muted)}
.nav-text{color:var(--muted)}

/* 广告占位（独立容器） */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--muted);background:transparent}
.ad-slot:empty{display:block;min-height:12px}

/* 主布局：桌面为左三右九；手机为单列重排 */
.layout-grid{display:grid;gap:24px;max-width:var(--max-width);margin:20px auto;padding:0 var(--gutter);align-items:start}

/* 文章头部 */
.article-head{grid-column:1/-1}
.eyebrow{font-size:13px;color:var(--muted);margin-bottom:6px}
.article-title{font-family: Georgia, 'Times New Roman', serif;font-size:26px;line-height:1.18;margin:0;color:var(--ink)}
.meta{margin-top:8px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.description{margin-top:12px;color:var(--muted);line-height:1.6;border:1px solid var(--border);padding:12px;border-radius:var(--radius);background:transparent}

/* 左侧索引与信息带 */
.left-rail{border:1px solid var(--border);padding:12px;border-radius:var(--radius);background:transparent}
.info-band{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.info-item strong{color:var(--ink);font-weight:600;margin-right:6px}

/* FAQ 桌面表格样式（左问题/右答案） */
.faq{font-size:14px;color:var(--ink)}
.faq .qa{display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:8px 0;border-top:1px dashed var(--border)}
.faq .qa:first-child{border-top:0}
.faq .q{color:var(--muted);font-weight:600}
.faq .a{color:var(--ink)}

/* 相关阅读（关键词索引式列表） */
.related{margin-top:14px}
.related-title{font-size:13px;color:var(--muted);margin:0 0 8px 0}
.related ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.related li{font-size:13px;padding:6px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--muted)}

/* 文章正文 */
.article{padding:12px;border-radius:var(--radius);border:1px solid transparent}
.content{color:var(--ink);line-height:1.8;font-size:16px}

/* 视觉识别：正文首段首字的轻量强调（仅样式，不改写内容） */
.content p:first-of-type::first-letter{font-size:1.45em;color:var(--accent);font-weight:600;padding-right:4px}

/* 底部 */
.site-footer{padding:18px var(--gutter);font-size:13px;color:var(--muted);border-top:1px solid var(--border);text-align:center}

/* 桌面规则（>=1024px）——严格实现左3列、右9列；文章标题与内容对齐 */
@media (min-width:1024px){
  .layout-grid{grid-template-columns: 3fr 9fr;grid-auto-rows:min-content}
  .article-head{grid-column:2 / 3; /* 标题区与正文同列对齐 */}
  .left-rail{grid-column:1 / 2}
  .article{grid-column:2 / 3}

  /* FAQ 在左侧以表格式显示（桌面特定） */
  .faq{margin-top:6px}

  /* 相关阅读在左侧作为关键词索引列表 */
  .related ul{max-height:600px;overflow:auto;padding-right:6px}
}

/* 手机规则（<=767px）——单列自然重排；左栏变成标题下方紧凑信息带，正文随后完整显示 */
@media (max-width:767px){
  .layout-grid{grid-template-columns:1fr}

  /* 将 article-head 放在首位，left-rail 紧随其后作为紧凑信息带，然后正文 */
  .article-head{order:1}
  .left-rail{order:2}
  .article{order:3}

  .article-title{font-size:20px}
  .description{margin-top:10px}

  /* FAQ 与相关阅读移动到左栏后方（在移动端保持堆叠） */
  .faq .qa{grid-template-columns:1fr;gap:6px}
  .faq .q{font-weight:700}
  .related ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .related li{padding:6px 8px;font-size:12px}

  /* 保证 320px 宽度下不横向滚动 */
  body, .layout-grid, .article, .left-rail, .ad-slot{min-width:0}
}

/* 中间断点（768px - 1023px）保持易读但不触发桌面网格 */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{grid-template-columns:1fr;max-width:960px}
  .left-rail{order:2}
  .article{order:3}
}

/* 可访问增强：缩放下的阅读舒适 */
@media (prefers-reduced-motion: reduce){
  *{transition:none}
}