/* 主题变量 */
:root{
  --bg-paper:#FBFAF6; /* 纸白 */
  --ink:#10243A;      /* 藏蓝偏黑 */
  --muted:#5A6C78;
  --accent:#12305A;   /* 主题藏蓝 */
  --gap:24px;
  --max-width-desktop-clamp:1280px;
  --container-side-padding:20px;
  --line-height:1.75;
  --read-width:70ch;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB", "Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--line-height);
}

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

.site-inner{padding:20px; margin:0 auto}
.header-inner{padding-top:18px;padding-bottom:6px}

/* 顶部编辑部报头：左右分置 + 左侧纵向刊头 */
.masthead{display:flex;align-items:center;gap:20px}
.masthead-nav{width:220px;min-width:160px}
.nav-list{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-weight:600}
.nav-list .home{color:var(--accent);font-size:16px}
.nav-item{font-size:13px}
.masthead-info{flex:1;text-align:right}
.site-brand{font-weight:700;color:var(--ink);font-size:14px}
.editor-note{font-size:12px;color:var(--muted)}

/* 顶部广告容器样式（非悬浮，不遮挡） */
.ad-slot{max-width:100%;padding:12px 16px;margin:8px auto;color:var(--muted);font-size:13px;border:1px dashed rgba(16,36,58,0.06);background:transparent}

/* 中轴网格：标题区 + 内容区 */
.centerline-grid{display:flex;flex-direction:column;gap:calc(var(--gap));align-items:stretch}
.title-block{max-width:var(--read-width);margin:8px auto 4px auto;text-align:center}
.page-title{
  margin:0 0 8px 0;
  color:var(--ink);
  font-size: clamp(22px, 4.8vw, 38px); /* 超大但受控 */
  line-height:1.05;
  font-weight:800;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; /* 不超过两行 */
}
.meta-row{color:var(--muted);font-size:13px;margin-bottom:10px}
.excerpt{margin:0 auto;color:var(--muted);max-width:70ch}

/* 内容与侧栏：默认先是单列，desktop 使用两栏布局 */
.content-area{display:block}
.article{margin-top:8px}
.article-header{margin-bottom:10px}
.keywords{font-size:13px;color:var(--muted)}
.article-content{color:var(--ink);font-size:16px;word-wrap:break-word}
.article-content > * {max-width:100%}

.aside{margin-top:18px}
.aside-panel{padding:6px 0;color:var(--muted);font-size:14px}
.aside-title{font-weight:700;color:var(--accent);margin-bottom:6px}

/* FAQ 区顶部边线 */
.faq-section{border-top:4px solid var(--accent);padding-top:12px;margin-top:12px}
.faq-header{font-weight:700;color:var(--accent);margin-bottom:8px}
.faq-body{color:var(--muted)}

/* 相关阅读布局 */
.related-section{margin-top:12px}
.related-title{font-weight:700;margin-bottom:8px}
.related-list{display:grid;grid-template-columns:1fr;gap:10px;color:var(--muted)}

/* 页脚视觉签名：宽屏索引式排版 */
.site-footer{margin-top:28px;padding:18px 0;border-top:1px solid rgba(16,36,58,0.06)}
.footer-inner{padding-top:12px;padding-bottom:12px}
.footer-index{display:flex;gap:24px;flex-wrap:wrap}
.footer-index .col{min-width:140px}
.footer-index .col-title{font-weight:700;color:var(--accent);margin-bottom:8px}
.footer-index .wide{flex:1}
.col-note{color:var(--muted);font-size:13px}

/* 小屏样式（手机）—— 单列左对齐，避免窄正文 */
@media (max-width: 767px){
  .site-inner{padding:16px}
  .masthead{gap:12px}
  .masthead-nav{width:auto}
  .nav-list{flex-direction:row;gap:10px;align-items:center}
  .nav-item{display:none}
  .masthead-info{text-align:left}

  .title-block{text-align:left;padding-left:4px}
  .page-title{font-size:22px; -webkit-line-clamp:3} /* 更宽松，但不超出三行 */
  .meta-row{font-size:12px}
  .excerpt{text-align:left}

  .content-area{display:block}
  .aside{margin-top:20px}
  .related-list{grid-template-columns:1fr}

  .footer-index{flex-direction:column;gap:12px}
}

/* 桌面样式（1024px 及以上）—— 居中容器，非对称双栏，标题窄而居中 */
@media (min-width: 1024px){
  .site-inner{width:clamp(1120px, 75vw, 1440px);padding-left:var(--container-side-padding);padding-right:var(--container-side-padding)}

  .title-block{max-width:820px}

  /* 中轴布局：标题中心，上下文形成左右主次栏 */
  .content-area{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
  .article{min-width:0}
  .article-content{font-size:18px;max-width:none}

  .aside{position:relative}

  /* 相关阅读两列 */
  .related-list{grid-template-columns:1fr 1fr}

  /* 页脚索引式：横向排列 */
  .footer-index{align-items:flex-start}
}

/* 可访问性和可读性微调 */
.article-content p{margin:0 0 1em}
.article-content ul, .article-content ol{margin:0 0 1em 1.2em}
.visually-neutral{color:var(--muted)}

/* 避免默认卡片化风格：不使用大阴影、圆角 */
/* 保留清晰的边界与舒展留白 */