:root{
  --bg-paper:#f4f7f6; /* 轻纸张底色 */
  --teal-gray:#6e8a86; /* 青灰 */
  --lake-blue:#2f8fa8; /* 湖蓝 */
  --muted:#586166;
  --text:#102826;
  --accent:#21738a;
  --spacer:20px;
  --container-max:1280px; /* 在1120-1440范围内取中值 */
  --min-width:1120px;
}

/* 基础布局与排版 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;background:var(--bg-paper);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--lake-blue);text-decoration:none}
.page-root{display:flex;flex-direction:column;align-items:center;padding:28px 16px}
.page-container{width:100%;max-width:var(--container-max);min-width:initial;}

/* 站头：左对齐紧凑品牌栏（仅站名与首页） */
.site-header{display:flex;align-items:center;padding:8px 0;margin-bottom:12px}
.brand a{font-weight:700;color:var(--teal-gray);font-size:18px;letter-spacing:0.2px}

/* 中轴布局容器：article 与 aside 在大屏构成两栏 */
.centerline{display:block}
.article{background:transparent;}
.article-head{padding:6px 0 12px 0}

/* 标题：H1 一次出现，居中、衬线视觉 */
h1{font-family:Georgia, "Times New Roman", serif;font-size:28px;line-height:1.25;text-align:center;margin:6px 12px;color:var(--teal-gray);font-weight:600}

.meta{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:13px;margin-top:6px}
.meta time{white-space:nowrap}

/* 摘要左对齐 */
.summary-area{margin:18px 0}
.section-title{font-family:Georgia, "Times New Roman", serif;font-size:15px;margin:0 0 8px 0;color:var(--accent);position:relative;padding-left:28px}
.section-title::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:14px;height:2px;background:var(--lake-blue);border-radius:2px
}
/* 视觉识别：短编号线的变化（不自动生成编号） */
.section-title::after{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);width:4px;height:4px;background:var(--lake-blue);border-radius:50%}

.summary{margin:0;color:var(--muted);text-align:left;font-size:15px;line-height:1.6}

/* 正文无衬线，充足行距，直接完整可见 */
.article-body .content{font-size:16px;line-height:1.78;color:var(--text);font-family:Inter, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans SC", sans-serif}
.article-body .content p{margin:0 0 14px}

/* FAQ: 使用无卡片 details 折叠列表 */
.faq-list details{border:0;padding:8px 0;margin:6px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--teal-gray);outline:none}
.faq-list summary::-webkit-details-marker{display:none}

/* 相关阅读：两列摘要列表的基础样式 */
.related-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.related-grid > *{font-size:14px;color:var(--muted)}

/* 侧栏注释（在桌面显示为注释栏，移动端折叠到下方） */
.aside{margin-top:18px}
.aside-inner{padding-left:6px}
.aside-title{font-family:Georgia, "Times New Roman", serif;color:var(--teal-gray);font-size:14px;margin:0 0 8px}
.aside-text{margin:0;color:var(--muted);font-size:14px}

/* 广告容器：独立、非悬浮、不得覆盖正文 */
.ad-slot{padding:10px 0;color:var(--muted);font-size:13px}
.ad-slot > *{display:block}

.site-footer{margin:28px 0 12px;color:var(--muted);font-size:13px;text-align:center}

/* ================== 桌面规则 - 明确 @media (min-width: 1024px) ================== */
@media (min-width:1024px){
  .page-container{min-width:var(--min-width);max-width:var(--container-max);}

  /* 中轴报头与窄标题：标题居中，整体克制对称 */
  h1{font-size:32px}

  /* 中轴编辑部式网格：文章主列与注释栏从中轴向两侧展开（非对称） */
  .centerline{display:grid;grid-template-columns:1fr minmax(0,760px) 320px 1fr;gap:24px;align-items:start}
  .article{grid-column:2 / 3}
  .aside{grid-column:3 / 4}

  /* 页面内容的内部密度舒展 */
  .article-head{padding-right:12px}
  .summary{max-width:760px}

  /* 相关阅读两列摘要列表在桌面成立 */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:12px}

  /* 保持侧栏为注释性质，字体更细一些 */
  .aside-inner{border-left:2px solid rgba(47,143,168,0.08);padding-left:14px}
}

/* ================== 手机规则 - 明确 @media (max-width: 767px) ================== */
@media (max-width:767px){
  /* 移除最小宽限制，全部左对齐单列，避免窄正文 */
  .page-container{padding:0 10px;max-width:100%}
  h1{text-align:left;font-size:20px}
  .meta{justify-content:flex-start;gap:10px}
  .summary{font-size:14px}

  /* 恢复单列流，侧栏下移并作为区块出现 */
  .centerline{display:block}
  .article{width:100%}
  .aside{width:100%;margin-top:18px;padding-top:6px;border-top:1px solid rgba(16,40,38,0.04)}

  /* 相关阅读单列 */
  .related-grid{grid-template-columns:1fr}

  /* FAQ details 更紧凑 */
  .faq-list details{padding:6px 0}
}

/* 辅助：确保在中等屏宽下也能良好展示（避免单一卡片拉伸） */
@media (min-width:768px) and (max-width:1023px){
  .page-container{max-width:920px}
  .centerline{display:block}
  .aside{margin-top:20px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}