/* 设计风格变量 —— 炭黑与暖灰，1px 主题竖线视觉识别 */
:root{
  --bg:#fff;
  --charcoal:#111214; /* 炭黑 */
  --warm-gray:#8d857f; /* 暖灰 */
  --muted:#6f6a65;
  --accent:#2b2b2b;
  --surface-border:rgba(0,0,0,0.06);
  --radius:2px; /* 2px 小圆角 */
  --max-desktop:1280px; /* 主容器目标值，保证在1120-1440范围 */
  --content-max-width:760px;
  --gutter:28px;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--charcoal);
  font-family: Georgia, 'Times New Roman', serif; /* 人文杂志宽松型 */
  -webkit-font-smoothing:antialiased;
  line-height:1.75; /* 宽松行距 */
  font-size:18px; /* 稍大字距，易读 */
}

a{color:var(--accent);text-decoration:none}

.toolbar{
  border-bottom:1px solid var(--surface-border);
  background:linear-gradient(to bottom, rgba(0,0,0,0.01), transparent);
}
.toolbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-desktop);
  margin:0 auto;
  padding:14px var(--gutter);
}
.brand .home-link{
  font-weight:700;
  color:var(--charcoal);
  font-size:20px;
  letter-spacing:0.02em;
}
.tool-right{color:var(--warm-gray);font-size:14px}

.ad-container{max-width:var(--max-desktop);margin:18px auto;padding:8px var(--gutter);border-radius:var(--radius);border:1px solid var(--surface-border);color:var(--muted);font-size:14px}
.ad-container > *{display:block}

.page-shell{padding:18px 0 48px}
.page-grid{
  display:grid;
  grid-template-columns: var(--gutter) minmax(0,1fr) 300px;
  gap:28px 40px;
  max-width:1440px;
  margin:0 auto;
  align-items:start;
  padding:0 var(--gutter);
}

/* 贯穿页面的1px主题竖线（visual_signature） */
.gutter-signature{
  width:var(--gutter);
  display:block;
  position:relative;
}
.gutter-signature::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:var(--warm-gray);
  opacity:0.18;
}

.article{
  background:transparent;
}
.article-header{
  margin-bottom:18px;
}
.title{
  font-size:36px; /* 超大标题但尽量控制两行 */
  margin:0 0 8px 0;
  line-height:1.08;
  font-weight:700;
  letter-spacing:0.01em;
  word-break:break-word;
}
.meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.meta .sep{padding:0 6px;color:var(--surface-border)}
.summary{
  margin:0 0 20px 0;
  color:var(--warm-gray);
  font-size:16px;
  max-width:var(--content-max-width);
}

.content{
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:22px;
  background:#fff;
  color:var(--charcoal);
  font-size:17px;
  line-height:1.85; /* 宽松阅读 */
}
.content p{margin:0 0 1em}
.content h2{margin:1.6em 0 0.6em;font-size:20px;font-weight:700}
.content h3{margin:1.2em 0 0.4em;font-size:17px}

/* 章节编号感：为 content 中的 H2 添加自增编号（不生成新的文本内容） */
.content{counter-reset:section}
.content h2{counter-increment:section;position:relative;padding-left:44px}
.content h2::before{
  content:counter(section) ".";
  position:absolute;
  left:8px;
  top:0;
  font-weight:700;
  color:var(--warm-gray);
  font-size:14px;
}

.aside-panel{padding-top:6px}
.aside-surface{
  border:1px solid var(--surface-border);
  border-radius:var(--radius);
  padding:16px;
  background:transparent;
}
.aside-title{margin:0 0 8px 0;font-size:15px;color:var(--charcoal)}
.aside-keywords{color:var(--warm-gray);font-size:14px}

.bottom-panels{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 380px; /* FAQ 与 推荐并排，横跨页面底部 */
  gap:28px;
  max-width:var(--max-desktop);
  margin-left:auto;margin-right:auto;
  padding:0 var(--gutter);
}
.panel-title{font-size:16px;margin:0 0 10px 0;color:var(--charcoal)}
.faq-panel,.related-panel{border:1px solid var(--surface-border);border-radius:var(--radius);padding:16px;background:transparent}
.faq-list{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
.faq-list li{margin:0 0 0.8em}
.related-list{font-size:15px;color:var(--muted)}
.related-list a{display:block;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.04);color:var(--accent)}
.related-list time{display:block;color:var(--warm-gray);font-size:13px}

.site-footer{border-top:1px solid var(--surface-border);padding:18px 0;margin-top:40px}
.footer-inner{max-width:var(--max-desktop);margin:0 auto;padding:0 var(--gutter);color:var(--warm-gray);font-size:14px}

/* ----- 桌面端 专有规则（必须包含 @media (min-width: 1024px)） ----- */
@media (min-width:1024px){
  :root{font-size:18px}
  .page-grid{grid-template-columns: var(--gutter) minmax(0,1fr) 320px;max-width:var(--max-desktop);}
  /* 学刊式布局：文章核心较宽，边注栏目较窄（站名置左、栏目置右已在 toolbar 与 aside 实现） */
  .title{font-size:44px;max-height:3.1em;overflow:hidden} /* 控制不超过两行 */
  .content{padding:28px;font-size:18px}
  .bottom-panels{grid-template-columns:1fr 420px;}
  .related-list a{display:flex;justify-content:space-between;align-items:center}
  /* 让页签视觉有更大留白 */
  .article{padding-top:10px}
}

/* ----- 手机端 专有规则（必须包含 @media (max-width: 767px)） ----- */
@media (max-width:767px){
  :root{font-size:16px}
  body{font-size:16px}
  .toolbar-inner{padding:12px 14px}
  .tool-right{display:none} /* 精简工具区以节省空间 */
  .page-grid{grid-template-columns:var(--gutter) minmax(0,1fr);gap:12px;padding:0 12px}
  .gutter-signature::after{left:6px;opacity:0.12}
  .aside-panel{order:3}
  .article{order:1}
  .title{font-size:22px;margin-bottom:8px;line-height:1.14}
  .summary{font-size:15px}
  .content{padding:16px;font-size:16px}
  /* 底部区域改为单列 */
  .bottom-panels{grid-template-columns:1fr;gap:12px;padding:0 12px}
  .ad-container{margin:12px 12px}
  .footer-inner{padding:0 12px}
  /* 防止横向滚动 */
  html,body{overflow-x:hidden}
}

/* 可访问性提示：不使用脚本时，确保可读性 */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}