/* 变量与基线 */
:root{
  --bg:#ffffff;
  --text:#111111; /* 炭黑 */
  --muted:#7a7a74; /* 暖灰 */
  --rule:#e6e4e1;
  --accent:#222; /* 用于强调但不为鲜艳色 */
  --max-width:1280px; /* 在 1120-1440 范围内可被容器限制 */
  --rail-width:260px; /* 基础左栏宽度，在桌面下会占3/12比例 */
  --gutter:24px;
  --serif: "Georgia", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --density-line:1.45; /* 紧凑行距但保持可读 */
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);margin:0;padding:0;font-size:16px;line-height:var(--density-line);}
a{color:inherit;text-decoration:none}
.header-top{padding:20px var(--gutter);border-bottom:1px solid var(--rule)}
.brand{font-weight:700;font-family:var(--serif);font-size:20px;color:var(--accent)}
.header-line{padding:8px var(--gutter);border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted)}
.nav-line{display:inline-flex;gap:10px;align-items:center}
.nav-item{opacity:0.95}
.nav-sep{color:var(--rule)}

/* 广告占位：独立容器，不悬浮、不遮盖 */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px 12px;border:1px dashed var(--rule);color:var(--muted);font-size:13px;text-align:center}

/* 页面网格：桌面为左窄右宽 3/9 的版式 */
.page-wrap{padding:28px 16px 48px}
.grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:var(--max-width);margin:0 auto}

.left-rail{order:1}
.content-area{order:2}

/* 内容区内部限制，使标题与正文在同一文本区对齐（标题居中，摘要左对齐） */
.article-inner{max-width:880px;margin:0 auto;padding:8px 0}
.title{font-family:var(--serif);font-size:28px;margin:8px 0 12px;text-align:center;font-weight:700;color:var(--accent);line-height:1.05}
.meta{font-size:13px;color:var(--muted);display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.summary{max-width:820px;margin:0 0 18px 0;text-align:left;color:var(--muted);font-size:15px}
.article-body{font-size:16px;color:var(--text);text-align:left}
.article-body p{margin:0 0 12px}

/* 左侧索引样式：竖向排列（报刊式纵向） */
.left-rail{padding:12px;background:transparent;border-right:1px solid var(--rule)}
.rail-inner{display:flex;flex-direction:column;gap:18px;padding:10px}
.rail-site{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--accent)}
.index-title{font-size:13px;color:var(--muted);margin:0 0 6px}
.index-list{margin:0;padding:0;list-style:none}
.index-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:6px 0;border-top:1px solid transparent}
.index-row dt{font-weight:600;color:var(--muted)}

/* FAQ 与相关阅读 */
.section-title{font-family:var(--serif);font-size:18px;margin:22px 0 10px;color:var(--accent)}
.faq-body{font-size:15px;color:var(--text);border-top:1px solid var(--rule);padding-top:12px}
.related-section{max-width:var(--max-width);margin:0 auto;padding-top:6px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.related-grid > *{font-size:13px;color:var(--muted);border-top:1px solid transparent;padding:6px 4px}

.footer-line{padding:18px 12px;border-top:1px solid var(--rule);text-align:center;color:var(--muted);font-size:13px}

/* 视觉识别和约束：无圆角、无阴影、细分隔线、较多留白 */
*{border-radius:0}

/* 桌面规则：宽屏双栏 3/9 网格，左栏固定宽度或 3 列占比 */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .grid{grid-template-columns:260px 1fr;align-items:start;gap:32px}
  .left-rail{width:260px}
  .content-area{padding-left:8px}
  /* 标题与正文在同一中部列宽下对齐 */
  .article-inner{max-width:880px}
  /* 相关阅读在桌面呈现四列紧凑网格（设计合同） */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:12px}
}

/* 手机规则：320-767px，左栏下移为标题下方紧凑信息带，布局为单列自然重排 */
@media (max-width:767px){
  :root{--max-width:680px}
  .page-wrap{padding:12px}
  .grid{grid-template-columns:1fr}
  .left-rail{order:2;border-right:0;border-top:1px solid var(--rule);margin-top:10px}
  .left-rail .rail-inner{flex-direction:row;gap:12px;align-items:center;justify-content:space-between;padding:8px}
  .rail-site{font-size:15px}
  .index-list{display:none}
  .article-inner{padding:0 6px}
  .title{font-size:20px;margin:6px 0;text-align:center}
  .meta{justify-content:flex-start;font-size:13px}
  .summary{font-size:14px}
  .article-body{font-size:15px}
  /* 相关阅读在手机为两列网格，更紧凑 */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ad-slot{margin:12px 6px}
}

/* 无影风格，编号式 FAQ 风格（样式呈现） */
.faq-body > *{margin:10px 0}
.faq-body h3{counter-increment:faq;position:relative;padding-left:34px}
.faq-body{counter-reset:faq}
.faq-body h3::before{content:counters(faq, ".")".";position:absolute;left:0;top:0;color:var(--muted);font-weight:600}

/* 可访问性微调 */
.title, .section-title{line-height:1.08}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}