/* 全局变量与基础（基于黑白与一色强调） */
:root{
  --bg:#ffffff; /* 暖灰可用于局部底色 */
  --ink:#111111; /* 炭黑 */
  --muted:#6b6b6b; /* 暖灰文本 */
  --accent:#8a8a8a; /* 单一强调色（暖灰系）用于细线与小标题） */
  --max-desktop-width:1200px; /* 在1120-1440之间选择居中宽度 */
  --gap:22px;
  --line:1px;
  --page-padding:18px;
  --title-font: 'Georgia', 'Times New Roman', serif;
  --body-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 全局重置与可读性 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%}

.page-wrap{display:flex;flex-direction:column;min-height:100vh}

/* 顶部广告（不悬浮） */
.ad-slot{border-top:var(--line) solid var(--accent);border-bottom:var(--line) solid transparent;padding:10px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-top{border-bottom:var(--line) solid transparent}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:28px}

/* Header: 栏目索引式导航 */
.site-header{border-bottom:var(--line) solid var(--accent);background:transparent;padding:12px var(--page-padding)}
.nav-index{display:flex;align-items:center;gap:18px;max-width:var(--max-desktop-width);margin:0 auto;width:100%;}
.brand{font-weight:700;letter-spacing:0.02em;font-family:var(--title-font);}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:center}
.nav-list li{font-size:14px;color:var(--muted)}

/* 容器与主结构（mobile-first 单列） */
.container{display:block;max-width:100%;padding:18px var(--page-padding);margin:0 auto;box-sizing:border-box}

.content-area{border:var(--line) solid rgba(0,0,0,0.06);padding:18px;background:transparent}

/* 标题：居中，超大但不遮挡首屏；移动端缩小 */
h1{font-family:var(--title-font);font-size:22px;line-height:1.12;margin:8px 0 10px;text-align:center;color:var(--ink)}

.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin-bottom:12px}
.meta time{color:var(--muted)}
.meta .current{margin-left:6px}

/* 摘要左对齐 */
.description{margin:8px 0 16px;padding:10px;border:var(--line) solid rgba(0,0,0,0.04);background:rgba(0,0,0,0.02);text-align:left;color:var(--muted);}

.article-body{color:var(--ink);line-height:1.8;font-size:16px;word-wrap:break-word}
.article-body p{margin:0 0 1em}

/* FAQ：编号样式（如果 {{faq}} 是列表，样式会适配） */
.faq{margin-top:22px;padding-top:12px;border-top:var(--line) solid rgba(0,0,0,0.04)}
.faq h2{font-size:15px;margin:0 0 10px;color:var(--ink);font-weight:600}
.faq-list ol{padding-left:24px;margin:0;color:var(--muted)}
.faq-list li{margin:0 0 8px}

/* 侧栏（移动端呈现为顺序折叠在正文之后） */
.sidebar{margin-top:20px}
.related h3{font-size:14px;margin:0 0 10px;color:var(--ink);font-weight:600}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid > *{padding:8px;border:var(--line) solid rgba(0,0,0,0.04);background:transparent;color:var(--muted);font-size:14px}

.site-footer{border-top:var(--line) solid rgba(0,0,0,0.04);padding:14px var(--page-padding);margin-top:auto;color:var(--muted);text-align:center}

/* 视觉签名：全页只使用直角和细线（无圆角、无阴影） */
*{border-radius:0}

/* 手机端限制：320px 时不出现横向滚动 */
@media (max-width:767px){
  :root{--page-padding:14px;--gap:14px}
  .container{padding:12px var(--page-padding)}
  h1{font-size:20px}
  .article-body{font-size:15px;line-height:1.9}
  .related-grid{grid-template-columns:1fr}
  .nav-list{display:none} /* 紧凑导航，保留品牌 */
  .brand{font-size:15px}
  .meta{font-size:12px}
  /* 侧栏折叠为自然区块（已在DOM顺序中） */
  .sidebar{margin-top:18px}
  /* 确保侧边不会固定或重叠 */
  .ad-slot{font-size:12px;padding:8px 0}
}

/* 平板/桌面：1120-1440 宽度内按合同实现 8/4 分栏与非对称网格 */
@media (min-width:1024px){
  .container{display:grid;grid-template-columns:8fr 4fr;gap:36px;max-width:var(--max-desktop-width);padding:28px;align-items:start}
  .content-area{padding:28px}
  h1{font-size:48px;line-height:1;margin-bottom:6px;text-align:center;letter-spacing:-0.01em}
  .description{max-width:75%;text-align:left}
  .article-body{font-size:17px;line-height:1.9}
  .sidebar{padding:0}
  /* related 四列紧凑网格 */
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid > *{font-size:13px;padding:8px;border:var(--line) solid rgba(0,0,0,0.04)}
  /* 在桌面至少有一处结构差异：边注与正文并列 */
  .meta{margin-bottom:14px}
  .ad-middle{margin-top:20px}
}

/* 中间断点：保持可读性 */
@media (min-width:768px) and (max-width:1023px){
  h1{font-size:28px}
  .container{padding:20px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 可访问性小调整 */
h1,h2,h3{color:var(--ink)}
button, a{outline-color:var(--accent)}