/* 设计变量与基础样式 */
:root{
  --navy: #0b2b4a; /* 海军蓝 */
  --mist: #f5f6f7; /* 浅雾灰 */
  --text: #222;
  --muted: #6b7280;
  --max-width: 1280px; /* 在 1120-1440 之间取中位 */
  --rail-width: 180px;
  --edge-width: 220px;
  --gap: 28px;
  --fluid-padding: 24px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roberto,"Helvetica Neue",Arial,"Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(180deg,var(--mist) 0%,#ffffff 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.page-shell{display:flex;align-items:flex-start;gap:var(--gap);max-width:calc(var(--max-width) + var(--rail-width) + var(--edge-width));margin:0 auto;padding:20px;}

/* 左侧纵向刊头 */
.rail{
  width:var(--rail-width);
  min-width:var(--rail-width);
  color:var(--navy);
  align-self:flex-start;
  padding-top:6px;
  line-height:1.25;
}
.rail .brand{display:inline-block;color:var(--navy);font-weight:700;text-decoration:none}
.rail .path{font-size:13px;color:var(--muted);margin-top:10px}

/* 主体布局：主列 + 右边缘辅助列（宽窄交替的承载空间） */
.layout{display:grid;grid-template-columns:1fr;gap:28px;flex:1;max-width:var(--max-width);width:100%;}
.article{background:transparent;margin:0}
.article-head{margin-bottom:8px}

/* 标题：超大但不超过两行并紧接正文 */
.title{
  margin:0 0 8px 0;
  color:var(--navy);
  font-weight:800;
  font-size:clamp(28px,4.4vw,40px);
  line-height:1.05;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.meta{display:flex;gap:12px;font-size:13px;color:var(--muted);margin-bottom:8px}
.summary{margin:0 0 18px 0;color:rgba(0,0,0,0.75);font-size:15px;line-height:1.6}

/* 正文应易读、舒展 */
.article-content{color:var(--text);font-size:17px;line-height:1.9;hyphens:auto}
.article-content p{margin:0 0 16px}
.article-content h2{margin:22px 0 10px;font-size:20px}

/* 广告容器（独立块，不能遮挡或浮动） */
.ad{background:transparent;border:1px dashed transparent;padding:10px 0;text-align:center;color:var(--muted);font-size:14px}
.ad-block{margin:22px 0}

/* FAQ 区：桌面左问右答，手机堆叠 */
.faq-section{margin-top:18px}
.faq-grid{display:block}
.faq-grid > *{margin:10px 0}
/* 期待服务器渲染 .faq-item .q 与 .a；提供表格式样式 */
.faq-grid .faq-item{display:block}
.faq-grid .faq-item .q{font-weight:700;color:var(--navy);margin-bottom:6px}
.faq-grid .faq-item .a{color:var(--text)}

/* 相关阅读：带日期的分隔线列表 */
.related-section{margin-top:20px}
.related-heading{font-size:15px;margin:0 0 8px 0;color:var(--navy)}
.related-list{list-style:none;padding:0;margin:0;border-top:1px solid rgba(11,43,74,0.06)}
.related-list > *{padding:12px 0;border-bottom:1px solid rgba(11,43,74,0.04);display:flex;justify-content:space-between;align-items:center}
.related-list time{font-size:13px;color:var(--muted);margin-left:12px}

/* footer 视觉签名：宽屏索引式排版 */
.site-footer{padding:28px 24px;background:transparent;color:var(--muted);border-top:1px solid rgba(11,43,74,0.06);margin-top:36px}
.footer-index{display:flex;gap:40px;justify-content:space-between;max-width:var(--max-width);margin:0 auto 12px auto}
.footer-index .col{min-width:0}
.footer-index .col strong{display:block;color:var(--navy);margin-bottom:8px}
.footer-note{text-align:center;font-size:13px;color:var(--muted)}

/* 可访问性隐藏文本 */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- 桌面规则：1024px 及以上 ---------- */
@media (min-width:1024px){
  .page-shell{padding:36px;}
  /* 主体三栏：左刊头（rail）+ 主区 + 右边缘辅助（用于编辑部式组合/宽窄交替） */
  .layout{grid-template-columns:1fr var(--edge-width);align-items:start}

  /* 使正文与 FAQ 呈现宽窄交替：正文占主区，FAQ 使用两列（左问右答） */
  .article-content{max-width:calc(var(--max-width) - var(--edge-width));}

  .faq-grid{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start}
  .faq-grid .faq-item{display:contents}
  .faq-grid .faq-item .q{grid-column:1;color:var(--navy);padding-right:8px;border-right:1px solid rgba(11,43,74,0.04)}
  .faq-grid .faq-item .a{grid-column:2;padding-left:12px}

  /* 相关阅读列微调，放在右侧辅助列区（避免右侧热门文章套路：仅用于相关阅读/工具） */
  .related-section{grid-column:2}
  .ad-block{grid-column:1 / -1}

  /* Footer: 宽屏索引式排版更显著 */
  .footer-index{padding:0 12px}
}

/* ---------- 手机规则：最大宽度 767px ---------- */
@media (max-width:767px){
  .page-shell{flex-direction:column;padding:12px;gap:12px}
  .rail{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 0}
  .rail .path{display:none}
  .layout{grid-template-columns:1fr;max-width:100%}

  /* 标题与摘要紧凑连续，避免首屏空白 */
  .title{font-size:20px;line-height:1.12;margin-bottom:6px}
  .summary{font-size:14px;margin-bottom:12px}

  /* FAQ：手机堆叠，题目在上答在下 */
  .faq-grid{display:block}
  .faq-grid .faq-item{border-top:1px solid rgba(11,43,74,0.04);padding:12px 0}
  .faq-grid .faq-item .q{display:block;margin-bottom:6px}
  .faq-grid .faq-item .a{display:block}

  /* 相关阅读：改为竖列，日期靠右 */
  .related-list > *{flex-direction:row}

  /* Footer 堆叠 */
  .footer-index{flex-direction:column;gap:12px;padding:8px}
  .footer-index .col ul{padding-left:0;margin:0}

  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 保守的中等断点（768 - 1023）保持可读性 */
@media (min-width:768px) and (max-width:1023px){
  .page-shell{padding:20px}
  .rail{display:none}
  .layout{grid-template-columns:1fr}
  .title{font-size:26px}
}

/* 其他视觉微调 */
a{color:inherit;text-decoration:none}
strong{color:var(--navy)}