/* 设计说明已在独立字段；此处为样式实现 */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#c62828; /* 朱红作为强调色 */
  --sig-bg:#111111; /* 相关推荐反向色块 */
  --sig-fg:#ffffff;
  --max-width:1280px; /* 在 1120-1440 范围内，选择 1280 */
  --gutter:28px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Georgia, 'Times New Roman', serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:20px;}
.site-header{padding:18px 0 8px;border-bottom:1px solid #e9e9e9}
/* Toolbar: desktop layout (site left, crumbs right) */
.toolbar{display:flex;justify-content:space-between;align-items:center}
.toolbar .home-link{font-weight:700;font-size:18px;color:var(--text)}
.toolbar .crumbs{font-size:13px;color:var(--muted)}
/* Mobile masthead: centered with horizontal line */
.mobile-title{display:none;text-align:center}
.mobile-title .masthead{font-weight:700;font-size:18px}
.mobile-title .mastline{border:0;height:1px;background:#e9e9e9;margin:8px 0}

.page-wrap{padding:18px 0}
.grid{display:grid;grid-template-columns:1fr;grid-gap:var(--gutter);align-items:start}
.article{order:1}
.article-head .title{font-size:28px;line-height:1.18;margin:6px 0 10px;font-weight:700}
.article .meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.article .summary{background:#f7f7f7;padding:12px;border-left:3px solid var(--accent);margin:0 0 18px}
.article-body{font-size:17px;line-height:1.9;color:var(--text)}
.article-body p{margin:0 0 1em}
.sidebar{order:2}
.sidebar .card{border:1px solid #e6e6e6;padding:12px;font-size:14px;background:#fbfbfb}
.info-row{margin-bottom:8px;color:var(--muted)}
.ad-slot{margin:20px 0;padding:10px;border:1px dashed #ddd;color:var(--muted);font-size:13px}

/* Bottom band spans full width of container */
.bottom-band{display:grid;grid-template-columns:1fr;grid-gap:18px;margin-top:18px}
.band-title{font-size:18px;margin:0 0 8px;color:var(--text)}
.band-title.inverted{background:var(--sig-bg);color:var(--sig-fg);display:inline-block;padding:6px 12px}

/* FAQ pattern: desktop table-like (left question, right answer) */
.faq .faq-table{display:block}
.faq .faq-table > *{border-top:1px solid #efefef;padding:12px 0;display:block}

/* Related grid with visual signature: four-column tight titles */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.related-grid > *{padding:10px;border:1px solid #eee;font-size:14px;background:#fff}
.related .related-head{margin-bottom:6px}
.related .band-title.inverted{display:inline-block}

/* Typography density adjustments */
.title{letter-spacing:0.2px}

/* -- Desktop rules (min-width: 1024px) -- */
@media (min-width:1024px){
  .mobile-title{display:none}
  .toolbar{display:flex}
  /* 学刊式双栏：文章左宽、栏目右窄，非对称网格 */
  .grid{grid-template-columns: 2fr 1fr;grid-gap:36px}
  .container{padding:30px}
  .article-head .title{font-size:36px}
  .article-body{font-size:18px;line-height:1.95}
  .mobile-title{display:none}
  .mobile-title .mastline{display:none}

  /* Sidebar visual weight */
  .sidebar .card{position:sticky;top:36px}

  /* FAQ desktop: table style two-column per row */
  .bottom-band{grid-template-columns:1fr}
  .faq .faq-table{display:grid;grid-template-columns:1fr 2fr;gap:0;background:transparent;border:1px solid #f0f0f0}
  .faq .faq-table > *{border-top:none;padding:12px;border-bottom:1px solid #f4f4f4}
  .faq .faq-table > *:nth-child(odd){background:#fafafa;font-weight:600}
  .faq .faq-table > *:nth-child(even){background:#fff;color:var(--muted)}

  /* Related: four-column tight titles as required */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid > *{font-size:13px;padding:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .related .band-title.inverted{padding:8px 14px}

  /* Show toolbar with site left, crumbs right */
  .toolbar .home-link{font-size:20px}
  .mobile-title{display:none}
}

/* -- Mobile rules (max-width: 767px) -- */
@media (max-width:767px){
  html,body{font-size:16px}
  .container{padding:14px}
  /* Mobile header: centered masthead and visible */
  .toolbar{display:none}
  .mobile-title{display:block}
  .site-header{padding-bottom:8px}

  /* Mobile single-column flow; sidebar folds down */
  .grid{grid-template-columns:1fr}
  .sidebar{order:3}
  .article{order:1}
  .article-head .title{font-size:20px}
  .article-body{font-size:16px;line-height:1.78}
  .article .meta{flex-direction:column;gap:6px}
  .article .summary{margin-bottom:12px}

  /* FAQ stacks into single-column; maintain question/answer order vertically */
  .bottom-band{grid-template-columns:1fr}
  .faq .faq-table{display:block}
  .faq .faq-table > *{display:block;padding:10px;border-top:1px solid #f1f1f1}

  /* Related becomes single column, items full-width */
  .related-grid{grid-template-columns:1fr}
  .related .band-title.inverted{display:block}
  .related-grid > *{white-space:normal}

  /* Ensure no horizontal scroll at 320px */
  body{word-break:break-word}
  .container{padding-left:12px;padding-right:12px}
}

/* Visual signature enforcement: 相关推荐使用反向色块标题栏（已在 HTML/CSS 中体现） */
/* 禁止使用多彩胶囊标签等装饰：未定义此类样式 */