/* 全局变量与基本排版 */
:root{
  --navy: #0b2b45; /* 海军蓝 */
  --mist: #f3f6f7; /* 浅雾灰 */
  --text: #12202b;
  --muted: #6b7a82;
  --max-site-width: 1320px; /* 在 1120-1440 范围内 */
  --meta-col: 140px;
  --gap: 28px;
}

/* 系统字体，人文杂志感：稍大字距与宽松行距 */
html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:18px;
  line-height:1.85; /* 宽松型 */
  word-wrap:break-word;
}

a{color:inherit; text-decoration:none}

.site-header{background:var(--navy); color:#fff;}
.header-inner{
  max-width:var(--max-site-width);
  margin:0 auto;
  padding:12px calc(16px + 2vw);
  display:flex;
  align-items:center;
  gap:12px;
}
.brand{
  font-weight:700;
  letter-spacing:0.6px;
  display:inline-block;
}
.header-tools{margin-left:auto}

/* 栏目索引条 - 紧凑文本型 */
.nav-index{background:transparent; border-top:1px solid rgba(0,0,0,0.04); border-bottom:1px solid rgba(0,0,0,0.04);}
.nav-inner{max-width:var(--max-site-width); margin:0 auto; padding:8px calc(16px + 2vw);}
.nav-list{list-style:none; margin:0; padding:0; display:flex; gap:14px; font-size:14px; color:var(--muted)}
.nav-list li{display:inline-flex; align-items:center}

/* 广告容器（独立块，不干扰正文） */
.ad{max-width:var(--max-site-width); margin:18px auto; padding:6px calc(16px + 2vw); color:var(--muted); font-size:13px;}
.ad--top{margin-top:20px}
.ad--middle{margin:28px auto}
.ad--bottom{margin-bottom:28px}

/* 页面主区：使用横向色带(fullwidth-bands) */
.page-main{background:transparent}
.site-inner{max-width:var(--max-site-width); margin:0 auto;}
.band{padding:18px 0;}
.band-inner{padding:0 calc(18px + 2vw);}

/* 标题色带：深色报头，标题居中，摘要左对齐；桌面显示元信息纵向沿边 */
.band--title{background:var(--navy); color:#fff;}
.band--title .band-inner{display:block}
.band-grid{display:grid; grid-template-columns: var(--meta-col) 1fr; align-items:center; gap:var(--gap);}
.meta-vertical{display:none} /* 默认在移动端隐藏，桌面启用 */
.title-area{text-align:center; padding:22px 0}
.title{margin:0; font-size:28px; line-height:1.15; font-weight:700}
.summary{margin:14px 0 0 0; color:rgba(255,255,255,0.9); font-size:16px; text-align:left; max-width:76%; margin-left:auto; margin-right:auto}

/* 正文色带 */
.band--content{background:#fff}
.content-wrap{display:flex; justify-content:center}
.article-body{max-width:760px; width:100%; color:var(--text); font-size:18px; line-height:1.9}
.article-body p{margin:0 0 1.05em}
.article-body h2, .article-body h3{margin:1.2em 0 0.5em; font-weight:600}
.article-body ul, .article-body ol{margin:0 0 1em 1.3em}

/* FAQ 区：主题色顶部边线 */
.band--faq{background:var(--mist)}
.faq-wrap{border-top:4px solid var(--navy); padding-top:16px}
.faq-inner{max-width:900px}

/* 相关阅读：两列摘要列表 */
.band--related{background:transparent}
.related-wrap{max-width:1100px}
.related-title{margin:0 0 12px 0; font-size:16px; color:var(--muted)}
.related-list{display:grid; gap:12px}
.related-list > *{padding:10px; background:#fff; border:1px solid rgba(0,0,0,0.04); box-sizing:border-box}

/* 页脚 */
.site-footer{border-top:1px solid rgba(0,0,0,0.06); color:var(--muted); font-size:13px}
.footer-inner{max-width:var(--max-site-width); margin:16px auto; padding:0 calc(16px + 2vw)}

/* 桌面规则：1024px 及以上，形成非对称网格与边注（必须实现桌面专属结构差异） */
@media (min-width:1024px){
  body{font-size:18px}
  .header-inner{padding:18px calc(24px + 2vw)}
  .nav-inner{padding:12px calc(24px + 2vw)}

  /* 标题区在桌面变为双列：左侧纵向元信息，右侧为正文带 */
  .band--title .band-inner{display:grid; grid-template-columns: var(--meta-col) 1fr; align-items:center}
  .meta-vertical{display:block; color:rgba(255,255,255,0.85)}
  .meta-stack{writing-mode:vertical-rl; transform:rotate(180deg); text-orientation:mixed; font-size:13px}
  .title-area{text-align:center; padding:30px 0}
  .title{font-size:34px}
  .summary{color:rgba(255,255,255,0.92); text-align:left; margin:10px 0 0 0; max-width:680px}

  /* 主容器宽度限制确保在合同范围内 */
  .site-inner{max-width:1320px}

  /* 正文及边注对齐：正文居中，页面呈编辑部式组合 */
  .band--content .band-inner{display:grid; grid-template-columns: 1fr 780px 1fr;}
  .content-wrap{grid-column:2;}
  .article-body{max-width:720px}

  /* 相关阅读两列 */
  .related-list{grid-template-columns:repeat(2,1fr)}
}

/* 手机规则：<=767px，单列重排，取消过宽内边距，色带轻量区分 */
@media (max-width:767px){
  :root{--gap:16px}
  .header-inner{padding:10px 14px}
  .nav-inner{padding:8px 14px}
  .band-inner{padding:0 14px}
  .ad{padding:6px 14px}

  /* 所有色带取消过宽内边距并自然单列 */
  .band-grid{grid-template-columns:1fr}
  .meta-vertical{display:none}
  .title-area{text-align:left}
  .title{font-size:20px}
  .summary{margin-top:8px; color:var(--muted); max-width:100%}

  /* 正文宽度随屏幕走，避免横向滚动 */
  .band--content .band-inner{padding-left:14px; padding-right:14px}
  .content-wrap{justify-content:stretch}
  .article-body{font-size:16px; line-height:1.95}

  /* FAQ 与相关区变为单列 */
  .faq-wrap{padding-top:12px}
  .related-list{grid-template-columns:1fr}
  .related-list > *{padding:12px}
}

/* 可访问性与可读性补充 */
.title, .related-title{line-height:1.1}
.article-body img{max-width:100%; height:auto}

/* 禁止阴影来表达层级（符合 forbidden_pattern） - 不使用阴影 */