/* 样式表：通用内容详情页模板 — 视觉种子：深棕与奶油白，报刊式紧凑标题，紧凑字阶与大面积留白 */
:root{
  --bg-cream:#FBF6EE;
  --deep-brown:#3b2f2a;
  --muted-brown:#7a675e;
  --accent:#5b473f;
  --max-width:1280px; /* 目标桌面容器尺寸在 1120–1440 范围内，取中间值 */
  --gutter:24px;
  --line:1px solid rgba(59,47,42,0.08);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 基础重置与布局 */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--deep-brown);
  background:var(--bg-cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.page-wrap{padding:24px 16px 48px; display:block;}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:8px 16px;display:flex;flex-direction:column;align-items:center}
.site-brand{font-weight:700;color:var(--deep-brown);font-size:14px}
.index-bar{margin-top:8px;color:var(--muted-brown);font-size:13px}
.index-bar .nav-item{padding:0 6px}
.header-rule{border:0;border-top:var(--line);width:100%;max-width:var(--max-width);margin:12px auto 0}

/* 全局广告槽样式（独立容器，不覆盖正文） */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px 12px;color:var(--muted-brown);font-size:13px;border:var(--line);background:transparent}

/* 网格容器—桌面与移动有不同结构 */
.layout-grid{max-width:var(--max-width);margin:20px auto 0;display:grid;gap:32px;padding:0 16px}

/* 列默认样式（移动端为单栏） */
.col-meta{order:1}
.col-article{order:2}
.col-related{order:3}

/* 文章区 */
.article-head h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-0.02em;text-align:center;color:var(--deep-brown);line-height:1.12}
.article-head .summary{margin:14px 0 20px;text-align:left;color:var(--muted-brown);font-size:15px}
.article-body{font-size:16px;color:var(--deep-brown);word-wrap:break-word}
.article-body p{margin:0 0 1em}

/* FAQ 横线列表风格 */
.faq{margin-top:28px}
.faq-title{font-size:16px;margin:0 0 10px;color:var(--deep-brown)}
.faq-list{border-top:var(--line);padding-top:12px}
.faq-list > * + *{border-top:var(--line);padding-top:12px;margin-top:12px}

/* 相关阅读底部三列短卡样式（无阴影，无圆角） */
.related-title{font-size:14px;margin:0 0 12px;color:var(--deep-brown)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.related-grid > *{background:transparent;padding:8px;border:var(--line);font-size:14px;color:var(--deep-brown);min-height:54px;display:flex;align-items:center}

/* 脚注 */
.site-foot{border-top:var(--line);padding:18px 0;margin-top:32px;color:var(--muted-brown);font-size:13px}
.site-foot .foot-inner{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* 桌面专属布局：非对称三栏，正文与 FAQ 宽窄交替（1024px 以上生效） */
@media (min-width:1024px){
  .page-wrap{padding:36px 0 64px}
  .layout-grid{grid-template-columns:220px 1fr 320px;align-items:start;padding:0 20px;gap:40px}
  .col-meta{position:relative}
  .col-meta .meta-block{position:sticky;top:28px}
  .col-meta .path{font-size:13px;color:var(--muted-brown);margin-bottom:12px}
  .col-meta .meta-info{font-size:13px;color:var(--muted-brown)}
  .col-meta .published{display:block;margin-bottom:8px}
  .col-meta .meta-now{margin-top:10px;color:var(--muted-brown)}

  .col-article{padding:0 6px}
  .article-head h1{font-size:36px;margin-bottom:10px}
  .article-head .summary{max-width:880px}

  /* 正文主体为宽列，FAQ 区块在内容宽窄交替中变窄（短列） */
  .article-body{max-width:880px}
  .faq{max-width:640px}

  .col-related{padding-left:6px}
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{min-height:58px}
}

/* 手机专属：紧凑连续，避免首屏空白，侧栏下移成区块；最大宽度 767px 及以下 */
@media (max-width:767px){
  .header-inner{padding:6px 12px}
  .index-bar{font-size:12px;margin-top:6px}
  .layout-grid{display:block;padding:0 12px}
  .col-meta{order:2;margin-top:8px;padding:8px 0;border-top:var(--line)}
  .col-article{order:1}
  .col-related{order:4;margin-top:18px}

  .article-head h1{font-size:20px;margin:6px 0}
  .article-head .summary{font-size:14px;margin:10px 0}
  .article-body{font-size:15px}
  .faq-list > * + *{padding-top:10px;margin-top:10px}

  .related-grid{grid-template-columns:repeat(3,1fr);gap:8px}

  /* 确保 320px 不横向滚动 */
  .page-wrap, .header-inner, .site-foot .foot-inner{padding-left:12px;padding-right:12px}
}

/* 无大圆角、无阴影、线性边框，遵循视觉签名与禁止模式 */