/* 全局变量与基线（视觉签名：直角+细线） */
:root{
  --bg:#f6efe6; /* 砂岩白 */
  --ink:#2b2b2b;
  --muted:#666;
  --accent:#a23b31; /* 砖红 */
  --line:rgba(43,43,43,0.08);
  --max-width:1320px; /* 在1120-1440之间，使用clamp确保响应 */
  --container-min:1120px;
  --container-max:1440px;
  --gutter:28px;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}
.page-surface{min-height:100vh;display:flex;flex-direction:column}

/* 工具栏（窄报头，左对齐品牌栏） */
.toolbar{border-bottom:1px solid var(--line);background:transparent}
.toolbar-inner{max-width:clamp(var(--container-min),90vw,var(--container-max));margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--accent)}
.site-link{color:var(--accent);text-decoration:none;font-weight:700}
.sep{color:var(--muted)}
.crumb{color:var(--muted);font-size:0.95rem}
.toolbar-right{display:flex;align-items:center}
.ad-slot{min-width:120px}
.ad-slot > *{display:block}

/* 容器与引导区（跨栏标题与摘要带） */
.container{max-width:clamp(var(--container-min),90vw,var(--container-max));margin:18px auto;padding:0 16px;flex:1}
.lead{padding:8px 0;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--accent);font-size:0.85rem;font-weight:600;text-transform:none;margin-bottom:6px}
.title{font-family:serif;margin:0;color:var(--ink);font-size:1.9rem;line-height:1.12}
.meta{margin-top:8px;color:var(--muted);font-size:0.9rem}
.summary{margin-top:12px;color:var(--ink);font-size:1rem}

/* 内容区：编辑部堆叠结构 -> 正文10/2边注 */
.content-area{margin-top:18px;display:block}
.main-article{background:transparent}
.main-article .content{color:var(--ink);font-size:1rem}
.side-notes{margin-top:18px}
.side-block{border-top:1px solid var(--line);padding:10px 0}
.side-title{font-size:0.95rem;margin:0 0 6px 0;color:var(--muted);font-weight:600}
.side-content{font-size:0.95rem;color:var(--ink)}

/* 底部区域：FAQ 与 推荐不同宽度错位排列 */
.bottom-area{margin-top:28px;display:block}
.section-title{font-size:1.05rem;margin:0 0 10px 0;color:var(--accent);font-weight:700}
.faq-list,.related-grid{display:block}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:14px 0;margin-top:24px}
.footer-inner{max-width:clamp(var(--container-min),90vw,var(--container-max));margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;color:var(--muted);font-size:0.95rem}

/* 禁止使用阴影和大圆角（视觉签名） */
*{border-radius:0}

/* ===== 桌面规则  (硬性要求：min-width:1024px) ===== */
@media (min-width:1024px){
  .lead{padding:18px 0}
  .title{font-size:2.4rem}

  /* 内容主/侧布局 -> 10/2 比例，使用 CSS Grid 实现非对称网格 */
  .content-area{
    display:grid;
    grid-template-columns: 5fr 1fr; /* 10:2 比例表现 */
    gap:28px;
    align-items:start;
  }
  .main-article{grid-column:1 / 2}
  .side-notes{grid-column:2 / 3;position:relative}
  .side-notes .ad-side{display:block;margin-top:12px}

  /* FAQ 与相关阅读不同宽度并错位排列 */
  .bottom-area{display:grid;grid-template-columns: 2fr 1fr;gap:28px;align-items:start}
  .faq-block{grid-column:1 / 2}
  .related-block{grid-column:2 / 3}

  /* FAQ 两列 */
  .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .faq-list > *{border-top:1px solid var(--line);padding:10px 0}

  /* 相关阅读四列紧凑网格（related_pattern） */
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid > *{font-size:0.95rem;color:var(--ink);line-height:1.2}

  /* 工具栏更窄 */
  .toolbar-inner{padding:10px 20px}
}

/* ===== 手机规则 (硬性要求：max-width:767px) ===== */
@media (max-width:767px){
  :root{--gutter:16px}
  .container{padding:0 12px}
  .title{font-size:1.25rem}
  .eyebrow{font-size:0.85rem}
  .meta{font-size:0.85rem}
  .summary{font-size:0.95rem}

  /* 所有层按语义顺序单列，取消错位与跨栏 */
  .content-area{display:block}
  .side-notes{margin-top:12px}

  /* FAQ 改为单列（faq_pattern） */
  .bottom-area{display:block}
  .faq-list{display:block}
  .faq-list > *{border-top:1px solid var(--line);padding:10px 0}

  /* 相关阅读改为单列列表（紧凑） */
  .related-grid{display:block}
  .related-grid > *{display:block;padding:8px 0;border-top:1px solid var(--line)}

  /* 工具栏内的广告尽量隐藏以避免横向滚动 */
  .toolbar-right{display:none}
  .ad-slot{max-width:100%}
}

/* 中等屏（768-1023）保持单列但扩展间距，不视为桌面 */
@media (min-width:768px) and (max-width:1023px){
  .container{padding:0 20px}
  .title{font-size:1.5rem}
  .toolbar-right{display:none}
}

/* 可访问性与印刷友好 */
a{color:var(--accent)}
h1,h2{margin:0}
p{margin:0 0 12px 0}