:root{
  --bg:#ffffff;
  --text:#2e2e2e; /* 石墨灰 */
  --muted:#6b6b6b;
  --accent:#b98914; /* 芥末黄偏暖 */
  --max-width:1280px; /* 桌面容器宽度（在1120-1440区间内） */
  --reading-width:820px;
  --gutter:24px;
  --base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Noto Sans CJK SC", sans-serif;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--base-font);margin:0}
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px solid #ffdca0}
.site-header{max-width:var(--max-width);margin:18px auto;padding:6px 16px;display:flex;align-items:center;justify-content:space-between}
.header-left{font-weight:700;color:var(--text);letter-spacing:0.4px}
.header-right .home-link{font-size:14px;color:var(--muted)}

/* 页面网格容器：默认为中等屏（768-1023）与移动的顺序友好布局 */
.page-grid{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr;gap:28px;align-items:start}

/* 跨栏标题区（视觉签名：章节短线出现在 section-title） */
.headline{padding:6px 0}
.title{font-size:26px;line-height:1.15;margin:0 0 10px;text-align:center;font-weight:800;letter-spacing:-0.5px}
.meta{font-size:13px;color:var(--muted);display:flex;gap:12px;justify-content:center;margin-bottom:10px}
.summary{max-width:var(--reading-width);margin:0 auto 18px;color:var(--muted);text-align:left}

/* Article 主体 */
.article{padding:0}
.content{font-size:17px;line-height:1.78;color:var(--text);padding-bottom:18px}
.content p{margin:0 0 14px}

/* 广告盒子（不可悬浮/遮盖） */
.ad{background:transparent;padding:12px 0;text-align:center}
.ad *{max-width:100%}

/* FAQ 与推荐样式 */
.section-title{display:flex;align-items:center;gap:10px;font-size:16px;margin:22px 0 12px;padding:0 0 8px;position:relative}
/* 视觉签名：短编号线（不自动编号） */
.section-title::before{content:"";display:inline-block;width:36px;height:6px;background:var(--accent);border-radius:2px;margin-right:8px}
.section-title::after{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-left:8px;opacity:0.9}

.faq-grid{display:flex;flex-direction:column;gap:10px}
.faq-grid > *{padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}
.related-list{display:flex;flex-wrap:wrap;gap:10px}
.related-list > *{padding:6px 10px;border-radius:3px;background:rgba(185,137,20,0.06);color:var(--text);font-size:14px}

/* 边注（edge-note） */
.edge-note{padding:10px 0}
.edge-inner{background:transparent;padding:6px 8px}
.edge-title{font-size:14px;margin:0 0 10px;color:var(--text)}
.keywords{font-size:14px;color:var(--muted);line-height:1.6}

/* 页脚 */
.site-footer{max-width:var(--max-width);margin:28px auto;padding:12px var(--gutter);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}

/* ---- 大屏桌面规则（强制项：min-width:1024px） ---- */
@media (min-width: 1024px){
  :root{--max-width:1280px}
  .page-grid{grid-template-columns:10fr 2fr;gap:36px;padding:0 20px}

  /* 跨栏标题：占据两列 */
  .headline{grid-column:1 / -1;padding-bottom:6px}
  .title{font-size:34px;text-align:center}
  .meta{justify-content:center}
  .summary{margin-left:0;text-align:left}

  /* 主体与边注：article 在第一列，aside 在第二列 */
  .article{grid-column:1 / 2}
  .edge-note{grid-column:2 / 3}

  /* 正文宽度控制，避免把正文限制为窄窄的手机宽度 */
  .content{max-width:var(--reading-width)}

  /* FAQ 桌面表格式：左侧问题、右侧答案 */
  .faq-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .faq-grid > *{display:grid;grid-template-columns:38% 62%;align-items:start;padding:12px 0;border-top:1px solid rgba(0,0,0,0.04)}
  .faq-grid > *:first-child{padding-top:0}

  /* 相关阅读与 FAQ 在底部错位排列：related 宽一些、faq 较窄（通过内边距和视觉留白实现错位感） */
  .article .related{margin-top:6px;padding-left:8px}
  .article .faq{padding-right:12px}
}

/* ---- 手机规则（强制项：max-width:767px） ---- */
@media (max-width: 767px){
  :root{--gutter:14px}
  .site-header{padding:10px var(--gutter);margin:10px auto}
  .page-grid{grid-template-columns:1fr;gap:18px;padding:0 var(--gutter)}

  /* 标题与摘要在移动端为单列：标题居中、摘要左对齐（契合 title_composition） */
  .title{font-size:20px;padding:0 2px}
  .summary{text-align:left;font-size:14px;margin:8px 0}
  .meta{flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}

  /* 边注下移到正文之后（移动端自然重排） */
  .edge-note{order:3}
  .article{order:2}
  .headline{order:1}

  /* FAQ 移为单列：问题在上，答案在下 */
  .faq-grid{display:flex;flex-direction:column}
  .faq-grid > *{display:flex;flex-direction:column;padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}

  /* 相关阅读：索引式垂直列表 */
  .related-list{flex-direction:column}

  /* 广告在移动端占据常规流，不固定，不遮挡 */
  .ad{padding:10px 0}
}

/* 可访问性提示与较低密度偏好 */
@media (prefers-reduced-motion: reduce){
  *{transition:none}
}