/* 通用变量与排版（系统字体、无远程资源） */
:root{
  --bg:#faf9f7; /* 暖灰基底 */
  --surface:#ffffff; /* 方角表面 */
  --muted:#7a7876; /* 次级文字 */
  --text:#171515; /* 炭黑文字 */
  --accent:#b85f3c; /* 克制强调色（标题首字/关键词） */
  --border:#e6e4e2; /* 细线边框 */
  --gap:20px;
  --max-desktop:1320px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, "Noto Sans CJK SC", "Liberation Sans", sans-serif;line-height:1.65}

a{color:var(--accent);text-decoration:none}

/* 顶部广告 */
.ad{padding:12px 16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:transparent;color:var(--muted);font-size:14px}
.ad-top{margin-bottom:12px}
.ad-middle{margin:24px 0}
.ad-bottom{margin-top:20px}

/* 编辑部报头：左右分置 */
.masthead{border-bottom:1px solid var(--border);background:var(--surface)}
.masthead-inner{max-width:var(--max-desktop);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.masthead-left .home-link{font-weight:700;color:var(--text);font-size:18px;letter-spacing:0.2px}
.masthead-right{display:flex;gap:16px;align-items:center}
.masthead-right .nav-item{color:var(--muted);font-size:14px}

/* 主容器：桌面容器宽度控制（遵循 1120px—1440px 范围合同；具体应用在 >=1120px） */
.container{margin:20px auto;padding:0 18px}
@media(min-width:1120px){
  .container{width:clamp(1120px,85vw,1440px)}
}

/* 标题区域：通栏；标题与摘要左右分置 */
.article-header{display:flex;flex-direction:column;gap:8px;padding:18px 0}
.title{margin:0;color:var(--text);font-size:26px;line-height:1.2;font-weight:700}
/* 视觉识别：标题首字强调色（visual_signature） */
.title::first-letter{color:var(--accent)}
.lead{margin:0;color:var(--muted);font-size:15px}

/* 元信息 */
.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;border-top:1px solid transparent;padding-bottom:6px}
.meta .published, .meta .now, .meta .meta-key{display:inline-block}

/* 主体布局：12 列网格，正文 8 栏，右侧为两个竖向信息区（高度差由内边距控制） */
.layout{display:grid;grid-template-columns:1fr;gap:24px;margin-top:18px}
.article{background:transparent}
.aside{background:transparent}

/* article 内容样式 */
.content{background:var(--surface);border:1px solid var(--border);padding:20px;border-radius:4px;color:var(--text);font-size:16px;line-height:1.8}
.content :where(h1,h2,h3,h4,h5){color:var(--text)}

/* 侧栏模块 */
.aside-top,.aside-bottom{background:var(--surface);border:1px solid var(--border);padding:14px;border-radius:4px}
.aside-top{min-height:220px}
.aside-bottom{min-height:120px;margin-top:16px}
.keywords{color:var(--accent);font-weight:600}
.quick-index{list-style:none;padding:0;margin:8px 0 0 0;color:var(--muted)}
.quick-index li{padding:6px 0}

/* FAQ：期望 CMS 输出 details 结构；样式为无卡片折叠（faq_pattern） */
.faq-section{margin-top:26px}
.faq-section .section-title{margin:0 0 12px 0;font-size:18px;color:var(--text)}
.faq-list details{border-top:1px solid var(--border);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--text)}
.faq-list p{margin:8px 0 0 0;color:var(--muted)}

/* 相关阅读区：桌面为 4 列（desktop_contract），但右侧信息区保留两列摘要风格的视觉（related_pattern 可由 CMS 控制） */
.related-section{margin-top:28px}
.related-section .section-title{font-size:18px;margin:0 0 12px 0}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-grid > *{background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:4px}

/* 页脚 */
.site-footer{margin-top:28px;padding:14px 20px;border-top:1px solid var(--border);background:transparent}
.site-footer .footer-inner{max-width:var(--max-desktop);margin:0 auto;color:var(--muted);font-size:13px}

/* 桌面专属规则（必须包含 @media (min-width: 1024px)）
   - 采用 12 栏网格，正文 8 栏，侧栏 4 栏
   - 侧栏包含两个不同高度信息区
   - 底部相关推荐显示为四列 */
@media (min-width:1024px){
  .article-header{flex-direction:row;align-items:flex-start;gap:24px}
  .title{font-size:32px}
  .lead{flex:0 0 38%;margin-left:auto}
  .layout{grid-template-columns:repeat(12,1fr);align-items:start}
  .article{grid-column:1 / span 8}
  .aside{grid-column:9 / span 4}
  /* aside 内部高低差体现：aside-top 比 aside-bottom 高 */
  .aside-top{min-height:300px}
  .aside-bottom{min-height:120px}
  /* 底部相关推荐四列 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:14px}
}

/* 手机端规则（必须包含 @media (max-width: 767px)）
   - 信息区下移：侧栏内容变为正文后的两段列表
   - 推荐从四列变为单列；无横向滚动、无文字截断 */
@media (max-width:767px){
  body{font-size:15px}
  .masthead-inner{padding:10px}
  .article-header{padding:12px 0}
  .title{font-size:20px}
  .lead{font-size:14px}
  .layout{display:block}
  .article{order:0}
  .aside{order:1;margin-top:16px}
  .aside-top{min-height:auto}
  .aside-bottom{min-height:auto}
  .related-grid{grid-template-columns:1fr}
  .content{padding:16px}
  .meta{font-size:13px}
  /* 确保在最窄的 320px 不横向滚动 */
  .container{padding:0 12px}
}

/* 无玻璃、无重阴影、方角、克制边框（遵守 forbidden_pattern 与 surface） */