:root{
  --bg:#F7F6F2; /* 纸白 */
  --ink:#102230; /* 深藏蓝-接近文本色 */
  --accent:#0b3b59; /* 藏蓝 */
  --muted:#6b7a86;
  --surface:#ffffff;
  --border:rgba(16,34,48,0.08);
  --radius:2px;
  --gap:12px;
  --compact-line:1.45;
}
/* 全局重置与版心 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);margin:0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;}
.page-wrap{max-width:100%;}
.site-header{padding:14px 18px;border-bottom:1px solid var(--border);background:transparent}
.brand-row{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-family: "Georgia", "Times New Roman", serif;font-size:18px}
.index-bar{margin-left:18px;display:flex;gap:10px;align-items:center}
.index-bar a{color:var(--muted);text-decoration:none;font-size:13px;padding:6px;border-radius:var(--radius)}
.index-bar a:focus{outline:2px solid rgba(11,59,89,0.12)}
.page-container{margin:22px auto;display:grid;gap:18px;padding:0 18px;align-items:start}
/* 文章主视图与注释栏的中轴式网格 */
.centerline-article{background:transparent}
.article-head h1{font-family:"Georgia","Times New Roman",serif;font-weight:600;margin:0 0 8px 0;font-size:28px;line-height:1.12;letter-spacing:0.2px;text-align:left;position:relative;padding-left:6px}
/* 标题构图：粗细横线 */
.article-head h1:before{content:"";display:block;height:2px;background:var(--accent);width:36px;margin-bottom:6px}
.article-head h1:after{content:"";display:block;height:1px;background:var(--muted);width:100px;margin-top:8px}
.meta{display:flex;gap:12px;color:var(--muted);font-size:13px;margin-top:8px}
.summary{margin:14px 0;padding:10px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:15px;line-height:var(--compact-line)}
.article-body{font-size:16px;line-height:1.78;color:var(--ink)}
.article-body p{margin:0 0 12px 0}
.faq-section{margin-top:18px}
.faq-section h2{font-size:18px;margin:0 0 8px 0}
.faq-list details{margin:8px 0;padding:10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
.faq-list summary{cursor:pointer;font-weight:600}
.related-bottom{margin-top:18px}
.related-header{background:var(--accent);color:white;padding:8px 10px;border-radius:var(--radius)  var(--radius) 0 0;font-weight:600}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius) var(--radius);background:var(--surface)}
.related-grid > *{padding:8px;font-size:14px;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.03);background:transparent}
/* 侧边注释栏 */
.side-annotation{padding:10px;width:320px}
.meta-surface{background:var(--surface);border:1px solid var(--border);padding:10px;border-radius:var(--radius)}
.ann-title{font-size:14px;margin:0 0 8px 0;font-weight:700}
.meta-list{margin:0;padding:0;font-size:13px}
.meta-list dt{color:var(--muted);font-weight:600}
.meta-list dd{margin:2px 0 8px 0}
.keywords{word-break:break-word}
.ad-slot{max-width:100%;padding:10px;margin:12px auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);}
.site-footer{padding:18px 18px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
/* 可访问性小调整 */
a{color:var(--accent)}
/* 桌面端规则：明确的双栏、非对称网格，中轴布局 */
@media (min-width:1024px){
  .page-container{max-width:1200px;grid-template-columns:1fr 320px;align-items:start;padding:0}
  .centerline-article{padding-right:30px}
  .article-head h1{font-size:34px}
  .article-body{font-size:17px;line-height:1.78}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  /* 确保侧栏不固定在视口，保持右侧注释 */
  .side-annotation{position:static}
}
/* 手机端规则：全部左对齐单列，侧栏下移，避免窄正文 */
@media (max-width:767px){
  .brand-row{padding:8px 6px}
  .index-bar{display:flex;gap:8px}
  .page-container{display:block;padding:0 14px}
  .centerline-article{order:0}
  .side-annotation{order:1;width:100%;margin-top:12px}
  .article-head h1{font-size:20px;padding-left:0}
  .article-head h1:before, .article-head h1:after{display:none}
  .summary{font-size:15px}
  .article-body{font-size:16px}
  .related-grid{grid-template-columns:repeat(1,1fr)}
  /* 防止横向滚动 */
  body{overflow-x:hidden}
}
/* 中等屏到大屏之间的灵活性保证容器落在1120-1440区间内 */
@media (min-width:1120px) and (max-width:1440px){
  .page-container{max-width:1200px}
}
@media (min-width:1440px){
  .page-container{max-width:1400px}
}