:root{
  --bg: #f7efe3; /* 奶油白 */
  --accent: #3f2a21; /* 深棕 */
  --muted: #8a7668;
  --paper: #fbf6f1;
  --max-width: 1280px; /* 在 1120-1440 范围内取中值 */
  --content-gap: 28px;
  --base-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--accent);font-family:var(--base-font);margin:0}
.page-wrap{margin:28px auto;padding:20px;min-height:60vh}
.site-header{padding:18px 24px;border-bottom:1px solid rgba(63,42,33,0.08);text-align:center;background:linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.00));}
.masthead .site-title{font-weight:700;color:var(--accent);text-decoration:none;font-size:20px;letter-spacing:0.6px}
.top-nav{margin-top:10px}
.top-nav ul{list-style:none;padding:0;margin:0;display:inline-flex;gap:18px}
.top-nav a, .top-nav span{color:var(--muted);text-decoration:none;font-size:13px}

/* 标题区基线 */
.title-area{display:block;margin:26px 0 18px 0;padding-bottom:8px}
.page-title{margin:0 0 8px 0;color:var(--accent);line-height:1.05;font-size:28px;font-weight:700}
.meta-narrow{color:var(--muted);font-size:13px}
.meta-row{margin:6px 0}

/* 内容网格（默认移动友好流式） */
.content-grid{display:block}
.main-col{background:transparent}
.summary{font-size:15px;color:var(--muted);margin:8px 0 18px 0}
.article-body{font-size:16px;line-height:1.78;color:rgba(43,31,26,0.95)}
.article-body p{margin:0 0 1em 0}

/* 视觉签名：正文首段首字轻量强调（不改写内容） */
.article-body p:first-of-type::first-letter{
  color:var(--accent);
  font-size:2.25em;
  font-weight:600;
  float:left;
  line-height:1;
  margin-right:8px;
  padding-top:4px;
}

/* FAQ 与相关样式（编号式） */
.faq{margin-top:22px;border-top:1px dashed rgba(63,42,33,0.06);padding-top:16px}
.faq ol{counter-reset:faq-counter;padding-left:18px;margin:0}
.faq ol li{margin:8px 0;padding-left:10px;color:var(--muted)}
.related{margin-top:20px}
.related-title{font-size:14px;color:var(--accent);margin:0 0 8px 0}
.related-list{padding-left:18px;margin:0}
.related-list li{margin:8px 0;color:var(--muted)}

/* 广告容器（独立、不可悬浮） */
.ad-container{margin:18px 0;padding:10px;background:transparent;border:1px dashed rgba(63,42,33,0.04);color:var(--muted);font-size:13px}
.ad-top{margin-bottom:22px}

.footer-line{padding:26px 0;text-align:center;color:var(--muted);font-size:13px}

/* 较大视窗下的非对称杂志网格与标题 7/5 分栏 */
@media (min-width: 1024px){
  .page-wrap{width:100%;max-width:var(--max-width);margin:36px auto;padding:28px}

  /* 标题区 12 栏网格：标题占 1-8（7 列），meta 占 8-13（5 列） */
  .title-area{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
  .page-title{grid-column:1 / span 7;font-size:40px}
  .meta-narrow{grid-column:8 / span 5;justify-self:end;text-align:right}

  /* 主体为非对称网格：主列偏左，侧列偏右 */
  .content-grid{display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:start}
  .main-col{grid-column:1 / 2}
  .side-col{grid-column:2 / 3}

  /* 将页面内的 meta 和 faq 在视觉上放置到右侧（偏移排列），但 DOM 不改变顺序 */
  /* 利用 CSS 将 .meta-narrow 和 .faq 视觉上移到侧栏位置 */
  .meta-narrow{position:relative;transform:translateY(0)}
  .faq{position:relative;transform:translateY(-8px);}

  /* 编辑部式节奏：更多留白与较大的行高 */
  .article-body{font-size:17px;line-height:1.9}
  .page-title{letter-spacing:-0.6px}
}

/* 更细致桌面（>=1120px）固定容器宽度，确保 1120-1440 合同要求 */
@media (min-width: 1120px){
  .page-wrap{max-width:var(--max-width);padding:32px}
}

/* 手机端独立重排（<=767px）：恢复自然文档顺序并优化触控与阅读节奏 */
@media (max-width: 767px){
  .page-wrap{padding:16px}
  .page-title{font-size:20px;margin-bottom:6px}
  .title-area{display:block}
  .meta-narrow{display:block;text-align:left;margin-bottom:8px}

  /* 内容流式：标题、元信息、摘要、正文、FAQ、推荐（DOM 本来即如此） */
  .content-grid{display:block}
  .main-col{width:100%}
  .side-col{display:none}

  .article-body{font-size:16px;line-height:1.8}
  .ad-container{font-size:13px;padding:8px}

  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 可访问性与微调 */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}

/* 避免常见 AI 模板套路：无重阴影、无大圆角、无渐变主色块 */