/* 主题与版式变量 */
:root{
  --bg-head:#2f2f31; /* 石墨灰 */
  --accent:#c8aa00; /* 芥末黄 */
  --body-bg:#ffffff;
  --text:#111214;
  --muted:#6b6b6b;
  --container-max:1320px; /* 介于1120-1440的目标 */
  --title-face: Georgia, 'Times New Roman', serif;
  --body-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Microsoft YaHei', sans-serif;
  --line:1.7;
}

/* 基础重置与可读性 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--body-bg);color:var(--text);font-family:var(--body-face);margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.stage{display:flex;flex-direction:column;min-height:100vh}

/* 报头：深色刊头与极窄次级线 */
.site-header{background:var(--bg-head);color:var(--body-bg)}
.masthead{max-width:1200px;margin:0 auto;padding:20px 20px;text-align:center}
.masthead .home{font-weight:700;font-size:20px;letter-spacing:1px}
.navline{border-top:4px solid var(--accent);border-bottom:1px solid rgba(255,255,255,0.06);background:transparent}
.navline .nav-items{max-width:1200px;margin:0 auto;padding:6px 20px;text-align:center;color:rgba(255,255,255,0.88);font-size:12px}

/* 全局容器与网格基础（桌面与平板） */
.container{width:100%;margin:28px auto;display:grid;gap:28px;padding:0 20px}
.article{background:transparent}
.editor{background:transparent}

/* 标题与元信息 */
.article-header h1{font-family:var(--title-face);font-size:34px;line-height:1.06;margin:0 0 12px;color:var(--text)}
.meta{display:flex;gap:12px;font-size:13px;color:var(--muted);align-items:center;margin-bottom:14px}
.meta .published{font-weight:500}

/* 摘要区：视觉签名为窄色带而非卡片 */
.abstract{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.sig-band{width:6px;height:100%;background:var(--accent);flex:0 0 6px;border-radius:1px}
.summary{margin:0;padding:6px 0;color:var(--muted);line-height:1.5}

/* 正文：可读性为核心，不折叠 */
.content{color:var(--text);font-size:16px;line-height:var(--line);hyphens:auto}
.content p{margin:0 0 1em}
.content > *:first-child{margin-top:0}

/* 广告容器（独立、不悬浮） */
.ad{max-width:var(--container-max);margin:18px auto;padding:10px 12px;border:1px dashed rgba(0,0,0,0.06);color:var(--muted);font-size:13px}
.ad-top,.ad-middle,.ad-bottom{background:#fff}

/* FAQ：桌面表格式（左问题、右答案） */
.faq .section-title{font-size:16px;margin:18px 0}
.faq-list{margin:0;padding:0;display:block}
.faq-list dt, .faq-list dd{margin:0;padding:10px 0;border-bottom:1px solid #f0f0f0}
.faq-list dt{font-weight:600;color:var(--text)}
.faq-list dd{color:var(--muted)}

/* 相关阅读：两列摘要列表（桌面） */
.related .section-title{font-size:16px;margin:18px 0}
.related-list{list-style:none;padding:0;margin:0;display:block}
.related-list li{padding:10px 0;border-bottom:1px solid #f4f4f4}

/* 编辑部侧栏 */
.editor-title{font-weight:700;color:var(--text);margin-bottom:12px}
.editor-body{border-left:1px solid #e6e6e6;padding-left:18px}

/* 页脚 */
.site-footer{border-top:1px solid #efefef;padding:18px 20px;margin-top:28px;color:var(--muted);font-size:13px}

/* 桌面专用排版（必须存在） */
@media (min-width:1024px){
  .container{ /* 容器在 1120 - 1440 之间 */
    width:clamp(1120px, 82vw, 1320px);
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:28px;
    align-items:start;
  }

  /* 文章占 8 列，编辑推荐占 4 列，使用分隔线而非卡片 */
  .article{grid-column:1 / span 8}
  .editor{grid-column:9 / span 4;padding-left:24px;border-left:1px solid #e9e9e9}

  /* FAQ：桌面左问右答的表格式，重排 dl 项 */
  .faq-list dt, .faq-list dd{display:inline-block;vertical-align:top;padding:12px 10px;border-bottom:1px solid #f0f0f0}
  .faq-list dt{width:28%;padding-right:20px}
  .faq-list dd{width:72%;color:var(--muted)}

  /* 相关阅读两列摘要 */
  .related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .related-list li{border-bottom:0;padding:8px 10px;border-right:1px solid transparent}

  /* 标题构图：大标题配窄元信息列（元信息紧凑布局） */
  .meta{font-size:13px}
  .article-header h1{font-size:40px}
}

/* 手机端独立重排（必须存在） */
@media (max-width:767px){
  .masthead{padding:10px 14px}
  .masthead .home{font-size:16px}
  .navline{display:none} /* 第二层极窄，手机压缩为一行并去掉额外占用 */

  .container{width:100%;padding:12px}
  .container{display:block}
  .article{width:100%}
  .editor{width:100%;border-left:0;padding-left:0;margin-top:18px;border-top:1px solid #eee;padding-top:12px}

  .article-header h1{font-size:20px;line-height:1.15;margin-bottom:8px}
  .meta{flex-direction:column;align-items:flex-start;gap:6px}
  .abstract{align-items:flex-start}
  .sig-band{height:22px}

  .content{font-size:15px;line-height:1.8}

  /* FAQ 在手机上改为垂直堆叠，避免并列表格造成横向滚动 */
  .faq-list dt, .faq-list dd{display:block;width:100%}
  .faq-list dt{padding-top:10px}
  .faq-list dd{padding-bottom:12px}

  /* 相关阅读单列 */
  .related-list{display:block}
  .related-list li{padding:10px 0}

  /* 广告容器确保在320px无横向滚动 */
  .ad{padding:8px;overflow-wrap:break-word}

  /* 触发可读性的更宽留白 */
  body{padding-bottom:18px}
}

/* 无阴影、无玻璃拟态，信息层级靠边线与空白实现（遵守 forbidden_pattern） */