/* 主题变量（藏蓝与纸白）以及通用设定 */
:root{
  --bg: #F8F6F2; /* 纸白 */
  --ink: #0B2340; /* 深藏蓝文字 */
  --accent: #0E3A66; /* 藏蓝色带 */
  --muted: #6B7480;
  --surface-bg: #ffffff;
  --radius: 2px; /* 2px小圆角 */
  --border: 1px solid rgba(11,35,64,0.06);
  --max-container: 1200px; /* 在桌面时控制在1120-1440区间内 */
  --serif: Georgia, 'Times New Roman', Times, serif;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

/* 基本重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
.surface{background:var(--surface-bg);border:var(--border);border-radius:var(--radius);}

/* 站头：工具栏将站名与面包屑合并为轻工具栏 */
.site-header{padding:12px 16px 8px;border-bottom:1px solid rgba(11,35,64,0.04);background:transparent}
.toolbar{display:flex;align-items:center;gap:12px}
.site-name{font-weight:700;color:var(--accent);font-family:var(--serif);font-size:1.05rem}
.crumb{color:var(--muted);font-size:0.95rem}
.nav-index{margin-top:10px}
.nav-index ul{display:flex;gap:14px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:0.92rem}

/* 广告槽（独立容器、不可悬浮） */
.ad-slot{padding:12px 16px;margin:12px auto;max-width:var(--max-container);color:var(--muted);font-size:0.95rem}
.ad-slot > *{max-width:100%}

/* 页面容器与网格：桌面三轨，移动单栏 */
.page-container{padding:20px 16px;margin:0 auto;max-width:calc(100% - 32px)}
.layout-grid{display:block}

/* 左侧元信息 */
.meta-left{margin-bottom:12px}
.meta-block{padding:12px;font-size:0.92rem;color:var(--muted)}
.meta-row{margin-bottom:8px}

/* 文章区 */
.content-area{margin:0 auto}
.article-header{padding:18px;margin-bottom:14px}
.article-title{margin:0 0 8px 0;font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--ink);line-height:1.12}
.article-summary{margin:0;padding:8px 0 0 0;color:var(--muted);font-size:1rem}

/* 视觉签名：摘要区使用窄色带而非卡片 */
.summary-band{height:6px;width:100px;background:var(--accent);border-radius:2px;margin:8px 0}

.article-content{padding:6px 0;color:var(--ink)}
.article-content :where(h2,h3){color:var(--accent);font-family:var(--serif)}

/* FAQ 区：无卡片的 details 折叠风格 */
.faq-section{margin-top:18px}
.faq-section h2{margin:0 0 8px 0;font-size:1.05rem;color:var(--ink);font-family:var(--serif)}
.faq-list details{border-top:1px solid rgba(11,35,64,0.04);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--accent);outline:none}
.faq-list details[open] summary{color:var(--ink)}

/* 相关阅读：编号列表样式 */
.related-block{padding:12px}
.related-block h3{margin:0 0 10px 0;font-size:1rem;font-family:var(--serif)}
.related-list{padding-left:1.1em;margin:0;font-size:0.95rem;color:var(--muted)}
.related-list li{margin:8px 0}

/* 页脚 */
.site-footer{padding:18px 16px;color:var(--muted);border-top:1px solid rgba(11,35,64,0.04);margin-top:20px}
.footer-inner{max-width:var(--max-container);margin:0 auto}

/* -------- 桌面端布局：在 1024px 以上应用专用排版并体现三轨结构 -------- */
@media (min-width:1024px){
  .page-container{padding:28px 20px;margin:0 auto;max-width:var(--max-container)}
  .layout-grid{
    display:grid;
    grid-template-columns:220px 780px 200px; /* 左侧元信息、正文约780px、右侧相关阅读 */
    gap:24px;
    align-items:start;
  }
  .meta-left{position:relative}
  .meta-block{position:sticky;top:20px;padding:14px}
  .content-area{min-width:0}
  .article-header{padding:22px}
  .article-title{font-size:2.25rem}
  .related-block{position:sticky;top:20px;padding:14px}
  /* 在桌面上增加一个明显的版面差异：窄元信息列与大标题组成视觉对比 */
  .toolbar{padding:0 0 8px 0}
}

/* 保证内容容器在较大视口内位于1120-1440区间 */
@media (min-width:1120px){
  .page-container{max-width:1200px}
}

/* -------- 手机端规则（最大宽度 767px），整体重排为单列并将侧栏信息移至正文之后 -------- */
@media (max-width:767px){
  .nav-index ul{gap:10px;overflow:auto}
  .page-container{padding:16px}
  .layout-grid{display:block}
  .meta-left{order:2}
  .related-right{order:3}
  .content-area{order:1}
  .meta-block{padding:12px;margin-top:12px}
  .related-block{padding:12px;margin-top:12px}
  .article-title{font-size:1.35rem}
  .article-header{padding:12px}
  .summary-band{width:68px;height:5px}
  .ad-slot{padding:10px}
  /* 在320px宽度下保证无横向滚动 */
  html,body{overflow-x:hidden}
  .article-content img, .article-content table{max-width:100%;height:auto}
}

/* 可访问性与细节 */
a:focus{outline:2px solid rgba(14,58,102,0.12);outline-offset:2px}
summary{list-style:none}