:root{
  /* 色彩与可调变量 */
  --graphite:#2f3436; /* 石墨灰 */
  --muted:#6b6f70;
  --mustard:#cda900; /* 芥末黄（克制强调色） */
  --bg:#ffffff;
  --border:rgba(47,52,54,0.12);
  --radius:2px; /* 2px 小圆角 */
  --max-width:1280px; /* 在 1120-1440 取中间值，桌面可视区限制 */
  --page-gutter:24px;
  --type-serif: Georgia, 'Times New Roman', serif;
  --type-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--graphite);font-family:var(--type-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* 页面外框：桌面为细边框总框架，轻微圆角，无阴影 */
.page-frame{
  margin:24px auto;
  max-width:var(--max-width);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));
  display:flex;
  flex-direction:column;
}

/* 报刊双层报头 */
.masthead-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px var(--page-gutter);
  border-bottom:1px solid var(--border);
  background:transparent;
}
.site-link{font-weight:700;font-family:var(--type-serif);color:var(--graphite);font-size:20px}
.top-tools{font-size:13px;color:var(--muted)}
.masthead-sub{height:10px;min-height:10px}
.masthead-sub .sub-line{height:4px;background:var(--border);margin:0 var(--page-gutter);border-top:1px solid rgba(0,0,0,0.02)}

/* 主体布局 */
.layout-root{padding:18px}
.article-head{padding:12px 0 8px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.article-title{
  margin:0 0 8px 0;
  font-family:var(--type-serif);
  color:var(--graphite);
  font-size:32px; /* 超大但稳健 */
  line-height:1.12; /* 紧接正文 */
  letter-spacing:-0.02em;
  word-break:break-word;
}
/* 视觉签名：标题首字着色为芥末黄，克制强调 */
.article-title::first-letter{color:var(--mustard);font-weight:700}

.article-meta{font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center;margin-bottom:10px}
.summary{margin:0 0 12px 0;color:var(--muted);font-size:15px}

/* 内容区为 12 栏网格，桌面为 8+4 */
.content-grid{display:block}
.main-col{padding:18px 0}
.side-col{padding-top:18px}

.content-body{font-family:var(--type-sans);line-height:1.78;color:var(--graphite);font-size:16px}
.content-body p{margin:0 0 1em}
.content-body h2{margin:1.2em 0 0.6em;font-family:var(--type-serif)}

.block-title{font-weight:600;margin:0 0 10px 0;color:var(--graphite)}

/* 广告容器样式（不悬浮、不覆盖） */
.ad-slot{padding:12px;margin:12px 0;border:1px dashed var(--border);border-radius:var(--radius);background:transparent}
.ad-slot:empty{display:none}

/* 相关阅读布局（两列摘要列表样式） */
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.related-list > *{padding:8px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}

.info-block .brief{margin:0;color:var(--muted);font-size:14px}

/* FAQ 桌面表格化（左问右答） */
.faq-block{margin-top:18px;padding-top:12px;border-top:1px solid var(--border)}
.faq-list{display:block}
.faq-list > *{padding:10px 0;border-top:1px solid rgba(0,0,0,0.03)}

/* 细化：若 FAQ 内容使用 .faq-item、dt/dd 或者问答对，提供样式契合桌面两列显示 */
.faq-list .faq-item{display:block}
.faq-list .faq-item .q{font-weight:600;color:var(--graphite)}
.faq-list .faq-item .a{color:var(--muted);margin-top:6px}

/* footer */
.site-footer{padding:12px var(--page-gutter);border-top:1px solid var(--border);font-size:13px;color:var(--muted)}

/* ---- 桌面专属样式（>=1024px） ---- */
@media (min-width:1024px){
  .page-frame{margin:32px auto;padding:0;border-width:1px}
  .layout-root{padding:24px 28px}

  /* 使用 CSS Grid 12 列，标题区通栏，正文 8 列、侧栏 4 列 */
  .article{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:0}
  .article-head{grid-column:1/ -1;padding:18px 0}

  .content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;margin-top:6px}
  .main-col{grid-column:1 / span 8;padding-right:6px}
  .side-col{grid-column:9 / span 4;padding-left:6px;border-left:1px solid var(--border)}

  /* FAQ 左问右答表格式：每条占两列，左侧问题固定宽（35%），右侧答案自适应 */
  .faq-list{display:flex;flex-direction:column;gap:12px}
  .faq-list > *{display:grid;grid-template-columns:35% 65%;gap:16px;align-items:start}
  .faq-list > * .q{justify-self:start}
  .faq-list > * .a{justify-self:start}

  /* 相关阅读在侧栏保持两列摘要 */
  .related-list{grid-template-columns:1fr 1fr}

  /* 细节文字 */
  .article-title{font-size:40px}
  .summary{font-size:16px}
}

/* ---- 手机端专属样式（<=767px） ---- */
@media (max-width:767px){
  :root{--page-gutter:16px}
  body{padding:0;margin:0}
  .page-frame{border-left:0;border-right:0;border-radius:0;margin:0;background:var(--bg)}

  /* 报头压缩为单行显示，第二层极窄退为细线 */
  .masthead-top{padding:12px var(--page-gutter)}
  .site-link{font-size:17px}
  .masthead-sub{display:block;height:6px}
  .masthead-sub .sub-line{height:2px;margin:0 var(--page-gutter)}

  .layout-root{padding:14px}
  .article-head{padding:8px 0;border-bottom:none}
  .article-title{font-size:20px;line-height:1.18}
  .article-title::first-letter{font-size:1.1em}
  .article-meta{flex-direction:column;gap:6px;font-size:12px}
  .summary{font-size:14px}

  /* 单栏流式布局，侧栏下移为普通块级模块（自然重排） */
  .content-grid{display:block}
  .main-col{padding:0}
  .side-col{padding-top:18px;border-left:0;border-top:1px solid var(--border)}

  .content-body{font-size:15px;line-height:1.7}

  /* FAQ 在移动端堆叠：问题与答案上下排列 */
  .faq-list > *{display:block}
  .faq-list .q{font-weight:600;margin-bottom:6px}
  .faq-list .a{color:var(--muted)}

  /* 相关阅读移动端由两列变为单列摘要列表以充分利用窄屏 */
  .related-list{display:block}
  .related-list > *{padding:10px 0;border-top:1px solid var(--border)}

  .ad-slot{margin:10px 0}

  .site-footer{padding:12px}
}

/* 可访问性与阅读密度调整 */
@media (min-width:768px){
  /* 平板与桌面之间的中间过渡，维持舒展密度 */
  .content-body{line-height:1.75}
}

/* 遵循禁止样式：无渐变发光按钮或重阴影 */
button,a.button{background:none;border:1px solid var(--border);padding:6px 10px;border-radius:4px}