/* 样式变量与基线 */
:root{
  --brand-dark:#0b2740; /* 藏蓝 */
  --paper:#FAF7F0;      /* 纸白 */
  --muted:#6b7680;
  --rule:rgba(11,39,64,0.06);
  --max-width:1280px; /* 在1120-1440之间取值 */
  --content-gap:28px;
  --rhythm:20px; /* 基线节奏 */
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--brand-dark);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px 16px;
}

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

/* 报刊双层报头 */
.site-header{max-width:var(--max-width);margin:0 auto 18px;}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;color:var(--brand-dark)}
.site-home{font-weight:700;letter-spacing:0.6px}
.header-year{font-size:0.9rem;color:var(--muted)}
.header-line{height:2px;background:linear-gradient(90deg,transparent,rgba(11,39,64,0.06),transparent);margin-top:8px}

/* 页面容器 */
.page{max-width:var(--max-width);margin:0 auto}
.article-wrap{background:transparent}

/* 标题与摘要左右分置（桌面）以及紧凑标题、舒展正文 */
.title-composition{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.title{font-size:1.6rem;margin:0;font-weight:800;line-height:1.05}
.lead{margin:0;color:var(--muted);max-width:52ch}

.meta-row{display:flex;gap:18px;margin-top:10px;color:var(--muted);font-size:0.92rem}
.section-sep{border:0;border-top:1px solid var(--rule);margin:18px 0}

/* 核心网格：桌面 10/2 非对称 */
.content-grid{display:block}
.content-main{min-height:120px}
.content-body{background-image:
  repeating-linear-gradient( to bottom,
    transparent 0px,
    transparent calc(var(--rhythm) - 1px),
    rgba(11,39,64,0.02) calc(var(--rhythm) - 1px),
    transparent calc(var(--rhythm))
  ),
  linear-gradient(transparent,transparent);
  /* 上述为双层基线网格的视觉签名，细线且低对比 */
  padding:6px 0 40px 0;
}
.content-body p{margin:0 0 1rem 0}

/* 边注样式：无卡片、简洁、显示关键词 */
.content-aside{margin-top:18px}
.aside-inner{padding:6px 0}
.aside-heading{font-size:0.95rem;margin:0 0 8px 0;color:var(--brand-dark)}
.keywords{margin:0;color:var(--muted);word-break:break-word}

/* 广告容器：独立、不可遮挡、不浮动 */
.ad-slot{max-width:var(--max-width);margin:20px auto;padding:10px 12px;border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule);background:transparent;color:var(--muted);font-size:0.95rem}

/* FAQ 与 相关阅读 */
.section-title{font-size:1rem;margin:0 0 12px 0;color:var(--brand-dark);font-weight:700}
.faq-section,.related-section{margin-top:22px;padding-bottom:6px}
.faq-list{display:block}
.related-list{display:block}

/* 页脚 */
.site-footer{max-width:var(--max-width);margin:34px auto 12px;color:var(--muted);font-size:0.92rem}

/* 桌面特殊布局（>=1024px）——必须存在与手机不同的版式 */
@media (min-width:1024px){
  body{padding:36px}
  .title{font-size:2.4rem}
  .lead{font-size:1.06rem}
  .title-composition{align-items:flex-end}

  /* 10/2 网格 */
  .content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start}
  .content-main{grid-column:1 / span 10}
  .content-aside{grid-column:11 / span 2}
  .content-body{padding-right:6px}

  /* FAQ 两列 */
  .faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

  /* 相关阅读：两列摘要列表 */
  .related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
}

/* 手机端规则（<=767px）：边注并入标题下方，所有内容取消固定宽度 */
@media (max-width:767px){
  body{padding:12px}
  .page{width:auto}
  .title{font-size:1.25rem}
  .lead{font-size:0.98rem}
  .title-composition{flex-direction:column;align-items:flex-start}
  .meta-row{flex-direction:column;gap:6px}

  /* 单栏流式 */
  .content-grid{display:block}
  .content-aside{order:2;margin-top:12px}
  .content-main{order:1}

  /* FAQ 单列 */
  .faq-list{display:block}
  .faq-list > *{margin-bottom:12px}

  /* 相关阅读改为单列摘要列表以兼容小屏 */
  .related-list{display:block}
  .related-list > *{margin-bottom:10px}

  /* 广告区适配小屏 */
  .ad-slot{margin:16px 0}
}

/* 可访问性与细节 */
.title, .section-title{word-break:break-word}
.content-body img{max-width:100%;height:auto}