/* 设计变量（海军蓝与浅雾灰） */
:root{
  --navy:#0b2b4a; /* 海军蓝 */
  --mist:#f2f5f6; /* 浅雾灰 */
  --muted:#6b7580;
  --content-bg:#ffffff;
  --rule:#e6eaec;
  --max-width:1320px; /* 在1120-1440之间，取中间值 */
  --gutter:24px;
  --serif: Georgia, 'Times New Roman', serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--navy);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.7;
  font-size:16px;
}
.topbar{
  height:48px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-bottom:1px solid var(--rule);
  background:transparent;
}
.topbar .home{color:var(--navy);text-decoration:none;font-weight:600}

.page-wrap{
  max-width:var(--max-width);
  margin:20px auto;
  display:grid;
  grid-template-columns: 1fr; /* 默认单栏，具体在媒体查询覆盖 */
  gap:var(--gutter);
  padding:0 16px 40px;
}

/* 左侧刊头（左轨） */
.left-rail{
  background:transparent;
  border-right:0;
  padding:0;
}
.left-rail .rail-inner{padding:0}
.site-vertical{writing-mode:vertical-rl;text-orientation:upright;}
.site-vertical .site-name{font-family:var(--serif);color:var(--navy);font-size:18px;letter-spacing:2px}
.vertical-nav ul{list-style:none;padding:12px 0;margin:0;color:var(--muted)}
.vertical-nav li{padding:6px 0}
.vertical-nav li span{font-size:13px}
.rail-meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
.rail-meta .keywords{margin-top:8px;font-size:13px}

/* 文章区 */
.main-area{background:var(--content-bg);padding:16px;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.article{max-width:100%;}
.article-header{padding-bottom:8px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.header-grid{display:flex;gap:24px;align-items:flex-start}
.title-block{flex:1 1 0}
.title{margin:0;font-family:var(--serif);font-size:28px;line-height:1.15;color:var(--navy)}
.meta-line{margin-top:8px;font-size:13px;color:var(--muted)}
.summary-block{flex:0 0 360px;color:var(--muted);font-size:15px}

.article-body{color:#222;font-family:var(--serif);font-size:17px;line-height:1.85}
.article-body p{margin:0 0 1em}

.ad-container{padding:12px 0;text-align:center;color:var(--muted);font-size:13px;border-top:1px dashed var(--rule);border-bottom:1px dashed var(--rule);margin:18px 0}
.ad-top{border-top:0}

/* FAQ - 桌面为左问右答表格式 */
.faq-section{margin-top:22px}
.faq-section .section-title{display:flex;align-items:center;font-size:16px;margin:0 0 12px;color:var(--navy)}
.section-title .sig-mark{display:inline-block;width:32px;height:6px;background:var(--navy);margin-right:10px}
.faq-list{display:block}
.faq-list > *{margin-bottom:12px}

/* 相关阅读索引式列表 */
.related-section{margin-top:22px;border-top:1px solid var(--rule);padding-top:12px}
.related-title{margin:0 0 10px;font-size:15px;color:var(--navy)}
.related-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.related-list li{font-size:14px;color:var(--muted);border-right:1px solid var(--rule);padding-right:8px;margin-right:8px}
.related-list li:last-child{border-right:0;padding-right:0;margin-right:0}
.related-list a{text-decoration:none;color:inherit}

.site-footer{padding:20px;text-align:center;border-top:1px solid var(--rule);color:var(--muted);font-size:13px}

/* 蓝图硬性合同：桌面端左侧3列 右侧9列；并实现标题与摘要左右分置 */
@media (min-width:1024px){
  .page-wrap{grid-template-columns: 300px 1fr; /* left approx 3/12 of 1320 ~= 330px; choose 300px for tight index */
    align-items:start;
  }
  .left-rail{order:0}
  .main-area{order:1;padding:28px 36px;border-left:1px solid var(--rule);border-right:none}

  /* 强化左列为窄信息索引（3列感受），右侧为9列文章 */
  .left-rail{min-width:240px;max-width:360px;padding-right:18px}
  .site-vertical{margin-bottom:18px}

  /* 标题与摘要左右分置 */
  .header-grid{flex-direction:row}
  .summary-block{align-self:flex-start}

  /* FAQ 左问题右回答两栏布局 */
  .faq-list{display:grid;grid-template-columns:1fr 3fr;gap:12px}
  .faq-list > *{padding:10px 0;border-top:1px solid var(--rule)}
  .faq-list > *:nth-child(odd){color:var(--navy);font-weight:600}
  .faq-list > *:nth-child(even){color:#222}

  /* 视觉签名：章节带短编号线（不自动编号） */
  .section-title .sig-mark{width:38px;height:6px;background:var(--navy)}
}

/* 手机端独立重排：左栏变成标题下方的紧凑信息带，正文随后完整显示 */
@media (max-width:767px){
  body{font-size:15px}
  .page-wrap{grid-template-columns:1fr;padding:0 12px}
  .left-rail{order:1;border-top:1px solid var(--rule);padding-top:12px}
  .main-area{order:0;padding:16px;background:var(--content-bg);border-left:0;border-right:0}

  /* 在手机上把左栏显示为紧凑信息带（标题下方），利用视觉压缩 */
  .left-rail .rail-inner{display:flex;flex-direction:row;gap:12px;align-items:center}
  .site-vertical{writing-mode:horizontal-tb}
  .site-vertical .site-name{font-size:15px;letter-spacing:0}
  .vertical-nav{display:none} /* 精简为紧凑信息带：隐藏详尽导航 */
  .rail-meta{border-top:0;margin:0;padding:0;font-size:13px;display:flex;gap:10px;flex-wrap:wrap}
  .rail-meta .published,.rail-meta .now{display:none}
  .rail-meta .keywords{display:inline-block}

  /* 标题与摘要下置：摘要全宽显示 */
  .header-grid{flex-direction:column}
  .summary-block{flex:1 1 auto;margin-top:10px;padding-top:6px;border-top:1px solid var(--rule)}

  /* 正文更易阅读 */
  .article-body{font-size:16px;line-height:1.9}

  /* FAQ 在手机上堆叠为一列，问题在上答案在下 */
  .faq-list{display:block}
  .faq-list > *{padding:10px 0;border-top:1px solid var(--rule)}

  .related-list{gap:6px}
  .related-list li{border-right:0;margin-right:0;padding-right:0}

  .section-title .sig-mark{display:inline-block;width:26px;height:4px;background:var(--navy);margin-right:8px}
}

/* 中间断点（768-1023）保持可读但不触发桌面专属样式 */
@media (min-width:768px) and (max-width:1023px){
  .page-wrap{grid-template-columns: 1fr;}
  .left-rail{order:1}
  .main-area{order:0}
  .header-grid{flex-direction:column}
  .summary-block{border-top:1px solid var(--rule);padding-top:10px}
  .vertical-nav{display:block}
}