/* 系统变量与基线 */
:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#111111;
  --muted:#666666;
  --accent:#b71c1c; /* 单一朱红强调 */
  --max-width: clamp(1120px, 80vw, 1440px); /* 桌面容器在 1120 - 1440 之间 */
  --gap:20px;
  --nav-w:220px;
  --aside-w:320px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* 全局重设与无阴影、方形风格 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;margin:0}
.page-shell{display:flex;flex-direction:column;align-items:center;padding:20px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* 全局网格根：左侧纵向刊头、主区与右侧信息栏 */
.grid-root{display:grid;grid-template-columns: auto 1fr auto;gap:var(--gap);width:100%;max-width:var(--max-width);align-items:start}
.left-nav{background:#111; color:#fff; padding:18px; display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.left-nav .brand{color:#fff;text-decoration:none;font-weight:700;margin-bottom:6px}
.left-nav .nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.left-nav .nav-list li{font-size:14px;color:#ddd}

/* Page head：深色报头，标题居中，摘要左对齐（视觉差） — 视觉识别基线不同 */
.page-head{grid-column:2; background:transparent;padding:18px 6px 6px 6px;border-bottom:4px solid var(--accent);}
.title-wrap{text-align:center;margin-bottom:8px}
.page-head h1{font-family:var(--serif);font-size:28px;color:var(--ink);margin:0 0 6px 0;line-height:1.15}
.meta-wrap{display:flex;gap:12px;color:var(--muted);font-size:13px;justify-content:center}
.meta-wrap .pub,.meta-wrap .now{opacity:0.95}
.summary{max-width:980px;margin:16px 0 0 0;padding:12px 0 0 0;border-top:1px solid #eee;color:var(--muted);text-align:left}

/* 主内容区 */
.main-area{grid-column:2;padding:18px 6px;background:var(--paper)}
.article{background:transparent}
.article-body{color:var(--ink);font-family:var(--sans);font-size:16px}
.article-body p{margin:0 0 12px}

/* Mobile-only info blocks: 在手机上显示，桌面隐藏 */
.mobile-info{display:none}
.info-block{border:1px solid #eee;padding:12px;margin-top:14px;background:#fff}
.info-block h3{margin:0 0 6px 0;font-size:14px;color:var(--accent)}

/* 侧边信息栏：两个不同高度的信息区，方形信息块 */
.right-col{grid-column:3;display:flex;flex-direction:column;gap:18px;padding:0 0 0 8px}
.info-tall{background:#fff;border:1px solid #eee;padding:16px;height:260px;overflow:auto}
.info-short{background:#fff;border:1px solid #eee;padding:12px;height:140px;overflow:auto}
.info-tall h3,.info-short h3{margin:0 0 8px 0;color:var(--accent)}
.info-body{color:var(--muted);font-size:14px}

/* 广告容器 — 独立且不悬浮 */
.ad{background:#fafafa;border:1px dashed #e6e6e6;color:var(--muted);padding:12px;margin:10px 0}
.ad-top{width:100%;max-width:var(--max-width)}
.ad-middle{margin:18px 0}
.ad-bottom{margin-top:16px}

/* FAQ 与相关阅读 */
.faq{margin-top:18px}
.faq h2{font-size:18px;margin:0 0 8px 0;color:var(--ink)}
.faq ol{padding-left:18px;color:var(--muted)}

.related-area{margin-top:18px}
.related-area h2{font-size:18px;margin:0 0 8px 0}
.related-list{list-style:none;padding:0;margin:0;border-top:1px solid #eee}
.related-list > *{padding:12px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.related-list time{color:var(--muted);font-size:13px}

/* 底部推荐四列（桌面）、单列（移动） — 使用相同 {{related}} 数据渲染不同视觉 */
.related-grid{grid-column:1/4;margin-top:28px;width:100%;max-width:var(--max-width)}
.related-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;padding:0;margin:0}
.related-cards > *{border:1px solid #eee;padding:12px;background:#fff;color:var(--muted);font-size:14px}

.site-footer{grid-column:1/4;width:100%;max-width:var(--max-width);padding:18px 0 10px 0;display:flex;flex-direction:column;gap:8px}
.copyright{color:var(--muted);font-size:13px}

/* Typography density 调整 */
h1{letter-spacing:0.2px}
h2,h3{font-family:var(--serif)}

/* 禁止悬浮、模糊、玻璃拟态等 */
*{backdrop-filter:none}

/* 桌面端规则：明确 @media (min-width: 1024px) */
@media (min-width:1024px){
  /* 更强的刊物感：左右两侧与主区形成编辑部式组合 */
  .page-shell{padding:28px}
  .grid-root{grid-template-columns: var(--nav-w) 1fr var(--aside-w);gap:28px}
  .page-head{padding-left:8px;padding-right:8px}
  .page-head h1{font-size:34px}
  .page-head .summary{font-size:15px;padding-left:0}
  .article-body{column-count:1;font-size:17px}
  .related-cards{grid-template-columns:repeat(4,1fr)}
  .mobile-info{display:none}
  .left-nav{position:sticky;top:24px;align-self:start}
  /* 桌面上确保标题通栏：标题在网格中心通栏显示 */
  .title-wrap{grid-column:2;}
}

/* 手机端规则：明确 @media (max-width: 767px) */
@media (max-width:767px){
  /* 两套独立的排版：主栏变为单列，左侧导航成为顶部横向索引 */
  .grid-root{display:block;width:100%;max-width:100%}
  .left-nav{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 8px;margin-bottom:6px}
  .left-nav .nav-list{display:flex;flex-direction:row;gap:10px}
  .page-head{padding:12px}
  .page-head h1{font-size:20px;text-align:center}
  .page-head .meta-wrap{justify-content:flex-start;flex-wrap:wrap}
  .page-head .summary{text-align:left;padding-top:10px}
  .main-area{grid-column:auto;padding:12px}
  .right-col{display:none}
  .mobile-info{display:block}
  .mobile-info .info-block{border-left:4px solid var(--accent)}
  .related-cards{grid-template-columns:1fr}
  .related-grid{padding:0}
  .ad{font-size:13px}
  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 中等宽度处理，确保在 768-1023 之间有良好显示 */
@media (min-width:768px) and (max-width:1023px){
  .grid-root{grid-template-columns: 72px 1fr;gap:18px}
  .right-col{display:none}
  .related-cards{grid-template-columns:repeat(2,1fr)}
  .page-head h1{font-size:24px}
}