:root{
  --bg:#f6f8f8;
  --paper:#ffffff;
  --accent:#3aa0c9; /* 湖蓝（强调色） */
  --muted:#6c7680;  /* 青灰 */
  --border:rgba(44,62,71,0.08);
  --radius:2px; /* surface 要求：2px 小圆角 */
  --text:#0f1720;
  --max-page:1400px; /* 页面容器在 1120-1440 之间，取中间值 */
  --content-width:860px; /* 正文宽度约 860px */
  --title-band-width:1120px; /* 标题区较正文更宽 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

/* 基础布局 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);}
.page{max-width:var(--max-page);margin:0 auto;padding:20px 18px 60px;}

/* 报刊双层报头 */
.site-header{margin-bottom:18px}
.header-row{display:flex;align-items:center;justify-content:space-between}
.header-row--meta{font-size:12px;color:var(--muted);letter-spacing:0.04em}
.header-row--brand{margin-top:6px}
.site-home{font-weight:700;text-decoration:none;color:var(--text);font-size:20px}

/* 标题区：两栏布局（大标题 + 窄元信息列） */
.title-band{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;max-width:var(--title-band-width);margin:6px auto 18px;padding:8px}
.article-title{font-size:34px;line-height:1.15;margin:0;flex:1 1 72%;max-width:calc(100% - 220px);word-break:break-word}
.article-title::first-letter{color:var(--accent);font-weight:700}
.title-meta{width:200px;flex:0 0 200px;padding-left:18px;color:var(--muted);font-size:13px}
.title-meta .meta-row{margin-bottom:8px}
.title-meta .kw{color:var(--muted)}

/* 正文（正文容器居中，约860px） */
.article{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin:0 auto 20px;max-width:var(--content-width)}
.summary{color:var(--muted);margin:0 0 14px}
.content{color:var(--text);line-height:1.75;font-size:16px}
.content p{margin:0 0 14px}
.content h2, .content h3{margin:18px 0 8px}

/* 广告位（独立容器，明确边界，不悬浮） */
.ad-slot{max-width:var(--content-width);margin:18px auto;padding:10px;border:1px dashed var(--border);border-radius:var(--radius);background:transparent;color:var(--muted);font-size:14px;text-align:center}
.ad-top{max-width:var(--max-page);margin:6px auto 18px}
.ad-bottom{margin-top:22px}

/* FAQ：期待内部使用 <details> ，无卡片风格 */
.faq{max-width:var(--content-width);margin:20px auto 12px}
.faq h2{font-size:18px;margin:0 0 10px}
.faq details{border-top:1px solid var(--border);padding:10px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--muted)}
.faq details[open] summary{color:var(--text)}

/* 相关推荐：底部三列（desktop_contract），网格紧凑（related_pattern） */
.related{max-width:var(--title-band-width);margin:26px auto 0;padding:6px}
.related h2{font-size:18px;margin:0 0 10px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.related-grid > *{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:10px;font-size:14px;line-height:1.4}
.related-grid a{color:var(--text);text-decoration:none}

/* 脚注 */
.site-footer{max-width:var(--max-page);margin:28px auto 0;color:var(--muted);font-size:13px;text-align:center}

/* Typography 密度（density:舒展） */
h1,h2,h3{letter-spacing:0.01em}

/* 响应式：桌面 @media (min-width:1024px) */
@media (min-width:1024px){
  .page{padding:28px 24px 80px}
  /* 确保页面总体宽度在 1120-1440 范围内表现良好 */
  :root{--max-page:1320px; --title-band-width:1200px}
  .article-title{font-size:40px}
  .content{font-size:17px}
  /* 保证正文宽度约为 860px 居中 */
  .article{max-width:var(--content-width)}
  /* 相关推荐三列为桌面特有布局差异 */
  .related-grid{grid-template-columns:repeat(3,1fr);gap:12px}
}

/* 手机端规则：@media (max-width:767px) - 独立重排（mobile_contract） */
@media (max-width:767px){
  :root{--max-page:100%;--title-band-width:100%}
  .page{padding:12px}
  .header-row--brand .site-home{font-size:18px}
  /* 标题区堆叠：标题与元信息纵向排列 */
  .title-band{display:block;padding:6px;margin-bottom:12px}
  .article-title{font-size:20px;max-width:100%;margin-bottom:8px}
  .title-meta{width:100%;padding-left:0;font-size:13px}

  /* 正文全宽减安全边距 */
  .article{max-width:100%;padding:16px}
  .content{font-size:15px}

  /* FAQ 列表折叠自然区块 */
  .faq{max-width:100%;padding:0}

  /* 相关推荐底部三列变单列（mobile_contract） */
  .related{max-width:100%}
  .related-grid{grid-template-columns:1fr;gap:10px}
  .related-grid > *{padding:12px}

  /* 广告不悬浮、不重叠 */
  .ad-slot{max-width:100%;margin-left:0;margin-right:0}
}

/* 兼容中间屏（768-1023px）保持舒展但不过度拥挤 */
@media (min-width:768px) and (max-width:1023px){
  .article-title{font-size:28px}
  .article{max-width:720px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}