/* 全局变量与重置 */
:root{
  --cream:#f7efe6; /* 奶油白 */
  --brown:#3b2b22; /* 深棕 */
  --muted:#7b6a61;
  --line: #e6dcd4;
  --max-width:1320px; /* 在1120-1440之间 */
  --gutter:28px;
  --reading-font: Georgia, 'Times New Roman', serif;
  --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html,body{height:100%;}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font-family:var(--reading-font);
  line-height:1.62; /* 人文杂志宽松行距 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
/* 广告容器（独立、不可悬浮） */
.ad{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;padding:12px 16px;margin:0 auto;max-width:var(--max-width);}
.ad-top{margin-top:12px}
.ad-middle{margin:28px auto}
.ad-bottom{margin:28px auto 48px}

/* 工具栏：站名左、面包屑右，极简细导航 */
.site-toolbar{border-bottom:1px solid var(--line);background:transparent}
.toolbar-inner{max-width:var(--max-width);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;justify-content:space-between}
.brand a{font-family:var(--ui-font);font-weight:700;color:var(--brown);letter-spacing:0.02em}
.breadcrumb{font-family:var(--ui-font);font-size:13px;color:var(--muted)}
.breadcrumb .sep{padding:0 8px;color:var(--line)}

/* 页面主网格：在桌面为非对称双栏（学刊式），在移动为单列 */
.page{padding:40px 0}
.layout-grid{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr;grid-gap:32px}

/* 标题行：大标题配窄元信息列 */
.title-row{display:grid;grid-template-columns:1fr 220px;grid-gap:24px;align-items:start;margin-bottom:16px}
.title-row h1{margin:0;font-size:34px;line-height:1.04;letter-spacing:-0.01em;color:var(--brown)}
.meta-col{font-family:var(--ui-font);font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:16px}
.meta-col dl{margin:0}
.meta-col dt{font-weight:600;color:var(--brown);margin-top:6px}
.meta-col dd{margin:2px 0 6px}
.meta-col .kw{word-break:break-word}

.summary{margin:6px 0 22px;color:var(--muted);font-family:var(--ui-font);font-size:16px}

/* 主体与侧栏 */
.primary{background:transparent}
.article-body .content{color:var(--brown)}
.side{display:none} /* 默认移动隐藏侧栏 */

/* 底部区域：FAQ 与相关阅读，桌面横跨 */
.bottom-area{border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:1fr;grid-gap:24px}
.faq h2,.related h2{font-family:var(--ui-font);font-size:18px;margin:0 0 12px;color:var(--brown)}

/* FAQ 横线问答列表：由内容提供问答项，样式确保横线分隔 */
.faq-list > *{padding:12px 0;border-top:1px solid var(--line)}
.faq-list > *:first-child{border-top:none;padding-top:0}
.faq-list dt{font-weight:700}
.faq-list dd{margin:6px 0 0}

/* 相关阅读：底部三列短卡但不用阴影 */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:transparent;border:1px solid var(--line);padding:10px;font-family:var(--ui-font);font-size:14px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:20px 0;text-align:center;color:var(--muted);font-family:var(--ui-font)}

/* 章节编号感：为内容内的 h2,h3 提供编号与留白（仅视觉） */
.article-body .content{counter-reset:section}
.article-body .content h2{counter-increment:section;margin-top:34px;margin-bottom:12px;padding-left:54px;position:relative;font-size:20px}
.article-body .content h2::before{content:counter(section) " ";position:absolute;left:0;top:0;font-weight:700;color:var(--muted);font-family:var(--ui-font)}
.article-body .content h3{margin-top:20px;margin-bottom:10px;padding-left:38px;position:relative}
.article-body .content h3::before{content:"";position:absolute;left:0;top:0}

/* 可读性：段落与行长控制 */
.article-body .content p{max-width:68ch;margin:0 0 1.08em}

/* 无圆角、无阴影、细分隔线 */
* {border-radius:0}

/* 桌面规则（硬性要求：min-width:1024px） */
@media (min-width:1024px){
  body{padding:24px 0}
  .layout-grid{grid-template-columns: 1fr 360px; /* 非对称：主区宽、侧栏窄 */
               grid-template-areas: "primary side"
               ;align-items:start;grid-gap:48px}
  .primary{grid-area:primary}
  .side{grid-area:side;display:block}

  /* 将底部 FAQ 与相关阅读横跨两列，形成整页底部 */
  .bottom-area{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:32px}
  .faq{min-height:120px}
  .related{min-height:120px}

  /* 标题更强调：更大的留白 */
  .title-row h1{font-size:44px}
  .article-body .content p{font-size:17px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 手机规则（硬性要求：max-width:767px） */
@media (max-width:767px){
  :root{--gutter:16px}
  .toolbar-inner{padding:12px var(--gutter)}
  .layout-grid{grid-template-columns:1fr;padding:0 12px}
  .title-row{grid-template-columns:1fr;}
  .meta-col{border-left:none;padding-left:0;margin-top:12px}
  .title-row h1{font-size:22px}
  .summary{font-size:15px}
  .article-body .content p{font-size:16px}
  .side{display:none}

  /* 底部改为单列 */
  .bottom-area{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{display:block}

  /* 章节间距缩小但保持层级 */
  .article-body .content h2{margin-top:20px;padding-left:14px}
  .article-body .content h2::before{left:0;font-size:14px}
  .article-body .content p{max-width:100%}

  /* 广告与主栏间距优化，避免横向滚动 */
  .ad{padding-left:6px;padding-right:6px}
}

/* 无横向滚动保障：限制长单词/表格溢出 */
.content, .summary, .kw{overflow-wrap:break-word;word-break:break-word}