:root{
  --graphite:#2b2b2b; /* 石墨灰 */
  --muted:#6f6f6f;
  --accent:#d1a600; /* 芥末黄 */
  --bg:#ffffff;
  --header-bg:#1f1f1f; /* 深色报头 */
  --max-width:1200px; /* 在1120-1440之间 */
  --gutter:20px;
  --radius:4px; /* 方形信息块，轻微圆角 */
}

/* 基础排版（系统字体） */
html,body{height:100%;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color:var(--graphite);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header: 左对齐紧凑品牌栏 + 居中站名与左右文本链接 */
.site-header{background:var(--header-bg);color:#fff;padding:8px 12px}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:600;color:#fff;font-size:14px}
.brand .home{color:inherit;font-weight:700}
.top-nav{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);flex:1;justify-content:center}
.top-nav .nav-left,.top-nav .nav-right{opacity:0.9}
.top-nav .nav-center{color:var(--accent);font-weight:700}

/* 主容器 */
.container{max-width:var(--max-width);margin:18px auto;padding:0 var(--gutter)}
.layout-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}

/* Article */
.article{background:var(--bg);color:var(--graphite)}
.article-head{padding:6px 0 12px;border-bottom:1px solid #eee}
.title{font-family: Georgia, "Times New Roman", Times, serif; /* 标题衬线 */
  font-size:36px;margin:0 0 10px;color:var(--graphite);line-height:1.15}
.title-meta{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.summary{margin:12px 0 0;color:var(--muted);font-size:15px}

/* 正文区，保证直接可见 */
.article-body{padding-top:18px}
.content{font-size:16px;color:var(--graphite);max-width:900px}
.content p{margin:0 0 12px}

/* 信息侧栏（方形信息块） */
.side-meta{background:#fafafa;border:1px solid #eee;padding:12px;border-radius:var(--radius)}
.meta-block{background:#fff;padding:12px;border-radius:var(--radius);border:1px solid #f0f0f0}
.meta-title{font-weight:700;color:var(--graphite);margin-bottom:8px}
.meta-list{list-style:none;padding:0;margin:0;font-size:14px;color:var(--muted)}
.meta-list li{padding:6px 0;border-top:1px dashed #f3f3f3}
.meta-list li:first-child{border-top:0;padding-top:0}

/* 广告容器，独立且不可覆盖正文 */
.ad-slot{margin:18px 0;padding:10px;border:1px dashed #e6e6e6;background:#fff;color:var(--muted);font-size:14px}
.ad-top{margin-top:12px}
.ad-middle{margin:20px 0}
.ad-bottom{margin-top:24px}

/* Related：视觉签名，反向色块标题栏 + 编号列表 */
.related{margin-top:20px}
.related-heading{background:var(--accent);color:#fff;padding:8px 10px;border-radius:2px;font-weight:700;margin-bottom:8px}
.related-list{counter-reset:item;margin:0;padding:0 0 0 0}
.related-list li{list-style:none;padding:8px 10px;border-bottom:1px solid #f3f3f3;display:flex;gap:10px;align-items:flex-start}
.related-list li::before{counter-increment:item;content:counter(item)".";color:var(--accent);font-weight:700;margin-right:8px}
.related-list li a{color:var(--graphite)}

/* FAQ 使用 details 折叠，无卡片 */
details{margin:8px 0;padding:6px 0}
summary{cursor:pointer;font-weight:600}
details[open] summary{color:var(--accent)}
details p{margin:8px 0 0;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:14px 0;margin-top:30px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);color:var(--muted);font-size:13px}

/* Accessibility and small touches */
.divider{opacity:0.5}

/* 禁止浮动卡片阴影与模糊，遵循 forbidden_pattern */
.box{box-shadow:none}

/* 桌面端（>=1024px）：非对称双栏，标题配窄元信息列，正文和FAQ宽窄交替布局 */
@media (min-width:1024px){
  .title{font-size:44px}
  .layout-grid{grid-template-columns:1fr 320px;gap:36px}
  /* 在宽屏上让 FAQ 在侧栏显示为宽窄交替：侧栏承载FAQ与精简信息 */
  .article-body{display:grid;grid-template-columns:1fr 320px;gap:28px}
  .content{grid-column:1 / 2}
  .faq{grid-column:2 / 3}
  .related{grid-column:1 / 2}
  .side-meta{position:sticky;top:84px}
}

/* 手机端（<=767px）：紧凑连续，站名、标题、摘要、正文紧凑连续，侧栏下移 */
@media (max-width:767px){
  :root{--gutter:12px}
  .header-inner{padding:0 6px}
  .title{font-size:20px}
  .container{padding:0 12px;margin:10px auto}
  .layout-grid{grid-template-columns:1fr;gap:12px}
  .article-body{display:block}
  .side-meta{order:3}
  .ad-slot{margin:12px 0}
  .brand{font-size:13px}
  .top-nav{display:flex;gap:8px;font-size:12px;justify-content:center}
  .nav-left,.nav-right{display:inline-block}
  .nav-center{font-size:13px}
  /* 确保在窄屏下无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 保证在 320px 时无横向滚动，文字不截断 */
@media (max-width:320px){
  body{font-size:15px}
  .title{font-size:18px}
  .related-list li{padding-right:6px}
}