:root{
  --bg:#f7f5f3; /* warm gray background */
  --surface:#ffffff; /* paper-like surface */
  --charcoal:#222222; /* 炭黑 */
  --muted:#7a756f; /* 暖灰文字 */
  --accent:#4a4a4a;
  --max-desktop:1280px; /* between 1120 and 1440 */
  --container-min:1120px;
  --container-max:1440px;
  --gutter:28px;
}

/* 基础版式 — 人文杂志宽松型 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft Yahei",Arial,serif;
  background:var(--bg);
  color:var(--charcoal);
  line-height:1.7; /* 舒展 */
  -webkit-font-smoothing:antialiased;
}
.container{margin:0 auto;padding:24px;max-width:var(--max-desktop)}

/* 报刊双层报头 */
.site-header{background:var(--surface);border-bottom:1px solid #e6e2de;padding:12px 0 18px 0}
.toolbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:4px 24px;font-size:14px;color:var(--muted)}
.toolbar .home{color:var(--charcoal);text-decoration:none;font-weight:600}
.toolbar .crumb{color:var(--muted)}
.masthead{display:flex;justify-content:space-between;align-items:flex-end;padding:8px 24px;border-top:1px solid #eee;border-bottom:1px solid #eee}
.masthead .mast-left{font-size:20px;font-weight:700;letter-spacing:0.6px}
.masthead .mast-right{font-size:13px;color:var(--muted)}
.header-bottom{padding:12px 24px 0 24px}
.ad-slot{background:transparent;padding:6px 0;color:var(--muted);font-size:13px}

/* 文章头部：窄标题居中，摘要左对齐 */
.article-header{padding:26px 24px 12px 24px}
.title{margin:0 auto 12px auto;max-width:720px;text-align:center;font-family:Georgia,serif;font-size:28px;font-weight:700;line-height:1.15}
.meta{display:flex;justify-content:center;gap:8px;color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{max-width:880px;margin:0 auto 18px auto;text-align:left;color:var(--muted);padding:8px 12px;border-left:3px solid #e9e6e3;background:#fff}

/* 中轴布局网格 —— desktop 与 mobile 为两套显著不同排版 */
.centerline-grid{display:grid;grid-template-columns:1fr minmax(24px,1fr) 720px 320px 1fr;gap:var(--gutter);align-items:start;padding:12px 24px}
.gutter{background:transparent}
.col-main{grid-column:3/4;background:var(--surface);border:1px solid #e9e6e3;padding:20px}
.col-annot{grid-column:4/5;padding:18px 16px;background:linear-gradient(0deg,#fff,#fff);border:1px solid #ece8e4}
.col-main .content{color:var(--charcoal)}
.col-main .content p{margin:0 0 1em 0}
.panel{margin-bottom:16px;padding:12px;border:1px solid #efebe8;background:#fff}
.panel-title{margin:0 0 8px 0;font-size:15px;color:var(--accent)}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.related-grid a{display:block;text-decoration:none;color:var(--charcoal)}
.meta-panel{font-size:13px;color:var(--muted)}

/* FAQ 与相关阅读在移动端顺序改变（桌面在侧栏，移动在正文之后） */
.mobile-faq,.mobile-related{display:none}

/* 广告和底部 */
.ad-middle{margin:20px 0;padding:12px;border:1px dashed #e0dcd9;background:transparent;text-align:center}
.ad-bottom{margin:24px 24px 0 24px;padding:12px;border-top:1px solid #eee;text-align:center}

/* 页脚：宽屏索引式排版（visual_signature） */
.site-footer{margin-top:28px;background:var(--surface);border-top:1px solid #e6e2de;padding:18px 24px}
.footer-index{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.index-col{flex:1 1 25%;min-width:160px;color:var(--muted);padding:6px 8px;border-right:1px dashed #f0eeec}
.footer-note{margin-top:12px;color:var(--muted);font-size:13px}

/* Tablet small default fallback (768-1023) — keep readable single column like mobile but not identical */
@media (max-width:1023px){
  .container{padding:18px}
  .title{font-size:26px}
  .centerline-grid{grid-template-columns:1fr;gap:12px}
  .col-main{grid-column:auto;border:1px solid #eae7e3}
  .col-annot{grid-column:auto;border:1px solid #efece8}
  .panel{background:#fff}
}

/* 桌面规则 — 明确 @media (min-width: 1024px) */
@media (min-width:1024px){
  /* 保证容器在 1120—1440 之间，使用 clamp 控制 */
  .container{max-width:clamp(1120px,80vw,1440px)}
  /* 中轴式、非对称：正文从中轴向两侧展开（主列与注释栏） */
  .centerline-grid{grid-template-columns:1fr 60px minmax(640px,1fr) 300px 1fr}
  .col-main{box-shadow:none}
  .col-annot{position:relative;top:24px}
  /* 标题窄幅居中 */
  .title{max-width:720px}
  /* FAQ 在侧栏显示为两列（desktop 保持两列的 FAQ 风格） */
  .panel .panel-body{font-size:14px;color:var(--muted)}
  .mobile-faq,.mobile-related{display:none}
  .related-grid{grid-template-columns:1fr 1fr}
}

/* 手机端规则 — 必须包含 @media (max-width: 767px) 且为不同布局 */
@media (max-width:767px){
  body{padding-bottom:16px}
  .container{padding:12px;max-width:100%;}
  .masthead{padding:8px 12px}
  .header-bottom{padding:8px 12px}
  .title{font-size:20px;text-align:left;max-width:100%;margin-left:0}
  .meta{justify-content:flex-start;padding-left:4px}
  .summary{margin:10px 0;padding:10px;border-left:3px solid #eee;background:transparent}

  /* 切换到单列左对齐，避免窄正文 */
  .centerline-grid{grid-template-columns:1fr;gap:12px}
  .col-main{grid-column:auto;border:0;padding:12px;background:transparent}
  .col-annot{display:block;order:3;padding:0;border:0;background:transparent}

  /* 将 FAQ 与相关阅读显示为正文之后的单列（faq_pattern） */
  .mobile-faq,.mobile-related{display:block;background:var(--surface);padding:12px;border:1px solid #efece8;margin-top:12px}
  .mobile-faq h2,.mobile-related h2{font-size:15px;margin:0 0 8px 0}

  /* 侧栏面板在移动端不显示（已移动） */
  .panel{display:none}

  /* footer index 改为纵向堆叠，宽屏索引特征保留在大屏 */
  .footer-index{display:block}
  .index-col{border-right:0;padding:8px 0}

  /* 确保 320px 时无横向滚动 */
  html,body{overflow-x:hidden}
  .ad-slot{word-break:break-word}
}

/* 可访问性与微调 */
h1,h2,h3{color:var(--charcoal);margin:0}
a{color:inherit}