:root{
  --navy:#0b2340; /* 藏蓝 */
  --paper:#fbf8f3; /* 纸白 */
  --text:#16202b;
  --muted:#55646b;
  --accent:#0b2340;
  --max-body-width:860px; /* 正文目标宽度 */
  --max-title-width:1100px; /* 标题区较宽 */
  --gap:18px;
  --base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 全局重置与版面基准 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--base-font);
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}
.site-root{display:flex;flex-direction:column;min-height:100vh}

/* 广告容器，独立不覆盖正文 */
.ad-slot{width:100%;padding:10px 16px;text-align:center;font-size:14px;color:var(--muted)}
.ad-slot > *{display:inline-block}

/* 报头：左右分置，第二层极窄 */
.masthead{background:transparent;padding:18px 24px 6px}
.masthead-inner{display:flex;align-items:flex-end;justify-content:space-between;max-width:1440px;margin:0 auto}
.masthead-left{display:flex;flex-direction:column}
.brand{font-weight:700;color:var(--navy);text-decoration:none;font-size:20px}
.strap{color:var(--muted);font-size:13px;margin-top:6px}
.masthead-right{font-size:13px;color:var(--muted)}
.masthead-rail{height:4px;background:var(--navy);opacity:0.12;margin-top:10px;max-width:1440px;margin-left:auto;margin-right:auto}

/* 主区：标题与正文采用不同宽度基线（视觉识别特征） */
.page{flex:1;display:flex;justify-content:center;padding:24px}
.article{width:100%;max-width:1440px}

/* 标题区域：较宽，左侧大标题，右侧窄元信息列 */
.title-area{display:flex;align-items:flex-start;justify-content:center;gap:24px;padding:6px 16px 18px}
.title-wrap{max-width:var(--max-title-width);flex:1}
.title{margin:0;color:var(--navy);font-size:28px;line-height:1.12;font-weight:700}
.summary{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:var(--max-title-width)}
.meta-col{width:220px;flex:0 0 220px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:8px}
.meta-item{border-left:3px solid transparent;padding-left:10px}
.meta-item strong{color:var(--navy);font-weight:600}
.kw{color:var(--text)}

/* 正文：约860px居中，排版紧凑 */
.article-body{display:flex;justify-content:center;padding:8px 16px 24px}
.content{width:100%;max-width:var(--max-body-width);text-align:justify;color:var(--text);font-size:15px;line-height:1.6}
.content p{margin:0 0 12px}
.content h2, .content h3{color:var(--navy);margin:18px 0 8px}

/* 问答区：主题色顶部边线 */
.faq{max-width:var(--max-body-width);margin:18px auto 12px;padding-top:12px;border-top:4px solid var(--accent)}
.faq-title{margin:0 0 8px;font-size:16px;color:var(--navy)}
.faq-body{color:var(--muted);font-size:14px}

/* 相关阅读：关键词索引式列表 */
.related{max-width:var(--max-body-width);margin:18px auto 28px;padding:0 6px}
.related-title{margin:0 0 10px;color:var(--navy);font-size:15px}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.related-list a{display:inline-block;padding:6px 8px;border-radius:4px;color:var(--navy);text-decoration:none;border:1px solid rgba(11,35,64,0.06);font-size:13px}

/* 页脚 */
.site-footer{border-top:1px solid rgba(11,35,64,0.06);padding:12px 24px;background:transparent}
.footer-inner{max-width:1440px;margin:0 auto;color:var(--muted);font-size:13px}

/* 桌面专属规则：1024px 及以上（明确要求） */
@media (min-width:1024px){
  body{font-size:16px}
  .title{font-size:34px}
  .masthead-inner{padding:6px 0}
  /* 标题区更显宽：保持标题区比正文更宽 */
  .title-wrap{max-width:var(--max-title-width)}
  .content{max-width:var(--max-body-width)}
  /* 相关阅读三列在桌面成立 */
  .related-list{grid-template-columns:repeat(3,1fr)}
  /* 视觉差异：页头与正文采用明显不同的对齐基线 */
  .masthead-left .brand{transform:translateY(2px)}
  .title{transform:translateY(-2px)}
}

/* 手机端规则：最大宽度 767px（明确要求） */
@media (max-width:767px){
  .masthead-inner{flex-direction:row;align-items:center;justify-content:space-between;padding:8px 12px}
  .masthead-rail{display:none}
  .title-area{flex-direction:column;align-items:stretch;padding:12px}
  .meta-col{width:auto;flex-direction:row;gap:10px;flex-wrap:wrap;background:transparent;padding:8px 0;border-top:1px solid rgba(11,35,64,0.04);margin-top:8px}
  .meta-item{border-left:none;padding-left:0}
  .title{font-size:20px}
  .summary{font-size:13px}
  .article-body{padding:6px}
  .content{max-width:100%;padding:0 6px;text-align:left}
  .related-list{display:block}
  .related-list a{display:block;padding:10px 8px;border-bottom:1px solid rgba(11,35,64,0.06)}
  .faq{padding-top:10px}
  .ad-slot{padding:8px}
  /* 确保无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间平板折衷（768-1023） */
@media (min-width:768px) and (max-width:1023px){
  .title{font-size:26px}
  .meta-col{width:200px}
  .related-list{grid-template-columns:repeat(2,1fr)}
}

/* 可访问性与细节 */
a{color:var(--navy)}
h1,h2,h3{line-height:1.18}
