:root{
  --bg:#f6f1e7; /* 米白 */
  --ink:#0b2b20; /* 墨绿深色做文字 */
  --accent:#2b7a54; /* 克制强调色 */
  --muted:#6a6a66;
  --container-min:1120px;
  --container-max:1320px;
  --max-width:1320px;
  --gutter:28px;
  --radius:6px;
}
/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.page-wrap{display:flex;justify-content:center;padding:18px}
.page-container{
  width:100%;
  max-width:var(--max-width);
  min-width:var(--container-min);
  background:transparent;
}
/* 顶部工具栏：极简细导航，站名与面包屑合并为工具栏 */
.site-header{background:linear-gradient(180deg, rgba(11,43,32,0.98), rgba(11,43,32,0.95)); color:var(--bg); padding:12px 0}
.toolbar{display:flex;align-items:center;gap:18px;max-width:var(--max-width);margin:0 auto;padding:0 18px}
.site-brand{color:var(--bg);text-decoration:none;font-weight:700;letter-spacing:0.2px}
.breadcrumb{color:rgba(255,255,255,0.75);font-size:13px}

/* 顶部 headline：左右分栏（桌面），移动上下 */
.headline{display:grid;gap:20px;align-items:start;padding:20px 18px}
.headline-left{order:1}
.headline-right{order:2}
.article-title{margin:0;font-size:28px;line-height:1.18;font-weight:700;color:var(--ink);}
.article-title::first-letter{color:var(--accent)} /* visual_signature */
.meta-row{margin-top:10px;color:var(--muted);font-size:13px}
.summary{background:#ffffff;padding:14px;border-radius:4px;color:var(--ink);box-shadow:none;border:1px solid rgba(6,26,20,0.04)}
.kw{margin-top:10px;color:var(--muted);font-size:13px}
.keywords{color:var(--accent);font-weight:600}

/* 内容区域：桌面 7/5 两栏；移动单列自然重排 */
.content-area{display:grid;gap:28px;padding:18px}
.article-area{order:1}
.side-area{order:2}
.article{background:#fff;padding:18px;border-radius:4px;border:1px solid rgba(6,26,20,0.04)}
.article-header.small{margin-bottom:12px}
.label{font-size:13px;color:var(--muted)}
.article-body{color:var(--ink);font-size:16px}
.article-body > *{margin:0 0 1em 0}
.faq .side-title, .related .side-title{font-size:15px;margin:0 0 10px 0;color:var(--ink)}
.faq-list{background:transparent}
.related-list{display:grid;gap:10px}
.related-list > *{background:#fff;padding:10px;border-radius:4px;border:1px solid rgba(6,26,20,0.04);font-size:14px;color:var(--ink)}

/* 广告容器样式，均为独立块，不悬浮、不覆盖 */
.ad-container{background:transparent;padding:10px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-top{max-width:var(--max-width);margin:8px auto}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:24px}

/* 页脚 */
.site-footer{padding:18px 0;color:var(--muted);text-align:center}

/* 桌面规则：1024px 及以上，启用对称容器与非对称网格 */
@media (min-width:1024px){
  .page-wrap{padding:30px}
  .page-container{min-width:1120px;max-width:1440px}
  .headline{grid-template-columns:1fr 1fr;gap:28px;padding:30px}
  .article-title{font-size:34px}
  /* 内容 7/5 网格 */
  .content-area{grid-template-columns:7fr 5fr;align-items:start;gap:30px;padding:24px}
  .article{padding:24px}
  .related-list{grid-template-columns:1fr 1fr}
  /* 在桌面上，右栏承载 FAQ 与 推荐；不使用顶部常规卡片 */
  .headline-right .summary{min-height:72px}
}

/* 手机规则：最大 767px，标题与摘要上下排列，正文、FAQ、推荐顺序呈现；避免横向滚动 */
@media (max-width:767px){
  :root{--gutter:14px}
  .page-wrap{padding:8px}
  .page-container{min-width:320px;max-width:100%;}
  .headline{grid-template-columns:1fr;gap:12px;padding:12px}
  .headline-left,.headline-right{order:initial}
  .article-title{font-size:20px}
  .meta-row{font-size:12px}
  .summary{padding:12px}
  .content-area{display:block;padding:12px}
  .article-area{margin-bottom:20px}
  .article{padding:14px}
  .side-area{margin-top:8px}
  .related-list{display:grid;grid-template-columns:1fr;gap:10px}
  .related-list > *{padding:12px}
  /* 确保在 320px 下没有横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中等宽度保护（768-1023）采用平衡排布 */
@media (min-width:768px) and (max-width:1023px){
  .page-container{min-width:720px;max-width:960px}
  .headline{grid-template-columns:1fr;gap:18px}
  .content-area{grid-template-columns:1fr;gap:18px}
  .related-list{grid-template-columns:1fr 1fr}
}

/* 无过度装饰，保持商务阅读感与秩序 */