:root{
  --brick:#8f3b35; /* 砖红 */
  --sand:#f6efe6;  /* 砂岩白 */
  --ink:#222222;
  --muted:#666666;
  --max-width:1280px; /* 桌面容器在1120-1440之间，选中间值1280 */
  --gutter:24px;
  --nav-width:112px; /* 左侧纵向刊头宽度（桌面） */
  --radius:6px; /* 方形信息块，保留小圆角 */
  --sys-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 基础重置与布局 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--sand);color:var(--ink);font-family:var(--sys-font);margin:0}
a{color:inherit;text-decoration:none}
.page-wrap{max-width:var(--max-width);margin:18px auto;display:flex;gap:var(--gutter);align-items:flex-start;padding:0 16px}

/* 顶部广告与页脚 */
.ad{background:transparent;color:var(--muted);font-size:14px;padding:10px 0;text-align:center}
.ad-top,.ad-middle,.ad-bottom{width:100%}
.site-footer{color:var(--muted);text-align:center;padding:18px 12px;font-size:13px}

/* 左侧纵向刊头（桌面为竖列，移动端折叠） */
.side-nav{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 0}
.side-nav .brand{display:inline-block;color:var(--sand);background:var(--brick);padding:8px 12px;font-weight:700;border-radius:3px}

/* 网格根：在桌面采用非对称 7/5 列 */
.grid-root{display:grid;gap:24px;width:100%}

/* 文章列与侧列样式 */
.article-col .article{background:#fff;padding:20px;border-radius:4px}
.article-header{margin-bottom:12px}
.title{color:var(--ink);margin:0 0 12px 0;font-weight:800;line-height:1.05;letter-spacing:-0.02em}
.meta-inline{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin-bottom:10px}
.summary{display:flex;align-items:center;gap:10px;margin:0 0 12px 0;color:var(--ink)}
.summary-band{display:inline-block;width:6px;height:18px;background:var(--brick);border-radius:2px;margin-right:6px}
.summary-text{color:var(--muted);font-size:15px}
.content{color:var(--ink);font-size:16px;line-height:1.75}
.faq{margin-top:18px}
.faq h2{font-size:16px;margin:0 0 8px 0}
.faq-inner{color:var(--muted);font-size:15px}
.related{margin-top:18px}
.related h2{font-size:16px;margin:0 0 8px 0}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid > *{background:transparent;padding:6px 0;font-size:14px;color:var(--brick)}

/* 侧边栏目方形信息块（深色/白色对比，方形） */
.side-col{display:flex;flex-direction:column;gap:18px}
.side-box{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:none;border:1px solid #eee}
.side-box h3{margin:0 0 8px 0;font-size:14px;color:var(--brick)}
.side-box p{margin:4px 0;color:var(--muted);font-size:13px}

/* small refinements */
.time{font-size:13px;color:var(--muted)}

/* ---------- 桌面（>=1024px）非对称网格与视觉差异 ---------- */
@media (min-width:1024px){
  .page-wrap{padding:20px}
  /* 左侧刊头 + 中心网格（非对称 7/5） */
  .page-wrap{align-items:start}
  .page-wrap{display:grid;grid-template-columns:var(--nav-width) 1fr;gap:20px;align-items:start}

  .side-nav{height:100vh;position:sticky;top:18px;padding-top:8px}
  .side-nav .brand{writing-mode:horizontal-tb}

  .grid-root{grid-column:2 / 3;display:grid;grid-template-columns:7fr 5fr;gap:28px}

  /* 标题区 7/5 分栏：主列更宽，标题紧接正文 */
  .title{font-size:clamp(28px,4.6vw,44px);max-width:calc(100% - 20px)}

  /* 正文主列偏左、右侧元信息和 FAQ 错位排列（错位通过 margin-top 实现） */
  .article-col{grid-column:1 / 2}
  .side-col{grid-column:2 / 3}
  .side-meta{margin-top:0}
  .side-faq{margin-top:42px} /* 故意错位，FAQ 稍下 */

  /* 相关阅读采用四列紧凑网格（视觉在文章下方但更为紧凑） */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid > *{font-size:13px}
}

/* ---------- 手机（<=767px）独立重排：恢复自然文档顺序 ---------- */
@media (max-width:767px){
  :root{--gutter:14px}
  .page-wrap{max-width:100%;margin:0;padding:12px}
  /* 左侧刊头折叠为顶部横向紧凑栏 */
  .page-wrap{display:block}
  .side-nav{display:flex;flex-direction:row;align-items:center;gap:10px;margin-bottom:10px}
  .side-nav .brand{padding:8px 10px;font-size:15px}

  /* 一栏流式布局，DOM 顺序决定阅读顺序：标题、元信息、摘要、正文、FAQ、推荐 */
  .grid-root{display:block}
  .article-col{width:100%}
  .article{background:#fff;padding:14px;border-radius:4px}

  .title{font-size:20px;line-height:1.12}
  .meta-inline{flex-direction:row;gap:8px;font-size:13px}
  .summary{margin-bottom:10px}

  /* 侧栏转为流式块，不保持桌面错位 */
  .side-col{display:block;margin-top:12px}
  .side-box{padding:12px}

  /* 相关阅读改为两列以节省垂直空间 */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 中等屏（768-1023）保持简洁两栏但不启用完整非对称布局 */
@media (min-width:768px) and (max-width:1023px){
  .page-wrap{max-width:960px;margin:12px auto}
  .side-nav{display:flex}
  .grid-root{display:grid;grid-template-columns:1fr;gap:16px}
  .side-col{order:2}
  .article-col{order:1}
  .title{font-size:26px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 可访问性与印刷微调 */
@media print{
  .side-nav,.ad,.site-footer{display:none}
  .article{box-shadow:none;border:0}
}