/* 主题变量 —— 炭黑与暖灰 */
:root{
  --bg:#ffffff;
  --charcoal:#222422; /* 主色，炭黑 */
  --warm-gray:#8b8076; /* 暖灰 */
  --muted:#6b655f;
  --accent:#2b2b2b; /* 用于1px竖线 */
  --max-width:1320px; /* 在1120-1440之间，居中 */
  --gutter:20px;
  --line:1px;
  --title-size:28px;
  --base-size:16px;
  --dense-leading:1.45;
  --ui-bg:#f6f4f2;
}

/* 全局重置与版面基准 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--charcoal);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:var(--base-size);
  line-height:var(--dense-leading);
}

/* 报头：深色条（报头风格） */
.site-header{background:var(--charcoal);color:var(--bg);padding:10px 0}
.header-row{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0 16px}
.nav-side{display:flex;gap:14px;align-items:center}
.nav-item{font-size:14px;color:var(--ui-bg);opacity:0.95}
.brand{position:relative;text-align:center;flex:0 0 auto}
.brand-link{color:var(--bg);text-decoration:none;font-weight:700;font-size:18px;letter-spacing:0.6px}

/* 主布局容器及1px竖线视觉签名（贯穿容器左侧） */
.layout-wrap{max-width:var(--max-width);margin:18px auto;padding:0 var(--gutter);position:relative;border-left:var(--line) solid var(--accent)}

/* 主网格：桌面为非对称 8:4；移动为单列 */
.main-grid{display:grid;grid-template-columns:1fr;gap:20px}
.article{background:var(--bg)}
.sidebar{background:transparent}

/* 标题组合：标题居中，摘要左对齐 */
.article-header{padding:6px 0 12px}
.article-title{margin:6px 0 8px;text-align:center;font-weight:800;font-size:var(--title-size);line-height:1.1;letter-spacing:0.2px}
.article-meta{display:flex;gap:12px;justify-content:center;font-size:13px;color:var(--warm-gray);margin-bottom:8px}
.summary{max-width:980px;margin:0 auto 14px;text-align:left;color:var(--muted)}

/* 正文：宽阔可读的版心 */
.article-body{background:var(--bg);padding:6px 0;color:var(--charcoal);font-size:16px;line-height:1.7}
.article-body p{margin:0 0 1em}

/* 广告槽（独立容器，不在标题与摘要之间） */
.ad-slot{border:var(--line) solid #e6e1dd;padding:10px;margin:16px 0;background:transparent;color:var(--muted);font-size:14px}
.ad-slot[aria-label]{font-style:normal}

/* FAQ 区域：桌面左问右答，移动自然堆叠 */
.faq-section{margin-top:18px;padding-top:6px;border-top:var(--line) solid #e9e4df}
/* 若 faq 使用 dl/dt/dd 或自定义结构，尽量使用 CSS 适配 */
.faq-section dl{margin:0}
.faq-section dt{font-weight:600;color:var(--charcoal)}
.faq-section dd{margin:0 0 12px 0;color:var(--muted)}

/* 相关阅读：桌面四列紧凑网格，移动单列 */
.related-section{margin-top:18px;padding-top:6px;border-top:var(--line) solid #e9e4df}
.related-heading{font-size:15px;margin:8px 0;color:var(--charcoal)}
.related-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:8px}
.related-grid a{color:var(--charcoal);text-decoration:none;font-size:14px}

/* 侧边栏信息区：方正信息块 -> 桌面右栏两块不同高度 */
.sidebar{display:block}
.info-block{background:#fff;border:var(--line) solid #e6e1dd;padding:12px;margin-bottom:18px}
.info-top{min-height:220px}
.info-bottom{min-height:360px}
.info-heading{margin:0 0 6px 0;font-size:14px;color:var(--charcoal)}

/* 页脚 */
.site-footer{padding:18px 0;text-align:center;color:var(--muted);border-top:var(--line) solid #f0ece9;margin-top:28px}

/* 桌面规则：使用非对称网格 8:4，正文为八列宽度，右栏由两块不同高度组成，推荐四列 */
@media (min-width:1024px){
  .main-grid{grid-template-columns:2fr 1fr;gap:28px;align-items:start}
  .layout-wrap{margin-top:24px}

  /* 保证页面容器宽度在1120-1440之间 (var --max-width = 1320) */
  @media (min-width:1120px){:root{--max-width:1320px}}

  .article{order:1}
  .sidebar{order:2}

  /* 正文更宽，保证不会被窄化为手机行宽 */
  .article-body{max-width:none}

  /* FAQ：桌面表格式（左问题右答案）
     支持 dl dt/dd 以及 .faq-item .q/.a 形式 */
  .faq-section{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .faq-section dl{grid-column:1 / -1}
  .faq-section dl dt{grid-column:1 / 2;padding-right:10px}
  .faq-section dl dd{grid-column:2 / 3}

  /* 相关阅读四列紧凑 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid a{display:block;padding:6px 8px;border:var(--line) solid #efeae6;background:#fff}

  /* 视觉签名：1px 竖线在容器左侧已经由 .layout-wrap border-left 实现 */
}

/* 手机规则：320px 宽度时不横向滚动，侧栏下移、信息区变为正文后的两段列表，相关阅读单列 */
@media (max-width:767px){
  :root{--gutter:12px;--title-size:20px}
  .layout-wrap{padding:0 12px;border-left:none}
  .header-row{padding:0 12px}
  .article-title{text-align:center;font-size:20px}
  .article-meta{flex-direction:column;align-items:center;gap:6px}
  .summary{text-align:left;padding:0 6px}
  .article-body{padding:0 6px}

  /* 主网格变为单列，侧栏下移为正文之后的区块 */
  .main-grid{grid-template-columns:1fr}
  .sidebar{order:3}

  /* FAQ: 自然堆叠 */
  .faq-section{display:block}
  .faq-section dl dt,.faq-section dl dd{grid-column:auto}

  /* 相关阅读变单列 */
  .related-grid{grid-template-columns:1fr}
  .related-grid a{padding:10px;border-top:var(--line) solid #ece7e3}

  /* 广告不可覆盖、不可固定 */
  .ad-slot{position:static}

  /* 保证在320px无横向滚动 */
  img,table{max-width:100%;height:auto}
}

/* 可读性与紧凑排版细节 */
h1,h2,h3,h4{margin:0}
p{margin:0 0 12px}
a{color:inherit}

/* 禁止圆角卡片的统一应用：不设置大圆角，仅使用方形信息块 */
.info-block, .related-grid a, .ad-slot{border-radius:0}

/* 可访问性小调整 */
.header-row .nav-item, .brand-link{outline-offset:3px}