/* 全局变量与基本复位 */
:root{
  --bg: #F7F6F3; /* 纸白 */
  --ink: #0b2338; /* 藏蓝深色 */
  --muted: #4b5b66;
  --accent: #0e3b57; /* 主题色，用于边线与条带 */
  --band: #ffffff;
  --max-width: 1200px; /* 在1120-1440之间 */
  --gap: 24px;
  --baseline: 1.5rem; /* 基线节奏 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width);margin:18px auto;padding:0 20px}

/* 报头：双层但第二层极窄，居中刊头，横线导航 */
.site-header{background:transparent;padding:8px 0 0}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;text-align:center}
.masthead{padding:6px 0}
.site-title{font-weight:700;color:var(--accent);font-size:1.125rem}
.site-sub{font-size:0.8125rem;color:var(--muted);margin-top:2px}
.nav-bar{font-size:0.875rem;color:var(--muted);margin-top:6px}
.nav-bar a{color:var(--ink);text-decoration:none}
.nav-rule{border:0;border-top:2px solid var(--accent);margin:10px auto 0;height:0;width:100%}

/* 编辑部堆叠结构主网格 */
.editor-grid{display:block}
.article{background:transparent}
.article-head{margin-bottom:var(--gap)}

/* 标题构图：压左并用粗细横线构图 */
.title{font-size:1.75rem;margin:8px 0 6px;font-weight:700;color:var(--ink);text-align:left;position:relative;padding-left:0}
.title:before{content:"";display:block;height:6px;background:var(--accent);width:56px;margin-bottom:6px}
.title:after{content:"";display:block;height:2px;background:var(--accent);width:120px;margin-top:8px}

.meta{font-size:0.875rem;color:var(--muted);margin-bottom:10px}
.meta .published,.meta .now{display:inline-block}

/* 摘要带：跨栏带状样式 */
.summary-band{background:var(--band);border:1px solid #e6e4df;padding:12px 14px;margin:0 0 16px;border-radius:2px}
.summary-label{display:block;font-weight:600;color:var(--accent);margin-bottom:6px}
.summary{margin:0;color:var(--muted);font-size:0.98rem}

/* 文章主体：两列布局（桌面）/单列（移动） */
.article-body{display:flex;flex-direction:column;gap:16px}
.content-column{}
.article-content{background:transparent;padding:0 2px 8px 0;color:var(--ink);font-size:1rem;line-height:1.6}

/* 正文区视觉签名：双层基线网格感 */
.article-content{
  background-image:
    repeating-linear-gradient(to bottom, rgba(11,35,56,0.02) 0px, rgba(11,35,56,0.02) 1px, transparent 1px, transparent calc(var(--baseline) * 1)),
    repeating-linear-gradient(to bottom, rgba(11,35,56,0.035) 0px, rgba(11,35,56,0.035) 1px, transparent 1px, transparent calc(var(--baseline) * 2));
  background-size:100% auto;
}
.article-content p{margin:0 0 1rem}
.article-content h2{font-size:1.1rem;margin:0.8rem 0}

/* 广告容器（不得悬浮/覆盖） */
.ad{border:1px dashed #d7d5d0;background:#fff;padding:10px;margin:14px 0;color:var(--muted);font-size:0.95rem}

/* FAQ：主题色顶部边线 */
.faq{border-top:4px solid var(--accent);padding-top:12px;margin-top:16px}
.faq-title{font-size:1rem;margin:0 0 8px}
.faq-list{font-size:0.95rem;color:var(--muted)}

/* 边注（侧栏） */
.side-column{margin-top:12px}
.side-box{background:#fff;border:1px solid #e6e4df;padding:12px}
.side-title{font-size:0.95rem;margin:0 0 6px;color:var(--accent)}
.side-note{margin:0;color:var(--muted);font-size:0.92rem}

/* 相关阅读四列紧凑标题网格（桌面） */
.related{margin-top:12px}
.related-title{font-size:0.95rem;color:var(--accent);margin:0 0 8px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:0.92rem}
.related-grid > *{background:#fff;border:1px solid #e6e4df;padding:8px}

/* 页脚 */
.article-footer{margin-top:18px;padding-top:8px;border-top:1px solid #eee}
.footer-inner{max-width:var(--max-width);margin:18px auto;padding:12px 20px;text-align:center;color:var(--muted);font-size:0.9rem}

/* 桌面专属布局：1024px 以上 */
@media (min-width: 1024px){
  .container{padding:0}
  .editor-grid{display:block}
  .article{display:grid;grid-template-columns:10fr 2fr;grid-column-gap:28px;align-items:start}
  .article-head{grid-column:1 / -1}
  .title{font-size:2rem}
  .summary-band{grid-column:1 / -1}
  .article-body{display:grid;grid-template-columns:10fr 2fr;grid-column-gap:28px}
  .content-column{grid-column:1 / 2}
  .side-column{grid-column:2 / 3}

  /* 相关阅读：桌面四列紧凑网格 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid > *{font-size:0.9rem;padding:10px}

  /* 底部 FAQ 与相关推荐不同宽度错位排列（底部区域独立） */
  .faq{grid-column:1 / 2}
  .related{grid-column:1 / 2; margin-top:12px}

  /* title 横线构图加粗细对比 */
  .title:before{width:72px;height:8px}
  .title:after{width:180px;height:2px}
}

/* 移动专属布局：最大宽度 767px */
@media (max-width: 767px){
  body{font-size:15px}
  .container{padding:0 14px}
  .site-title{font-size:1rem}
  .nav-rule{display:none}
  /* 单列，语义顺序自然重排，边注下移 */
  .article{display:block}
  .article-head{padding:6px 0}
  .title{font-size:1.25rem}
  .title:before{width:48px;height:6px}
  .title:after{width:100px;height:2px}
  .article-body{display:block}
  .content-column{order:0}
  .side-column{order:1;margin-top:14px}
  .article-content{background-image:
    repeating-linear-gradient(to bottom, rgba(11,35,56,0.015) 0px, rgba(11,35,56,0.015) 1px, transparent 1px, transparent calc(var(--baseline) * 1.1));
  }
  .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .ad{margin:12px 0}
}

/* 禁止使用阴影作为层级（模板约束）——不使用 box-shadow */