/* 主题变量与版式 */
:root{
  --bg-paper: #fbfbf7; /* 轻纸张底色 */
  --theme: #2e8f8f; /* 湖蓝/青灰主题 */
  --accent: #6fb3b3;
  --text: #162029;
  --muted: #62727a;
  --line: rgba(46,143,143,0.12);
  --max-width: 1280px; /* 在1120-1440区间，取中间值 */
  --masthead-width: 220px; /* 桌面左侧刊头宽度 */
  --gap: 20px;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background:var(--bg-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.wrap{
  max-width:var(--max-width);
  margin:28px auto;
  display:flex;
  gap:var(--gap);
  padding:0 16px;
  align-items:flex-start;
}

/* 左侧纵向刊头（masthead） */
.masthead{
  width:var(--masthead-width);
  min-width:var(--masthead-width);
  color:var(--muted);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:18px;
  border-right:1px solid var(--theme); /* 贯穿页面的1px主题竖线 */
}
.masthead .brand{
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  display:inline-block;
}
.masthead-top{display:block}
.masthead-sub{margin-top:6px;color:var(--muted);font-size:12px}
.masthead-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.masthead-nav a{color:var(--text);text-decoration:none}
.masthead-nav span{color:var(--muted)}
.masthead-ad{margin-top:auto;font-size:13px;color:var(--muted)}

/* 主要区 */
.main{flex:1;min-width:0}
.article{background:transparent}
.article-header{padding-bottom:6px;margin-bottom:10px}
.eyebrow{color:var(--accent);font-size:13px;font-weight:600;letter-spacing:0.02em}
.title{
  margin:6px 0 4px 0;
  font-family: "Songti SC", "SimSun", Georgia, "Times New Roman", serif; /* 标题衬线 */
  font-size:28px;
  line-height:1.12;
  font-weight:600;
  color:var(--text);
}
.meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.meta .sep{padding:0 6px;color:var(--line)}
.summary{margin:6px 0 14px 0;color:var(--muted);font-size:15px}

/* 内容与边注形成9/3网格 */
.content-area{display:block}
.content-grid{
  display:grid;
  grid-template-columns:9fr 3fr;
  gap:24px;
  align-items:start;
}
.content{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; /* 正文无衬线 */
  font-size:16px;
  color:var(--text);
}
.content p{margin:0 0 12px 0}

.side{font-size:14px;color:var(--muted)}
.side-box{border-left:3px solid var(--line);padding-left:12px;margin-bottom:12px}
.side-ad{margin-top:8px}
.related{margin-top:12px}
.related-title{font-size:15px;color:var(--text);margin:0 0 8px 0}
.related ul{list-style:none;padding:0;margin:0}
.related ul li{padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.related ul li time{display:block;color:var(--muted);font-size:12px}

/* FAQ 区（使用 details 列表样式） */
.faq{margin-top:20px}
.section-title{font-size:16px;margin:6px 0 10px 0;color:var(--text)}
.faq-list details{padding:8px 0;border-top:1px solid var(--line)}
.faq-list summary{cursor:pointer;font-weight:600}
.faq-list p{margin:8px 0 0 0;color:var(--muted)}

.ad-bottom{margin-top:18px;color:var(--muted)}

.site-footer{margin-top:28px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* 密集紧凑风格 */
.title, .eyebrow, .meta, .summary{margin-left:0}

/* 桌面端强制规则（>=1024px）——左侧纵向刊头贯穿页面，文章主区右侧为9/3网格，标题跨主区 */
@media (min-width:1024px){
  .wrap{padding:0 24px}
  .masthead{position:relative;top:0;height:auto}
  .article-header .title{font-size:32px}
  /* 标题确保跨主区：它位于主区内，宽度自然覆盖两栏 */
  .content-grid{grid-template-columns:9fr 3fr}
  .masthead{min-height:320px}
}

/* 手机端独立重排规则（<=767px）——纵向刊头还原为顶部横条；所有栏位单列 */
@media (max-width:767px){
  .wrap{flex-direction:column;max-width:100%;margin:12px auto;padding:0 12px}
  .masthead{width:100%;min-width:0;order:0;display:flex;flex-direction:row;align-items:center;gap:12px;padding-bottom:8px;border-right:none;border-bottom:1px solid var(--line)}
  .masthead-top{display:flex;flex-direction:column}
  .masthead-nav{display:none}
  .masthead-ad{display:none}
  .main{order:1}
  .content-grid{display:block}
  .content{width:100%}
  .side{width:100%;margin-top:12px}
  .related ul li{padding:12px 0;border-top:1px solid var(--line)}
  .title{font-size:20px}
  .summary{font-size:14px}
}

/* 保证320px下无横向滚动 */
@media (max-width:320px){
  body{font-size:14px}
  .title{font-size:18px}
  .wrap{margin:10px 8px}
  .content p{word-break:break-word}
}

/* 无阴影，信息层级靠边线和排版 */
/* 禁止使用阴影或浮动广告（广告容器仅为占位） */