:root{
  --bg:#FAF8F3; /* 纸白 */
  --accent:#0F2540; /* 藏蓝 */
  --muted:#6B6B6B;
  --border:rgba(15,37,64,0.08);
  --radius:2px; /* 2px小圆角 */
  --max-width:1200px; /* 桌面容器宽度（1120-1440区间内取值） */
  --gap:28px;
  --type-serif: Georgia, "Times New Roman", serif;
  --type-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 基础重置 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  font-family:var(--type-ui);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6; /* 人文杂志宽松型：适度行距 */
  letter-spacing:0.01em;
}
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px dashed rgba(15,37,64,0.15);outline-offset:3px}

/* 站点小报头：弱化传统页头，仅保留站名与首页 */
.site-header{
  border-bottom:1px solid var(--border);
  background:transparent;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand a{
  font-weight:700;
  color:var(--accent);
  font-family:var(--type-serif);
  font-size:16px;
  letter-spacing:0.02em;
}
.tiny-path a{font-size:13px;color:var(--muted)}

/* 容器与布局 */
.site-container{
  max-width:var(--max-width);
  margin:18px auto 60px;
  padding:0 20px;
}
.layout{
  display:grid;
  grid-template-columns:1fr 320px; /* 非对称双栏：正文宽、侧栏窄 */
  gap:var(--gap);
  align-items:start;
}

/* 公共控件样式（浅边框、小圆角、无阴影） */
.ad-slot, .side-column, .related, .faq-section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:transparent;
}
.ad-slot{padding:12px;margin-bottom:12px;color:var(--muted);font-size:13px}

/* 主文稿区：标题构图为紧凑标题加关键词眉题 */
.main-article{padding:8px 6px}
.eyebrow{
  font-family:var(--type-ui);
  color:var(--accent);
  font-size:13px;
  margin:0 0 6px 0;
  letter-spacing:0.06em;
}
h1{
  margin:0 0 8px 0;
  font-family:var(--type-serif);
  font-size:28px; /* 紧凑但具存在感 */
  color:var(--accent);
  line-height:1.15;
}
.meta-row{
  font-size:13px;
  color:var(--muted);
  display:flex;
  gap:12px;
  align-items:center;
  margin:8px 0 12px 0;
}
.summary{
  margin:0 0 14px 0;
  color:#222;
  font-size:15px;
}
.article-body{
  font-size:16px;
  color:#111;
  line-height:1.72; /* 人文杂志宽松阅读舒适度 */
}
.article-body p{margin:0 0 14px 0}

/* FAQ：无卡片的 details 折叠列表为首选样式 */
.faq-section{margin-top:20px;padding:10px}
.faq-section h2{font-size:16px;margin:0 0 10px 0;color:var(--accent);font-family:var(--type-serif)}
.faq-list details{border-top:1px solid var(--border);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}

/* 相关阅读（关键词索引式列表） */
.side-column{padding:12px}
.related h3{margin:0 0 8px 0;font-size:14px;color:var(--accent);font-family:var(--type-serif)}
.related-list{font-size:14px;color:#111}
.related-list ul{margin:0;padding:0;list-style:none}
.related-list li{padding:6px 0;border-bottom:1px dashed var(--border);}
.related-list a{color:inherit}

/* 页脚 */
.site-footer{border-top:1px solid var(--border);padding:18px 20px;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;color:var(--muted);font-size:13px}

/* 移动端规则（320px 不横向滚动、紧凑连续） */
@media (max-width:767px){
  :root{--gap:16px}
  .header-inner{padding:10px}
  .site-container{margin:8px auto 40px;padding:0 14px}
  .layout{display:block}
  .main-article{padding:0}
  h1{font-size:20px;margin:6px 0}
  .eyebrow{font-size:12px;margin-bottom:6px}
  .meta-row{flex-direction:row;gap:8px;font-size:12px}
  .summary{font-size:14px;margin-bottom:10px}
  .article-body{font-size:15px;line-height:1.7}

  /* 侧栏下移为自然区块 */
  .side-column{margin-top:18px;padding:10px}
  .ad-slot{font-size:13px;padding:10px}
  .related-list li{padding:8px 0}
}

/* 桌面端规则（>=1024px）：充分利用宽屏，宽窄交替布局 */
@media (min-width:1024px){
  .site-container{margin:28px auto 70px}
  .header-inner{padding:14px 24px}
  .layout{grid-template-columns: 1.2fr 360px;gap:40px}
  h1{font-size:34px}
  .article-body{font-size:17px}
  /* 在桌面端：标题跨栏表现更突出，侧注作为索引轨道 */
  .eyebrow{letter-spacing:0.08em}
  .related-list li{border-bottom:1px solid var(--border)}
}

/* 可访问性与防止意外交叉 */
img{max-width:100%;height:auto}
:focus{outline-offset:3px}