/* 颜色与变量 - 藏蓝与纸白 */
:root{
  --bg: #F7F5F2; /* 纸白 */
  --text: #111114;
  --muted: #66676a;
  --navy: #0b2340; /* 藏蓝 */
  --border: rgba(11,35,64,0.12);
  --radius: 2px; /* surface 小圆角 */
  --max-width: 1200px; /* 桌面容器（1120-1440 范围内） */
  --gutter: 20px;
  --grid-line: rgba(11,35,64,0.04);
}

/* 全局重置与排版（系统字体，现代无衬线编辑风） */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,"PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55; /* 清晰行距 */
  font-size:16px;
}

/* header - 居中刊头与横线导航（单行文字刊头） */
.site-header{padding:18px 16px 6px 16px;text-align:center}
.header-inner{max-width:var(--max-width);margin:0 auto}
.site-logo{font-weight:700;color:var(--navy);text-decoration:none;font-size:18px}
.top-nav{display:inline-flex;gap:8px;color:var(--muted);font-size:13px;margin-left:12px}
.top-nav .divider{opacity:.5}
.thin-rule{border:0;border-top:1px solid var(--border);margin:12px auto 0;max-width:var(--max-width)}

/* 页面容器 */
.page-wrap{padding:18px 16px 32px;margin:0 auto;max-width:var(--max-width)}
.content-grid{display:grid;grid-template-columns:1fr;gap:20px}

/* Article 主体 */
.article{background:transparent;border-radius:var(--radius)}
.article-header{margin-bottom:8px}
.title{
  margin:0 0 8px 0;
  color:var(--text);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
  /* 超大标题但不超过两行：使用 clamp 控制 */
  font-size:clamp(22px, 5.2vw, 40px);
  word-break:break-word;
}
.meta{color:var(--muted);font-size:13px;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.meta .published,.meta .now{white-space:nowrap}
.summary{margin:0 0 12px 0;color:var(--muted);font-size:15px}

/* 正文：连续、不可折叠 */
.article-body{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px; color:var(--text);font-size:16px}
.article-body p{margin:0 0 12px}
.article-body h2,.article-body h3{color:var(--navy);margin:18px 0 8px}
.article-body blockquote{margin:12px 0;padding-left:12px;border-left:3px solid var(--grid-line);color:var(--muted)}

/* 广告占位（独立容器，不悬浮） */
.ad-slot{margin:18px 0;padding:10px;border:1px dashed var(--border);background:transparent;border-radius:var(--radius);color:var(--muted);font-size:14px}
.ad-slot *{pointer-events:none}

/* FAQ - 采用 details 样式（设计要求） */
.faq-section{margin-top:18px}
.faq-list details{border-top:1px solid var(--border);padding:10px 0}
.faq-list summary{cursor:pointer;list-style:none;font-weight:600;color:var(--navy)}
.faq-list details[open] summary{color:var(--text)}
.faq-list details p{margin:8px 0 0;color:var(--muted)}

/* 侧栏 */
.sidebar{display:block}
.info-surface{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:18px;font-size:14px}
.info-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted)}

/* 相关阅读 - 视觉签名：反向色块标题栏 + 编号列表 */
.related{background:transparent}
.related-header{background:var(--navy);color:var(--bg);padding:10px 12px;border-radius:var(--radius);font-weight:700;margin-bottom:8px}
.related-list{counter-reset:item;margin:0;padding:0 0 0 18px;list-style:none}
.related-list li{counter-increment:item;padding:8px 0;border-bottom:1px solid transparent}
.related-list li::marker{display:none}
.related-list li::before{content:counter(item)".";color:var(--navy);display:inline-block;width:28px;margin-left:-28px;font-weight:600}
.related-list li a{color:var(--muted);text-decoration:none}

/* footer */
.site-footer{padding:18px 16px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:13px}

/* 无障碍隐藏文本 */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 桌面布局：1024px 及以上 - 必须有不同结构（8/4 分栏） */
@media (min-width:1024px){
  .page-wrap{padding:28px 24px}
  .content-grid{grid-template-columns:8fr 4fr;align-items:start;gap:28px}

  /* 顶部的细线网格作为主视觉，但不能为大面积纯色 Hero */
  .site-header{padding-bottom:8px}
  .page-wrap::before{
    content:"";
    display:block;
    height:36px;
    margin:-10px 0 18px 0;
    background-image:repeating-linear-gradient(90deg, transparent 0 48px, var(--grid-line) 49px 50px);
    opacity:0.95;
    pointer-events:none;
  }

  .title{font-size:44px;line-height:1.02;max-height:calc(1.02*44px*2);overflow:hidden}

  .article-body{font-size:17px;padding:22px}
  .ad-slot{margin:20px 0}
}

/* 手机端布局：最大 767px，改为单列、缩小标题比例 */
@media (max-width:767px){
  body{font-size:15px}
  .page-wrap{padding:14px 12px}
  .content-grid{grid-template-columns:1fr;gap:14px}
  .title{font-size:20px;line-height:1.12}
  .article-body{padding:14px;font-size:15px}
  .related-header{padding:8px 10px}
  .related-list{padding-left:14px}
  .info-surface{padding:10px}
  /* 侧栏下移成页面自然区块（已由网格重排实现） */
}

/* 兼容性小调整：防止 320px 横向滚动或文字截断 */
@media (max-width:320px){
  .title{font-size:18px}
  .article-body{padding:10px}
  .page-wrap{padding-left:10px;padding-right:10px}
}