/* 全局变量与重置 */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#C51F1F; /* 朱红强调 */
  --header-bg:#0f0f0f; /* 深色报头 */
  --line:#e6e6e6;
  --max-desktop-width:1280px; /* 在1120-1440区间，选择1280作为宽屏基准 */
  --min-desktop-width:1120px;
  --gutter:24px;
  --radius:0; /* 直角视觉签名 */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans SC',sans-serif;-webkit-font-smoothing:antialiased}

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

/* Header */
.site-header{background:var(--header-bg);color:#fff}
.header-inner{max-width:var(--max-desktop-width);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px}
.brand{font-weight:700;font-size:18px;color:#fff;border-left:3px solid var(--accent);padding-left:12px}
.mini-nav{margin-left:auto;font-size:13px}
.mini-nav .home-link{color:#fff;opacity:.9}

/* Headline 区 — split headline: 左大右窄 */
.headline{border-bottom:1px solid var(--line);background:var(--header-bg);color:#fff}
.headline-inner{max-width:var(--max-desktop-width);margin:0 auto;padding:28px 16px;display:grid;grid-template-columns:1fr;gap:20px}
.headline-left{display:flex;flex-direction:column;gap:12px}
.title{margin:0;color:#fff;font-family:Georgia,'Times New Roman',serif;line-height:1.05;font-weight:700;font-size:28px}
.meta-row{font-size:13px;color:#ddd}
.headline-right{align-self:start}
.summary-box{background:#fff;color:var(--text);padding:18px;border:1px solid var(--line);width:100%;box-sizing:border-box}
.summary-title{display:block;margin-bottom:6px;font-weight:700;color:var(--accent)}
.summary-text{margin:0 0 8px 0;color:var(--muted)}
.keywords{margin:0;font-size:13px;color:var(--muted)}

/* 主体布局 */
.container{max-width:var(--max-desktop-width);margin:0 auto;padding:20px 16px}
.content-grid{display:grid;grid-template-columns:1fr;gap:24px}
.article{background:transparent}
.content-body{background:var(--bg);color:var(--text);line-height:1.75;font-size:16px;padding:4px 0}
.content-body p{margin:1em 0}

.side{background:transparent}
.side-inner{display:flex;flex-direction:column;gap:18px}
.side-title{font-size:16px;margin:0 0 8px 0;color:var(--text)}

/* FAQ 表格样式 — 在桌面变为左右两列问题|答案 */
.faq-table{border:1px solid var(--line)}
.faq-table dt, .faq-table dd{padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.faq-table dt{background:#fff;font-weight:600;border-left:4px solid var(--accent)}
.faq-table dd{color:var(--muted)}

/* 相关阅读：编号列表样式 */
.related-list{margin:0;padding:0 0 0 18px}
.related-list li{margin:8px 0}

/* 广告容器 */
.ad-container{max-width:var(--max-desktop-width);margin:12px auto;padding:8px 16px;color:var(--muted);font-size:13px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);background:transparent}
.ad-container .ad{display:block}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:18px 16px;color:var(--muted)}
.footer-inner{max-width:var(--max-desktop-width);margin:0 auto}

/* VISUAL SIGNATURE：直角与细线已尽量应用，禁止大圆角与重阴影 */

/* ---- Desktop rules (>=1024px) ---- */
@media (min-width:1024px){
  .headline-inner{grid-template-columns:1fr 420px;align-items:start;padding:36px 20px;gap:28px}
  .title{font-size:40px;line-height:1.02;letter-spacing:-0.01em;max-height:calc(2 * 1.05em);/* 强制桌面不超过两行 */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .summary-box{width:100%;min-height:120px;box-shadow:none}

  /* 主体两栏 7/5 非对称网格 */
  .content-grid{grid-template-columns:7fr 5fr;align-items:start;gap:28px}
  .article{order:1}
  .side{order:2}

  /* FAQ 表格在桌面呈左问题右答案布局：利用定义的 HTML (假设 {{faq}} 以 dt/dd 形式插入) */
  .faq-table{display:grid;grid-template-columns:1fr 2fr}
  .faq-table dt{border-top:none;border-right:1px solid var(--line)}
  .faq-table dt:first-child, .faq-table dd:first-child{border-top:1px solid var(--line)}
  .faq-table dt, .faq-table dd{padding:14px}

  /* 相关阅读在侧栏显示为编号列表并保持较高密度 */
  .related-list{padding-left:18px}
  .related-list li{line-height:1.5}

  /* 保证容器宽度在 1120px—1440px 区间内 */
  .header-inner, .headline-inner, .container, .ad-container .ad, .footer-inner{max-width:var(--max-desktop-width);min-width:var(--min-desktop-width);margin-left:auto;margin-right:auto}
}

/* ---- Mobile rules (<=767px) ---- */
@media (max-width:767px){
  .header-inner{padding:10px}
  .brand{font-size:16px;padding-left:8px;border-left:3px solid var(--accent)}

  /* 标题与摘要上下排列 */
  .headline-inner{grid-template-columns:1fr;padding:18px 12px;gap:12px}
  .title{font-size:20px;color:var(--text);-webkit-line-clamp:unset;overflow:visible}
  .meta-row{color:var(--muted)}
  .headline-right{order:2}
  .headline-left{order:1}
  .summary-box{border:1px solid var(--line)}

  /* 主体变为单列：正文、FAQ、相关阅读依序显示（侧栏下移或折叠） */
  .content-grid{grid-template-columns:1fr;padding:12px}
  .side{order:2}
  .article{order:1}

  /* FAQ 在移动端按自然顺序堆叠：期望 {{faq}} 被渲染为适配的 dt/dd 或列表 */
  .faq-table{display:block}
  .faq-table dt{border-top:1px solid var(--line);padding:12px 10px;font-weight:700}
  .faq-table dd{padding:10px;border-bottom:1px solid var(--line);color:var(--muted)}

  .related-list{padding-left:18px}

  /* 广告样式在移动端保持非侵入 */
  .ad-container{padding:8px 12px}

  /* 防止横向滚动 */
  body, .headline-inner, .container{overflow-x:hidden}
}

/* Accessibility & print tweaks */
@media print{
  .site-header, .ad-container, .site-footer{display:none}
}