:root{
  --bg:#F2ECE2; /* 砂岩白基底 */
  --ink:#222222;
  --muted:#666666;
  --accent:#8B2E2E; /* 砖红 */
  --max-width:1240px; /* 在 1120-1440 之间 */
  --gap:28px;
  --article-col-width:820px;
  --side-col-width:260px;
  --rule:rgba(0,0,0,0.08);
  --sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sys-font);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:20px 12px;
}

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

/* 广告容器样式（独立，不悬浮） */
.ad{background:transparent;padding:10px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-top,.ad-bottom{max-width:var(--max-width);margin:8px auto}
.ad-middle{margin:28px 0}

/* 报头 */
.site-header{max-width:var(--max-width);margin:18px auto 26px;padding:6px 10px}
.header-inner{display:flex;justify-content:space-between;align-items:center}
.brand-link{font-weight:700;font-size:20px;color:var(--ink);letter-spacing:0.02em}
.home-link{font-size:14px;color:var(--muted)}

/* 主容器与学刊式版心 */
.container{max-width:var(--max-width);margin:0 auto}
.layout{display:grid;grid-template-columns:1fr;gap:var(--gap)}

/* Article */
.article{background:transparent;padding:0 8px}
.title{
  margin:0 0 8px 0;
  font-size:36px; /* 积极放大但一般不超过两行 */
  line-height:1.06;
  font-weight:700;
  letter-spacing:-0.01em;
  word-break:break-word;
}
/* 视觉识别：标题首字母/首字使用克制强调色 */
.title::first-letter{color:var(--accent);font-weight:800}

.meta{display:flex;gap:18px;align-items:center;color:var(--muted);font-size:13px;margin:8px 0 14px}
.summary{margin:0 0 18px;color:var(--muted);font-size:15px}

.content{color:var(--ink);font-size:16px}
.content p{margin:0 0 1em}
.content h2,.content h3{margin:1.4em 0 0.6em;font-weight:700}
.content h2{font-size:20px}
.content h3{font-size:18px}

/* 章节编号感：对 h2 使用自动编号（若正文含 h2 则会显示） */
.article{counter-reset:section}
.content h2{counter-increment:section}
.content h2::before{content:counter(section) ". ";color:var(--muted);margin-right:6px}

/* 水平分隔线，克制使用 */
.section-heading{font-size:15px;margin:28px 0 10px;color:var(--ink);border-top:1px solid var(--rule);padding-top:12px}

/* FAQ：桌面为左右列式，手机堆叠 */
.faq-inner dl{margin:0}
.faq-inner dt{font-weight:700;margin:10px 0;color:var(--accent)}
.faq-inner dd{margin:0 0 12px 0;color:var(--muted)}

/* 相关推荐编号列表 */
.related-list{padding-left:1.2em;margin:6px 0 20px 0;color:var(--ink)}
.related-list li{margin:8px 0}

/* 右侧装帧 */
.sidebox{display:none}
.sidebox-inner{writing-mode:vertical-rl;text-orientation:mixed;color:var(--muted);font-size:13px;align-self:center}
.side-label{font-weight:700;color:var(--accent);display:block}
.side-year{display:block;margin-top:8px}

/* 页脚 */
.site-footer{max-width:var(--max-width);margin:26px auto 0;padding:18px 8px;color:var(--muted);font-size:13px}

/* 桌面规则（必须包含 min-width:1024px） */
@media (min-width:1024px){
  body{padding:36px}
  .layout{
    grid-template-columns: var(--article-col-width) var(--side-col-width);
    gap:44px;align-items:start;
  }
  .article{padding:0}
  .title{font-size:52px;line-height:1.02;margin-bottom:6px;}
  .summary{font-size:16px;max-width:880px}
  .content{font-size:17px}

  /* 右侧作为装帧边注，仅桌面显示（避免常规右侧热门文章样式） */
  .sidebox{display:flex;align-items:flex-start}
  .sidebox-inner{border-left:1px solid var(--rule);padding-left:18px;height:100%;display:flex;flex-direction:column;align-items:flex-start}

  /* FAQ 桌面表格式：左侧问题、右侧答案 */
  .faq-inner{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:start}
  .faq-inner > *{margin:0}
  /* 如果传入 dl/dt/dd，则尝试排列成两列 */
  .faq-inner dl{display:contents}
  .faq-inner dt{grid-column:1;color:var(--accent);padding:6px 8px}
  .faq-inner dd{grid-column:2;padding:6px 8px;color:var(--muted)}

  /* 相关推荐横跨页面底部（通过把整个相关区宽度拉满） */
  .related{grid-column:1 / -1}
}

/* 手机规则（必须包含 max-width:767px） */
@media (max-width:767px){
  :root{--gap:14px}
  body{padding:12px}
  .container{padding:0}
  .layout{grid-template-columns:1fr}
  .title{font-size:22px;line-height:1.18;margin-bottom:6px}
  .meta{flex-direction:row;gap:10px;font-size:12px}
  .summary{font-size:14px}
  .content{font-size:15px}

  /* 章节间距缩小但保留层级 */
  .content h2{font-size:17px}
  .section-heading{margin-top:18px}

  /* 右侧装帧收起 */
  .sidebox{display:none}

  /* FAQ 在手机端改为单列堆叠，问题在上，答案在下 */
  .faq-inner{display:block}
  .faq-inner dl{display:block}
  .faq-inner dt{padding:8px 0;color:var(--accent)}
  .faq-inner dd{padding:0 0 12px 0;color:var(--muted)}

  /* 相关推荐改为单列编号 */
  .related-list{padding-left:1.1em}

  /* 底部广告与页脚留白更紧凑 */
  .ad-top,.ad-bottom{margin:6px 0}
}

/* 可访问性与打印辅助 */
@media print{
  .ad,.site-header,.site-footer,.sidebox{display:none}
  body{background:white;color:black}
}