/* 主题变量 */
:root{
  --navy:#0b2340; /* 海军蓝 */
  --mist:#f4f6f8; /* 浅雾灰 */
  --accent:var(--navy);
  --text:#111;
  --muted:#5a6b7a;
  --max-width:1200px; /* 在 1120-1440 之间，选定 1200 */
  --gutter:28px;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--mist) 0%, #f7f9fa 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page-bg{min-height:100vh;display:flex;flex-direction:column}

/* 工具栏：站名 + 面包屑合并 */
.toolbar{
  background:transparent;
  border-bottom:1px solid rgba(11,35,64,0.08);
}
.toolbar-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:12px var(--gutter);
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--navy);
}
.site-title{
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
}
.breadcrumb{
  color:var(--muted);
  font-size:13px;
}

/* 主体结构：在桌面与移动端为两套排版 */
.site-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
  width:100%;
  margin:28px auto;
  padding:0 var(--gutter) 80px;
  max-width:calc(var(--max-width) + 320px); /* 给出足够背景空间 */
  position:relative;
}

/* 贯穿页面的 1px 主题竖线（视觉识别） */
.vertical-signature{display:none}

/* 文章纸张态：无圆角、无阴影，细分隔线 */
.sheet{
  background:#fff;
  border:0;
  padding:28px 40px 40px;
  line-height:1.75;
  color:var(--text);
  box-shadow:none;
  border-top:1px solid rgba(11,35,64,0.04);
  border-bottom:1px solid rgba(11,35,64,0.04);
}

.article-head h1{
  margin:0 0 10px 0;
  font-family: Georgia, "Times New Roman", "Songti SC", serif; /* 标题衬线 */
  font-size:28px;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:0.2px;
  font-weight:700;
}

.title-ornament{
  height:12px;
  margin-top:10px;
  position:relative;
}
.title-ornament::before{
  content:"";
  display:block;
  height:2px;
  background:var(--accent);
  width:48px;
}
.title-ornament::after{
  content:"";
  display:block;
  height:1px;
  background:var(--accent);
  width:24px;
  margin-top:6px;
  opacity:0.7;
}

.meta{font-size:13px;color:var(--muted);margin:10px 0}
.meta .published{margin-right:14px}
.summary{color:var(--muted);margin:12px 0 22px;font-size:15px}

.article-body{color:var(--text);font-size:16px}
.article-body p{margin:0 0 16px}
.article-body h2{font-family: Georgia, "Times New Roman", serif;color:var(--navy);margin:18px 0 12px}

/* 广告容器，独立块，不覆盖正文 */
.ad{border:1px dashed rgba(11,35,64,0.06);padding:12px;margin:18px 0;background:transparent;color:var(--muted);font-size:13px}
.ad-top{order:2}
.ad-middle{order:5}
.ad-bottom{order:10}

/* FAQ 使用 details 列表（无卡片） */
.faq h2{font-size:16px;margin-top:20px}
.faq-list details{border-top:1px solid rgba(11,35,64,0.04);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;outline:none}
.faq-list p{margin:8px 0 0;color:var(--muted)}

/* 相关阅读列表：在桌面为两列摘要列表 */
.related h2{font-size:16px;margin-top:20px}
.related-list{display:block;margin-top:10px}
.related-list ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related-list li{padding:8px 0;border-bottom:1px solid rgba(11,35,64,0.04);}
.related-list a{color:var(--navy);text-decoration:none}

/* 侧栏风格（窄边注） */
.side-column{display:none}
.side-meta{font-size:13px;color:var(--muted);padding:8px}
.side-note{border-top:1px solid rgba(11,35,64,0.04);padding:12px 8px;margin-top:14px;color:var(--muted)}

.site-footer{border-top:1px solid rgba(11,35,64,0.04);padding:18px 0;margin-top:auto}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);color:var(--muted);font-size:13px}

/* MOBILE: 独立重排，取消越界与偏移 */
@media (max-width:767px){
  :root{--gutter:18px}
  .site-wrap{grid-template-columns:1fr;padding:0 var(--gutter) 40px;margin:18px auto}
  .sheet{padding:18px;background:#fff;border-left:1px solid rgba(11,35,64,0.03);border-right:1px solid rgba(11,35,64,0.03)}
  .article-head h1{font-size:20px;margin-bottom:8px}
  .title-ornament::before{width:36px}
  .title-ornament::after{width:18px}
  .vertical-signature{display:none}
  .side-column{display:block;order:6;margin-top:14px;padding:12px;background:transparent;border-top:1px solid rgba(11,35,64,0.04)}
  .related-list ul{grid-template-columns:1fr}
  .related-list ul{display:grid}
  /* 确保 320px 无横向滚动 */
  html,body{overflow-x:hidden}
}

/* DESKTOP: 非对称网格，偏移纸张视觉（不使用阴影和大圆角） */
@media (min-width:1024px){
  .site-wrap{
    max-width:var(--max-width);
    grid-template-columns: 1fr 320px; /* 左大右窄，非对称 */
    gap:40px;
    align-items:start;
    padding:40px var(--gutter) 80px;
  }

  .sheet{order:1;max-width:900px;padding:44px 56px 56px}

  /* 标题向左越出正文基线：只在桌面生效 */
  .article-head h1{font-size:34px;margin-left:-80px}

  /* 贯穿页面的 1px 主题竖线 */
  .vertical-signature{
    display:block;
    position:absolute;
    left:calc(50% + 260px); /* 在右窄列与主体间对齐视觉竖线 */
    top:0;
    height:100%;
    width:1px;
    background:var(--accent);
    opacity:0.12;
    pointer-events:none;
  }

  .side-column{display:block;order:2}

  /* 相关阅读在右侧以两列摘要列表呈现 */
  .related-list ul{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}