:root{
  --paper:#f6f5ef; /* 轻纸张底色 */
  --graphite:#2f2f33; /* 石墨灰 */
  --mustard:#d6b90b; /* 芥末黄 */
  --muted:#6b6b6f;
  --max-width:1280px; /* 介于1120—1440之间 */
  --gutter:24px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 全局布局与表面 */
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--graphite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width);margin:24px auto;padding:0 var(--gutter);box-sizing:border-box;}

/* 编辑部报头：左右分置，第二层极窄 */
.site-header{max-width:var(--max-width);margin:12px auto 24px;padding:0 var(--gutter);box-sizing:border-box;}
.header-row.primary{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,0,0,0.05);}
.brand a{font-family:var(--serif);font-weight:700;color:var(--graphite);text-decoration:none;font-size:20px;letter-spacing:0.2px}
.header-tools{font-size:13px;color:var(--muted)}
.header-row.narrow{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:6px 0}
.header-row.narrow .narrow-left{font-weight:600}

/* 标题区：桌面 7/5 分栏 */
.title-area{display:block;margin-bottom:18px;align-items:start}
.article-title{
  font-family:var(--serif);
  font-weight:700;
  color:var(--graphite);
  margin:0 0 12px 0;
  line-height:1.05;
  /* 超大标题但通常不超过两行：响应式文字 */
  font-size:clamp(22px, 4.8vw, 42px);
}
.title-side{margin-top:6px;color:var(--muted);font-size:14px}
.title-side .summary{margin-top:12px}
.summary-label{font-weight:700;color:var(--graphite);margin-bottom:6px}
.summary-body{white-space:pre-wrap}
.meta-line{margin:0 0 6px 0}

/* 页面主网格：正文偏左，右侧为元信息与 FAQ */
.page-grid{display:block}
.article{background:transparent}
.article-meta-inline{font-size:13px;color:var(--muted);margin-bottom:8px}
.section-heading{font-size:16px;margin:8px 0}
.article-body{font-family:var(--serif);font-size:17px;line-height:1.8;color:var(--graphite)}

/* 广告容器样式：独立，不悬浮 */
.ad{max-width:var(--max-width);margin:18px auto;padding:8px var(--gutter);box-sizing:border-box;color:var(--muted);font-size:13px}
.ad-top, .ad-middle, .ad-bottom{background:transparent;border:1px dashed rgba(0,0,0,0.04)}

/* 相关阅读视觉签名：反向色块标题栏 */
.related{max-width:var(--max-width);margin:22px auto;padding:0 var(--gutter);box-sizing:border-box}
.related-header{background:var(--graphite);color:#fff;padding:8px 12px;font-weight:700;font-family:var(--serif);display:inline-block}
.related-list{margin-top:10px}
.related-list > *{display:block;padding:12px 0;border-top:1px solid rgba(0,0,0,0.06);color:var(--graphite)}
.related-list time{display:block;color:var(--muted);font-size:13px;margin-top:6px}

/* 侧栏与 FAQ */
.right-col{margin-top:20px}
.side-block{padding:8px 0}
.side-title{font-weight:700;color:var(--graphite);margin-bottom:6px}
.side-text{color:var(--muted);font-size:14px}
.side-block.offset{margin-top:18px}

.faq{margin-top:12px}
.faq-title{font-size:15px;margin:0 0 8px 0}
.faq-list{font-size:15px;color:var(--graphite)}

/* 针对常见 FAQ 的桌面表格式：dl dt（问题）在左，dd（回答）在右 */
.faq-list dl{margin:0}
.faq-list dl dt{font-weight:700;padding:10px 0;color:var(--graphite)}
.faq-list dl dd{margin:0 0 10px 0;padding-left:0;color:var(--muted)}

/* 默认链接样式 */
a{color:var(--graphite);text-decoration:none}
a:focus{outline:2px dashed var(--mustard);outline-offset:2px}

.site-footer{max-width:var(--max-width);margin:26px auto;padding:14px var(--gutter);color:var(--muted);font-size:13px}

/* ----- 桌面大屏样式（>=1024px） ----- */
@media (min-width:1024px){
  .container{padding:0 32px}
  .title-area{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start;margin-bottom:18px}
  .article-title{font-size:48px;line-height:1.02;margin:6px 0}
  .title-side{padding-top:6px}

  /* 主体采用非对称杂志网格；正文偏左，右侧元信息与 FAQ 错位排列 */
  .page-grid{display:grid;grid-template-columns: 1fr 420px;gap:36px;align-items:start}
  .article{order:1}
  .right-col{order:2}

  /* 使右侧的 FAQ 与元信息呈现错位：通过不同的内边距和顶边距创造视觉错位 */
  .side-meta{background:transparent}
  .side-block{padding:10px 0}
  .side-block.offset{margin-top:36px}

  /* FAQ 桌面表格式：将 dl 变为两列布局 */
  .faq-list dl{display:grid;grid-template-columns: 1fr 1fr;gap:12px;align-items:start}
  .faq-list dl dt{grid-column:1;color:var(--graphite);padding-top:6px}
  .faq-list dl dd{grid-column:2;color:var(--muted)}

  /* 相关阅读列表在桌面显示为分隔线列表，条目内显示日期（若有） */
  .related-list > *{display:flex;justify-content:space-between;align-items:flex-start}
  .related-list time{margin-left:12px}
}

/* ----- 手机样式（<=767px），恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐 ----- */
@media (max-width:767px){
  .container{padding:0 16px}
  .title-area{display:block}
  .article-title{font-size:22px}
  .title-side{margin-top:10px}
  .page-grid{display:block}
  .right-col{margin-top:18px}

  /* 移除桌面表格式，FAQ 堆叠为自然列表：左问右答改为上问下答 */
  .faq-list dl{display:block}
  .faq-list dl dt{padding:8px 0;font-weight:700}
  .faq-list dl dd{padding:6px 0 14px 0;color:var(--muted)}

  /* 相关阅读列表在手机端以堆叠条目为主，日期位于条目下方 */
  .related-list > *{display:block}
  .related-list time{display:block;margin-top:6px}

  /* 确保无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 可访问性与阅读舒展度 */
.article-body p{margin:0 0 1.05em 0}
.article-body ul, .article-body ol{margin:0 0 1.05em 1.2em}

/* 防止大型 Hero 风格（禁用大面积纯色首屏）通过不提供大型背景或巨大空白 */
/* visual signature enforcement: 相关阅读使用反向色块标题栏(implemented above) */