:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#22222a; /* 石墨灰 */
  --accent:#cfae00; /* 芥末黄 */
  --muted:#6d6d72;
  --frame-border:rgba(34,34,42,0.08);
  --line:rgba(34,34,42,0.06);
  --max-width:1280px; /* 在 1120-1440 之间，取中值 */
  --gutter:24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);margin:0}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:28px var(--gutter)}
.page-frame{display:block}

/* Masthead: 报刊双层报头，第二层极窄 */
.masthead{background:linear-gradient(180deg,#2b2b30 0%, #232227 100%);color:#fff}
.masthead-row{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter)}
.masthead-main{font-weight:700;letter-spacing:0.02em}
.site-name{font-size:20px;color:var(--accent);font-weight:800}
.masthead-sub{font-size:12px;padding:6px var(--gutter);background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.03)}
.masthead-sub .sub-left,.masthead-sub .sub-right{opacity:0.9}

/* Frame: 框式专题页（桌面左右细边线） */
.page-frame{padding:20px 0}

/* 标题区：通栏，内部窄元信息列 */
.title-area{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:start;padding:20px var(--gutter);background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.title{margin:0;font-size:34px;line-height:1.05;font-weight:800;letter-spacing:-0.02em}
.title-meta{font-size:13px;color:var(--muted);border-left:2px solid var(--frame-border);padding-left:14px}
.title-meta .meta-row{margin-bottom:10px}
.title-meta .meta-value{margin-top:4px}

/* 摘要 */
.summary{padding:18px var(--gutter)}
.section-title{font-size:16px;color:var(--ink);margin:0 0 8px 0}
.summary-text{margin:0;color:var(--muted);line-height:1.6}

/* 主体网格：正文 8 列 + 侧栏 4 列（通过分栏比率实现） */
.body-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px;padding:18px var(--gutter)}
.content{background:var(--paper)}
.article-body{color:var(--ink);line-height:1.78;font-size:16px}
.article-body p{margin:0 0 16px 0}

.sidebar{background:var(--paper)}
.info-block{border:1px solid var(--line);padding:12px;margin-bottom:14px}
.block-title{font-size:13px;margin:0 0 10px 0}
.block-row{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid transparent}
.block-row strong{color:var(--muted);font-weight:600}
.block-body{color:var(--muted);font-size:14px}

/* 广告位样式（独立，不悬浮、不覆盖） */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:10px var(--gutter);color:var(--muted);font-size:14px;border:1px dashed var(--line);background:transparent}

/* FAQ 与相关阅读 */
.faq, .related{max-width:var(--max-width);margin:18px auto;padding:18px var(--gutter);background:var(--paper);border-top:1px solid var(--line)}
.faq-inner{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.related-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-inner > *{border-bottom:1px solid var(--line);padding:8px 0}

/* Footer 视觉签名：宽屏索引式排版 */
.site-footer{border-top:1px solid var(--line);padding:22px 0;background:transparent}
.footer-index{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 var(--gutter)}
.footer-grid{display:grid;grid-template-columns:repeat(4,auto);gap:20px;color:var(--muted)}

/* Accessibility helpers */
.sr-only{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Typography tweaks */
h1,h2,h3{color:var(--ink);margin:0}
h3{font-size:15px}

/* ------- Desktop rules (>=1024px) ------- */
@media (min-width: 1024px){
  body{background:#f6f6f7}
  .page-frame{border-left:1px solid var(--frame-border);border-right:1px solid var(--frame-border);}
  .container{padding:38px 36px}
  .title{font-size:44px}
  .body-grid{grid-template-columns:repeat(12,1fr);gap:28px}
  .content{grid-column:1 / span 8}
  .sidebar{grid-column:9 / span 4}
  /* 在桌面引入一个只对 >=1024 成立的结构差异：边注/跨栏标题（已通过 grid-column 实现） */
  .faq-inner{grid-template-columns:1fr 1fr}
  .related-inner{grid-template-columns:1fr 1fr}
  .title-area{grid-template-columns:1fr 320px}
  .ad-slot{border-style:solid}
  .footer-grid{gap:28px}
}

/* ------- Mobile rules (<=767px) ------- */
@media (max-width: 767px){
  :root{--gutter:16px}
  .masthead-row{padding:12px var(--gutter)}
  .masthead-sub{display:block;padding:8px var(--gutter);font-size:12px}
  /* 移除左右总框架边线 */
  .page-frame{border-left:0;border-right:0}
  .container{padding:16px var(--gutter)}
  .title-area{grid-template-columns:1fr;padding:14px var(--gutter)}
  .title-meta{order:2;border-left:0;padding-left:0;margin-top:10px}
  .title{font-size:20px}
  /* 主体改为单列，侧栏下移 */
  .body-grid{display:block;padding:12px var(--gutter)}
  .content{width:100%}
  .sidebar{width:100%;margin-top:14px}
  /* FAQ 单列 */
  .faq-inner{display:block}
  .related-inner{display:block}
  .related-inner > *{padding:10px 0}
  .footer-index{flex-direction:column;align-items:flex-start;padding:12px var(--gutter)}
  .footer-grid{display:grid;grid-template-columns:repeat(2,auto);gap:12px;margin-top:12px}
  .ad-slot{margin:12px 0}
}

/* Prevent horizontal overflow at small widths */
html,body{overflow-x:hidden}