/* 全局变量与重置 */
:root{
  --bg:#fbfaf6; /* 轻纸张底色 */
  --text:#111; 
  --muted:#6b6b6b;
  --accent:#b22222; /* 单一朱红强调 */
  --max-width:1440px;
  --min-width:1120px;
  --page-padding:24px;
  --gap:28px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}

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

.page-wrapper{max-width:100%;margin:0 auto;padding:12px}
.masthead{padding:10px var(--page-padding);border-bottom:1px solid rgba(0,0,0,0.06);background:transparent}
.masthead-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.masthead-top{font-weight:700;font-size:18px}
.masthead-top .site{color:var(--text)}
.masthead-tool{font-size:13px;color:var(--muted);padding-top:6px}

/* 主布局：在移动和小屏上为单列流式 */
.page-grid{display:block;max-width:100%;margin:var(--gap) auto;padding:0 var(--page-padding)}
.article{order:0}
.article-header{padding-bottom:12px}
.title{margin:8px 0 6px 0;font-family:var(--serif);font-weight:700;font-size:26px;line-height:1.08;text-align:center;letter-spacing:-0.02em}
/* 视觉签名：标题首字或首字母强调色 */
.title::first-letter{color:var(--accent);font-size:1.25em}

.meta-row{display:flex;gap:8px;justify-content:center;color:var(--muted);font-size:13px}
.summary{margin:14px 0 18px 0;color:var(--text);max-width:84ch;text-align:left}

.content{font-size:16px;line-height:1.85;color:var(--text);hyphens:auto}
.content p{margin:0 0 1em}

.sidebar{margin-top:24px}
.side-block{margin-bottom:18px}
.side-block h3{margin:0 0 8px 0;font-size:14px;color:var(--text)}
.kw{color:var(--muted);font-size:14px}

/* FAQ 使用 details 折叠样式（design_profile 要求 details 风格） */
.faq-list details{border-top:1px solid rgba(0,0,0,0.06);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;list-style:none;outline:none}
.faq-list summary::-webkit-details-marker{display:none}

/* 右侧内联 faq（桌面会在侧栏显示）保留同样的 details 风格 */
.faq-inline details{padding:6px 0}

/* 相关阅读 两列摘要列表的移动与桌面展示 */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-list{font-size:14px;color:var(--muted)}

/* 广告容器（必须独立，不能浮动或覆盖） */
.ad{margin:18px 0;padding:8px;background:transparent;color:var(--muted);text-align:center;border-top:1px dashed rgba(0,0,0,0.04)}
.ad-top,.ad-middle,.ad-bottom{min-height:44px}

.site-footer{margin-top:36px;padding:18px var(--page-padding);color:var(--muted);font-size:13px;border-top:1px solid rgba(0,0,0,0.05);text-align:center}

/* ---------- 桌面端：非对称杂志网格，标题区7/5分栏，正文主列偏左，右侧元信息和FAQ错位排列 ---------- */
@media (min-width:1024px){
  .page-wrapper{padding:20px}
  .page-grid{
    display:grid;
    grid-template-columns: 7fr 5fr; /* 非对称 7/5 分栏 */
    gap:var(--gap);
    align-items:start;
    padding:28px calc((100vw - var(--max-width))/2 + 20px);
  }

  /* 容器宽度约束：在更大屏幕保证介于1120-1440 */
  @media (min-width:1120px){
    .page-grid{max-width:var(--max-width);margin:0 auto}
  }

  .article{grid-column:1 / 2}
  .sidebar{grid-column:2 / 3;position:relative;top:18px}

  /* 标题区 7/5 分栏效果：标题居中但跨栏视觉 */
  .article-header{display:block;padding-right:12px}
  .title{font-size:34px}
  .meta-row{justify-content:flex-start}
  .summary{max-width:none}

  /* 侧栏呈现错位：关键词 - FAQ - 相关阅读垂直排列，但视觉错位（通过 top/translate） */
  .sidebar .keywords{position:relative;top:-6px}
  .sidebar .faq-side{position:relative;top:26px}
  .sidebar .related-side{position:relative;top:44px}

  /* 相关阅读两列更紧凑 */
  .related-grid{grid-template-columns:1fr 1fr}

  /* 增强阅读舒展感 */
  .content{font-size:18px;line-height:1.9}
}

/* ---------- 手机端（最大 767px）：恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐。保证 320px 下无横向滚动 ---------- */
@media (max-width:767px){
  html,body{font-size:16px}
  .page-wrapper{padding:8px}
  .masthead{padding:8px}
  .masthead-top{font-size:16px}
  .title{font-size:20px;text-align:center}
  .meta-row{justify-content:flex-start;font-size:12px}
  .summary{font-size:14px;margin-top:8px}
  .content{font-size:15px;line-height:1.85}

  /* 侧栏在移动端变为流式并在正文之后出现（DOM 已按移动顺序） */
  .sidebar{margin-top:18px;padding:0}
  .side-block{margin-bottom:12px}

  /* 移动端 FAQ 使用无卡片 details 列表（设计要求） */
  .faq-list details{padding:10px 0}

  /* 相关阅读在移动端单列显示，但保持两列摘要列表的样式在更宽手机上 */
  .related-grid{grid-template-columns:1fr}

  /* 宽度防溢出处理，320px 下不横向滚动 */
  body, .page-wrapper, .page-grid, .article, .sidebar, .content, .summary{max-width:100%;overflow-wrap:break-word}
}

/* 视觉约束：避免常见的圆角卡片、渐变、重阴影等 */
/* 禁止大面积纯色 Hero（未使用） */

/* 可访问性与打印友好 */
@media print{
  .ad, .masthead-tool, .site-footer{display:none}
  .title{page-break-after:avoid}
}