/* 样式变量与通用重置 */
:root{
  --bg:#f7f7f6;            /* 清淡石墨纸感背景 */
  --surface:#ffffff;       /* 主要面板 */
  --text:#222222;          /* 主文本色 */
  --muted:#6b6b6b;         /* 次要文字 */
  --rule:#e6e6e4;          /* 章节分隔线 */
  --accent:#b78f00;        /* 芥末黄（克制强调色） */
  --max-width:1320px;      /* 桌面容器参考宽度，最终受媒体查询控制 */
  --gap:24px;
  --radius:4px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background-color:var(--bg);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* 顶部样式 */
.site-header{background:transparent;padding:18px 0 6px}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.masthead-centered{display:flex;align-items:center;justify-content:center;gap:24px}
.site-title{font-weight:700;font-size:1rem;padding:4px 8px;color:var(--text)}
.top-nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.top-nav a, .top-nav span{font-size:0.92rem;color:var(--muted)}
.section-rule{border:none;border-top:1px solid var(--rule);margin:12px 0 0}

/* 页面容器 */
.page-container{padding:28px 16px}
.editorial-wrap{display:grid;grid-template-columns:1fr;gap:var(--gap);max-width:calc(100% - 40px);margin:0 auto}

/* 左侧竖向刊头（视觉标识），桌面显示 */
.vertical-head{display:none}
.vertical-inner{writing-mode:vertical-rl;text-orientation:mixed;padding:8px 6px;color:var(--muted);border-right:0}
.vertical-initial{font-weight:700;color:var(--muted);letter-spacing:0.06em}

/* 文章区域 */
.article-area{background:transparent;padding:0 6px}
.title-band{padding:8px 0 12px}
.eyebrow{font-size:0.85rem;color:var(--accent);font-weight:600;letter-spacing:0.02em}
.article-title{font-size:1.8rem;margin:6px 0 8px;line-height:1.12;letter-spacing:0.01em;font-weight:800}
.article-title::first-letter{color:var(--accent)} /* 视觉签名：标题首字强调 */
.meta-row{font-size:0.875rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.meta-row .sep{color:var(--rule)}

.summary-band{padding:12px 0;border-top:1px solid transparent}
.summary-text{margin:6px 0;color:var(--muted)}

/* 内容与边注栈 */
.content-grid{display:block;margin-top:12px}
.main-column{min-width:0}
.content{background:var(--surface);padding:22px;border-radius:0;color:var(--text)}
.content :where(p,ul,ol){margin:0 0 1em}

.side-column{display:block;margin-top:18px}
.side-box{background:transparent;padding:12px 0}
.side-heading{font-size:0.9rem;color:var(--muted);font-weight:600}
.side-body{margin-top:6px;color:var(--muted)}

/* 广告位风格（不得悬浮、遮挡） */
.ad-slot{background:transparent;padding:12px 0;text-align:center;color:var(--muted);font-size:0.95rem}
.ad-slot > *{display:inline-block;max-width:100%}

/* FAQ 与相关阅读 */
.faq-section,.related-section{margin-top:22px}
.section-title{font-size:1rem;margin:6px 0 12px;color:var(--text);border-top:1px solid var(--rule);padding-top:12px}
.faq-body{color:var(--muted);line-height:1.6}
.related-body{display:block}

/* 底部 */
.site-footer{padding:28px 16px;margin-top:30px;color:var(--muted)}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* 手机端（<=767px）：单列，语义顺序重排 */
@media (max-width:767px){
  .header-inner{padding:0 12px}
  .masthead-centered{flex-direction:column;gap:6px}
  .top-nav ul{gap:10px}
  .editorial-wrap{grid-template-columns:1fr;max-width:100%;padding:0}
  .vertical-head{display:none}
  .article-title{font-size:1.4rem}
  .article-title::first-letter{font-size:1.4rem}
  .content{padding:18px}
  .side-column{order:99} /* 将边注下移，恢复自然阅读顺序 */
  .ad-top,.ad-middle,.ad-bottom{font-size:0.95rem}
  .summary-text{font-size:0.95rem}
  .related-body{display:block}
  /* 相关阅读在移动端为单列顺序列表（保持由 {{related}} 提供链接） */
  .related-body > *{display:block}
}

/* 桌面端 (>=1024px)：编辑部堆叠结构，容器宽度在 1120px—1440px 范围内 */
@media (min-width:1024px){
  :root{--max-width:1320px}
  .header-inner,.footer-inner{max-width:var(--max-width);margin:0 auto}
  .editorial-wrap{grid-template-columns:80px 1fr;align-items:start;gap:36px;max-width:clamp(1120px,80vw,1440px)}
  .vertical-head{display:block}
  .vertical-inner{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .vertical-initial{writing-mode:vertical-rl;font-weight:700;color:var(--muted);font-size:0.95rem}

  /* 内容区采用 10:2 的主次列比（通过 fr 比例实现） */
  .article-area{width:100%}
  .content-grid{display:grid;grid-template-columns:10fr 2fr;gap:28px;align-items:start}
  .article-title{font-size:2.4rem}
  .article-title::first-letter{font-size:2.4rem}
  .summary-band{background:transparent;padding:12px 0;border-top:1px solid transparent}

  /* FAQ 与相关阅读在底部使用错位排列：FAQ 占较窄列，相关阅读更宽并错落 */
  .faq-section{grid-column:1 / span 1}
  .related-section{margin-top:18px}
  .related-body{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .related-body > *{background:var(--surface);padding:10px;color:var(--muted);border-top:1px solid var(--rule)}
}

/* 无阴影、克制的边线和间距来表达信息层级，禁止使用阴影作为层级手段 */
/* 编号式 FAQ（若内容为列表或段落，可由后端/内容提供者结构化），通过 CSS 提供视觉编号 */
.faq-body ol{counter-reset:faq-counter;margin:0;padding:0}
.faq-body ol li{list-style:none;margin:0 0 12px;padding-left:36px;position:relative}
.faq-body ol li::before{counter-increment:faq-counter;content:counter(faq-counter);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:6px;background:transparent;color:var(--accent);font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* 可访问性：隐藏仅用于视觉的标题但保留结构 */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 细微响应和文本流优化 */
.content p, .summary-text, .faq-body, .related-body{font-size:1rem;color:var(--text)}
@media (min-width:1024px){.content p{font-size:1.03rem}}