/* 全局变量与重置 */
:root{
  --accent: #0b3d91; /* 海军蓝强调色 */
  --bg: #fbfbfa; /* 轻纸张底色 */
  --ink: #0b0b0b;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --max-width: 1280px; /* 在1120-1440范围内，由媒体查询保证 */
  --gutter: 28px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}

/* 顶部与刊头：居中刊头与横线导航 */
.site-header{padding:22px 16px 10px;text-align:center}
.header-inner{max-width:var(--max-width);margin:0 auto}
.site-title{font-weight:700;font-size:18px;letter-spacing:0.02em;color:var(--ink)}
.header-rule{height:1px;background:var(--line);margin-top:12px}

/* 页面壳与网格 */
.page-shell{padding:18px}
.layout-grid{max-width:var(--max-width);margin:18px auto;display:grid;grid-template-columns:1fr;gap:24px}

/* 内容区和侧栏基础样式 */
.content{order:1}
.side{order:2}

/* 标题构图：压左并用粗细横线构图，且标题首字/关键词使用强调色（visual_signature） */
.title{margin:6px 0 8px;font-size:28px;line-height:1.08;font-weight:700;text-align:left;color:var(--ink);position:relative}
/* 仅把首字符或首词作为强调：通过首字选择器(仅视觉层面) */
.title::first-letter{color:var(--accent)}

/* 横线构图（粗/细线） */
.article-meta{border-top:1px solid transparent;padding-top:6px;margin-bottom:8px}
.title-rule-strong{height:4px;background:var(--line);margin:8px 0}
.meta-row{color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{margin:6px 0 14px;color:var(--muted);font-size:15px}

/* 正文样式：技术资讯紧凑型，紧凑密度 */
.article-body{font-size:15px;color:var(--ink);word-wrap:break-word}
.article-body p{margin:0 0 12px}
.article-body h2,.article-body h3{margin:14px 0 8px;font-weight:700}
.article-body ul, .article-body ol{margin:0 0 12px 20px}

/* 广告容器视觉上独立但不悬浮 */
.ad{background:transparent;border:1px dashed var(--line);padding:12px;margin:18px 0;color:var(--muted);font-size:13px}
.ad-top{margin-bottom:6px}

/* FAQ：桌面为左右表格式 */
.faq .section-title, .related .section-title{font-size:14px;margin:12px 0;color:var(--muted);font-weight:600}
.faq-grid{display:block}
.faq-grid dl{margin:0;padding:0}
.faq-grid dt{font-weight:600;margin:10px 0}
.faq-grid dd{margin:0 0 10px 0}

/* 相关阅读：编号列表 */
.related-list{margin:6px 0 0 0;padding-left:18px}
.related-list li{margin:6px 0}

/* 侧边栏 */
.side-inner{border-left:1px solid var(--line);padding-left:18px}
.side-block{margin-bottom:16px}
.side-heading{font-weight:700;font-size:13px;color:var(--muted);margin-bottom:8px}
.side-text{font-size:14px;color:var(--muted)}
.home-link{color:var(--ink);font-weight:600}

/* 页脚 */
.site-footer{padding:18px 0;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:24px}

/* 响应式：桌面规则（必须包含 min-width:1024px） */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .page-shell{padding:28px}
  /* 使用非对称8/4网格布局 */
  .layout-grid{grid-template-columns:2fr 1fr;align-items:start;gap:42px}
  .content{order:1}
  .side{order:2}

  /* 标题更大，但不遮挡首屏 */
  .title{font-size:44px}
  .summary{font-size:15px;max-width:900px}

  /* 左侧主栏显示细线网格感：在主内容和侧边之间显性分割 */
  .layout-grid{border-top:1px solid transparent}
  .side-inner{padding-left:28px}

  /* FAQ 左问右答表格式：期望 faq 内容使用 dl/dt/dd 或两列形式 */
  .faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:18px;align-items:start}
  .faq-grid dt{grid-column:1}
  .faq-grid dd{grid-column:2}

  /* 相关阅读使用编号风格且密集排列 */
  .related-list{padding-left:18px}
}

/* 移动端规则（必须包含 max-width:767px） */
@media (max-width:767px){
  :root{--max-width:640px}
  .page-shell{padding:12px}
  .layout-grid{grid-template-columns:1fr;gap:14px}
  .content{order:1}
  .side{order:3}

  /* 标题缩小为单列，保留黑白层次和清晰行距 */
  .title{font-size:20px}
  .summary{font-size:14px}

  /* FAQ 堆叠式显示，问题在上答案在下 */
  .faq-grid{display:block}
  .faq-grid dt{font-weight:700}
  .faq-grid dd{margin-bottom:14px}

  /* 侧栏下移为自然区块（已通过 order 实现），无固定侧栏 */
  .side-inner{border-left:none;padding-left:0}
  .side-block{border-top:1px solid var(--line);padding-top:12px}

  /* 广告不黏底不悬浮 */
  .ad{font-size:13px}

  /* 防止横向滚动 */
  html,body{overflow-x:hidden}
}

/* 可访问性小调整 */
h1{line-height:1.02}
.section-title{font-weight:600}