/* 设计变量与基础重置 */
:root{
  --bg-paper:#FBF8F2; /* 纸白 */
  --navy:#0b2b4a; /* 藏蓝 */
  --muted:#5b6b75;
  --accent:#0b2b4a;
  --line:#e6e3dd;
  --max-desktop-width:1320px; /* 在1120-1440范围内取中位 */
  --container-min:1120px;
  --gutter:28px;
  --radius:4px; /* 方角略圆但不大 */
  --family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  --family-serif: Georgia, 'Times New Roman', 'Songti SC', serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-paper);
  color:#16262e;
  font-family:var(--family-sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none}

/* 报刊双层报头 */
.site-header{
  border-bottom:1px solid var(--line);
  background:transparent; /* 遵循无大面积Hero */
}
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
}
.header-top .brand .home{
  font-weight:700;
  color:var(--navy);
  font-size:18px;
}
.header-top .header-meta{color:var(--muted);font-size:13px}

.header-narrow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 20px;
  border-top:1px solid rgba(11,43,74,0.06);
  font-size:13px;
  color:var(--muted);
  background:transparent;
  height:34px; /* 第二层极窄 */
}

/* 广告容器（不得悬浮或覆盖内容） */
.ad{padding:12px 20px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);background:transparent}
.ad-top{margin:14px 0}
.ad-middle{margin:22px 0}
.ad-bottom{margin:26px 0}

/* 页面骨架 */
.page-shell{padding:18px 0 40px}
.container{margin:0 auto;padding:0 20px}
.layout-grid{
  display:grid;
  grid-template-columns:1fr; /* mobile-first */
  gap:24px;
}

/* 文章主体 */
.article{background:transparent}
.article-header{margin-bottom:12px}
.title-row{
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.title{
  font-family:var(--family-serif);
  font-size:28px;
  line-height:1.08;
  margin:0;
  color:var(--navy);
  flex:1 1 auto;
  text-align:left; /* 与页头采用明显不同对齐基线（视觉识别） */
}
.meta-col{
  min-width:160px;
  font-size:13px;
  color:var(--muted);
  text-align:right;
}
.meta-item{margin-bottom:6px}
.summary{
  margin:14px 0 0 0;
  padding:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:15px;
  color:#24363c;
  border-radius:var(--radius);
}

.article-body .content{margin-top:18px}
.article-body .content p{margin:0 0 1em}

.section-title{
  font-size:16px;
  color:var(--navy);
  margin:18px 0 10px;
}

/* 边注（edge note） */
.edge-note{display:none} /* mobile first: integrated below title */
.edge-box{border:1px solid var(--line);background:#fff;padding:14px;border-radius:2px}
.edge-heading{font-weight:700;color:var(--navy);margin-bottom:8px}
.edge-line{font-size:13px;color:var(--muted);margin-bottom:6px}
.edge-line.small{font-size:12px;color:#879597}

/* FAQ 与相关阅读样式 */
.faq-grid{display:block}
.related-grid{display:block}
.related-grid > *{margin-bottom:10px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:18px 20px;color:var(--muted);font-size:13px}
.footer-inner{max-width:1200px;margin:0 auto}

/* Tablet / Desktop 规则（必须包含 min-width:1024px） */
@media (min-width: 1024px){
  body{font-size:16px}
  .title{font-size:34px}
  .title-row{align-items:flex-end}
}

/* 强制桌面容器区间（在视口宽度足够时约束在1120-1440范围） */
@media (min-width: 1120px){
  .container{max-width:var(--max-desktop-width);min-width:var(--container-min);padding:0 32px}
  .layout-grid{
    grid-template-columns:1fr 240px; /* 10 / 2 风格：主列宽、边注固定 */
    gap:32px;
  }
  .article{grid-column:1}
  .edge-note{display:block;grid-column:2}

  /* 主体与边注视觉差异：主文为左对齐，边注为右列对齐，形成不同对齐基线（visual_signature） */
  .article-body .content{padding-right:6px}
  .edge-box{position:sticky;top:80px}

  /* FAQ 两列 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

  /* 相关阅读：四列紧凑网格 */
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid > *{background:#fff;border:1px solid var(--line);padding:10px;font-size:14px;border-radius:2px}
}

/* Mobile rules (max-width:767px) */
@media (max-width:767px){
  .header-top{padding:12px}
  .header-narrow{display:flex;padding:6px 12px}

  .container{padding:0 14px}
  .layout-grid{grid-template-columns:1fr}

  /* 将边注并入标题下方（mobile_contract） */
  .edge-note{display:block;order:2}
  .edge-note .edge-box{margin-top:12px}

  /* title composition：大标题与窄元信息列在垂直方向堆叠 */
  .title-row{flex-direction:column;align-items:flex-start}
  .meta-col{text-align:left;min-width:0;margin-top:8px}

  .title{font-size:22px}
  .summary{font-size:14px}

  /* FAQ 单列 */
  .faq-grid{display:block}

  /* 相关阅读 单列或两列紧凑（保持自然重排） */
  .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .related-grid > *{padding:10px;background:#fff;border:1px solid var(--line)}

  /* 避免横向滚动 */
  body,html{overflow-x:hidden}
}

/* 可访问性与可读性小样式 */
.title, .section-title{letter-spacing:0.2px}
.content p, .summary{word-break:break-word}

/* 视觉约束，避免常见AI模板套路（无大面积渐变、无大圆角、无重阴影） */
*::selection{background:rgba(11,43,74,0.12)}