/* 设计变量与基础 */
:root{
  --bg:#f7fbfb; /* 淡青灰底 */
  --surface:#ffffff;
  --ink:#0d2630; /* 深青灰 */
  --muted:#6b7c82;
  --accent:#2b9db8; /* 湖蓝 */
  --line:rgba(43,157,184,0.18);
  --max-content-width:1320px; /* 在1120-1440区间选择 */
  --gutter:24px;
  --serif: "Times New Roman", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
}

/* 基础排版与重置 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto}

/* 报头：窄报头，左右分置站名与面包屑（工具栏） */
.site-header{
  background:transparent;
  padding:12px var(--gutter);
  border-bottom:1px solid rgba(13,38,48,0.06);
}
.header-inner{
  max-width:var(--max-content-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-name{font-weight:700;color:var(--ink);font-size:16px}
.crumbs{font-size:13px;color:var(--muted)}
.ad-container{max-width:var(--max-content-width);margin:12px auto}

/* 主体容器 */
.page-wrap{padding:20px 12px 40px}
.article{max-width:var(--max-content-width);margin:0 auto;background:transparent}

/* 标题构图：紧凑标题加关键词眉题 */
.eyebrow{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:6px}
.title{font-family:var(--serif);font-size:28px;margin:0;color:var(--ink);line-height:1.15}
.meta{margin-top:8px;font-size:13px;color:var(--muted)}
.summary{margin-top:16px;padding:14px 0;color:var(--muted);font-size:15px}
.section-rule{border:0;border-top:1px solid var(--line);margin:18px 0}
.thin-rule{border:0;border-top:1px solid rgba(13,38,48,0.06);margin:8px 0}

/* 内容布局基线 */
.content-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;position:relative}
.visual-line{position:absolute;left:calc(50% - 660px);top:0;bottom:0;width:1px;background:var(--accent);opacity:0.14;display:none}
.main-column{order:1}
.edge-note{order:2}

.content{background:transparent;padding:0;font-size:16px;color:var(--ink)}
.content p{margin:0 0 1em}
.content h2{font-family:var(--serif);margin:1.2em 0 0.6em}

/* 边注样式 */
.edge-note{background:transparent;padding:12px 8px;color:var(--muted);font-size:14px}
.note-inner{position:sticky;top:20px}
.note-title{font-weight:700;color:var(--accent);margin-bottom:8px}

/* 底部错位网格：FAQ 与 推荐不同宽度错位排列 */
.bottom-grid{display:block;margin-top:20px}
.faq,.related{background:transparent;padding:12px}
.section-title{font-family:var(--serif);font-size:18px;margin:0 0 10px}
.faq-list{counter-reset:faq;list-style:none;padding:0;margin:0}
.faq-list li{counter-increment:faq;padding:10px 0;border-top:1px dashed rgba(13,38,48,0.04)}
.faq-list li::before{content:counter(faq) ". ";font-weight:700;color:var(--accent);margin-right:8px}

.related-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:10px}
.related-grid a{display:block;color:var(--ink);font-size:14px}

/* 页脚 */
.site-footer{padding:18px 12px;background:transparent;border-top:1px solid rgba(13,38,48,0.04)}
.footer-inner{max-width:var(--max-content-width);margin:8px auto;color:var(--muted);font-size:13px}

/* 禁用悬浮/玻璃/大圆角等视觉套路（视觉约束） */
*{box-shadow:none}

/* 桌面布局（>=1024px）——实现合同要求 */
@media (min-width:1024px){
  .page-wrap{padding:28px}
  .title{font-size:40px}
  .article{padding:0 20px}

  /* 内容容器宽度约定，位于1120-1440范围内 */
  :root{--max-content-width:1280px}

  .header-inner{padding:0 6px}
  .ad-container{margin:10px auto}

  /* 编辑部堆叠：H1 跨栏，摘要跨栏，正文 10/2 边注 */
  .content-layout{display:grid;grid-template-columns:calc((10/12)*1fr) calc((2/12)*1fr);gap:28px;align-items:start}
  .visual-line{display:block;left:calc((10/12)*50% + 40px);opacity:1}

  .main-column{grid-column:1/2}
  .edge-note{grid-column:2/3}

  /* 底部FAQ与推荐不同宽度错位排列：FAQ偏宽，相关阅读偏窄并上移部分以错位 */
  .bottom-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
  .faq{grid-column:1/2}
  .related{grid-column:2/3;margin-top:28px}

  /* 相关阅读四列紧凑标题网格 */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .related-grid a{font-size:14px}
}

/* 手机端（<=767px）——单列语义顺序重排 */
@media (max-width:767px){
  :root{--max-content-width:1000px}
  body{font-size:16px}
  .header-inner{padding:0 8px}
  .title{font-size:20px}
  .eyebrow{font-size:12px}

  /* 所有层按语义顺序单列，取消跨栏与错位 */
  .content-layout{grid-template-columns:1fr;gap:14px}
  .visual-line{display:none}
  .edge-note{order:3}
  .main-column{order:2}
  .bottom-grid{display:block}
  .related-grid{grid-template-columns:repeat(1,1fr)}

  .ad-container{margin:14px auto}

  /* 安全保证：320px下不横向滚动 */
  html,body{overflow-x:hidden}
  .article{padding:0 8px}
}

/* 中等屏（768-1023px）采用折中样式 */
@media (min-width:768px) and (max-width:1023px){
  :root{--max-content-width:980px}
  .content-layout{grid-template-columns:1fr 240px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}