:root{
  --max-width:1280px; /* 在1120-1440之间取中值，满足合同 */
  --color-bg:#f6f8f8; /* 页面底色浅青灰 */
  --color-head:#0f4b4a; /* 深色报头，湖蓝偏沉 */
  --color-accent:#2b92a0; /* 湖蓝点缀 */
  --color-ink:#17201f;
  --muted:#6b7776;
  --surface:#ffffff; /* 正文纯白 */
  --gap:20px;
  --baseline:24px; /* 基线节奏 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 全局布局 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--color-bg);color:var(--color-ink);}
a{color:var(--color-accent);text-decoration:none}
.container, .inner, .inner-footer{max-width:var(--max-width);margin:0 auto;padding:0 20px}

.tool-bar{
  background:var(--color-head);
  color:#fff;
  padding:10px 0;
  border-bottom:3px solid rgba(255,255,255,0.03);
}
.tool-bar .inner{display:flex;align-items:center;gap:12px}
.site-name{font-weight:700;letter-spacing:0.02em;color:#fff}
.crumb{margin-left:auto;color:rgba(255,255,255,0.85);font-size:14px}

.page-wrap{padding:22px 0}
.layout-grid{display:grid;gap:28px;align-items:start;padding:0 20px}

/* article 和侧栏基础 */
.article{background:transparent}
.article-header{background:transparent;padding-bottom:10px}
.title{font-family: Georgia, 'Times New Roman', serif; font-size:28px;line-height:1.15;margin:8px 0 12px;text-align:center;font-weight:700}
.meta-row{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:13px}
.summary{max-width:76ch;margin:18px auto 12px}
.summary-label{display:block;color:var(--color-head);margin-bottom:6px;font-weight:600}
.summary-text{margin:0;color:var(--muted);text-align:left}

/* 正文区：纯白表面 + 双层基线网格感 */
.body{
  background:var(--surface);
  padding:28px;
  color:var(--color-ink);
  line-height:1.6;
  font-size:16px;
  border:1px solid rgba(17,34,34,0.04);
  /* 双层基线：强线每48px，浅线每24px */
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.015) 0, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 48px);
  background-size:100% auto;
}
.body p{margin:0 0 14px}
.body h2{margin:18px 0 8px;font-size:18px}

/* FAQ 两栏在桌面，单列在手机 */
.faq-section .section-title,.related-section .section-title{font-size:16px;margin:22px 0 10px;color:var(--color-head)}
.faq-grid{display:grid;gap:10px}

/* 相关阅读底部三列短卡但不用阴影 */
.related-grid{display:grid;gap:10px}
.related-grid > *{background:var(--surface);padding:12px;border:1px solid rgba(17,34,34,0.04);}

/* 侧栏方形信息块 */
.side{padding-top:6px}
.block{background:var(--surface);padding:16px;border:1px solid rgba(17,34,34,0.04);}
.block.square{border-radius:2px}
.block-title{font-size:14px;margin:0 0 8px;color:var(--color-head)}
.meta-list{margin:0;padding:0;font-size:13px}
.meta-list dt{font-weight:600;color:var(--muted);margin-top:8px}
.meta-list dd{margin:0 0 6px;color:var(--color-ink)}

.ad-holder{max-width:var(--max-width);margin:18px auto;padding:0 20px}
.ad-holder > *{display:block}

.site-footer{padding:18px 0;color:var(--muted)}
.inner-footer{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* --- 桌面规则 (强制) --- */
@media (min-width:1024px){
  .layout-grid{grid-template-columns:10fr 2fr;max-width:var(--max-width);margin:0 auto;gap:28px}
  .article{order:1}
  .side{order:2}

  /* 标题更显著，跨列感通过更宽的标题体例 */
  .title{font-size:34px}

  /* 正文保留较宽阅读宽度，避免窄列 */
  .body{max-width:920px;margin:6px 0 20px}

  /* FAQ 两列 */
  .faq-grid{grid-template-columns:1fr 1fr}

  /* 相关阅读三列 */
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* --- 手机规则 (强制) --- */
@media (max-width:767px){
  /* 全部变为单列，取消固定宽度 */
  .layout-grid{grid-template-columns:1fr;padding:0 14px}

  /* 边注并入标题下方（侧栏下移） */
  .side{order:2;margin-top:12px}
  .article{order:1}

  /* 标题居中但字号降低，摘要左对齐在标题下方 */
  .title{font-size:20px;margin-top:4px}
  .summary{margin:8px 0}

  /* 正文与屏幕边缘贴合，取消最大宽度限制 */
  .body{padding:18px;font-size:15px}

  /* FAQ 单列 */
  .faq-grid{grid-template-columns:1fr}

  /* 相关阅读改为一列或两列视宽度 */
  .related-grid{grid-template-columns:1fr}

  /* 小屏避免横向滚动 */
  html,body{overflow-x:hidden}
}

/* 可访问性与微调 */
.title, .section-title{word-break:break-word}
.summary-text, .body p{hyphens:auto}