/* 风格变量与重置 */
:root{
  --bg:#fffaf0; /* 象牙白调 */
  --ink:#2b2430; /* 深紫灰 */
  --muted:#6f6471;
  --accent:#3b2f44; /* 深色调用于强调 */
  --separator:rgba(43,36,48,0.08);
  --max-width:1280px; /* 在1120-1440之间 */
  --content-gap:24px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--accent);text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* 顶部广告 */
.ad-slot{border-top:1px solid var(--separator);border-bottom:1px solid var(--separator);padding:10px 16px;background:transparent;font-size:13px;color:var(--muted)}

/* 站点页眉：左对齐紧凑品牌栏，双层报头第二层极窄 */
.site-header{border-bottom:1px solid var(--separator);background:transparent}
.brand-row{max-width:var(--max-width);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px}
.brand{font-weight:700;font-size:18px;color:var(--ink)}
.header-tools{font-size:13px;color:var(--muted)}
.tiny-strip{height:6px;background:transparent;border-top:1px solid var(--separator)}

/* 页面容器 */
.page-shell{max-width:var(--max-width);margin:20px auto;padding:0 16px}

/* 标题与摘要的组合：左右分置（桌面），移动端上下 */
.headline{margin-bottom:18px}
.headline-grid{display:grid;gap:20px}
.headline-left .title{margin:0;font-size:26px;line-height:1.12;font-weight:700;letter-spacing:-0.02em}
.meta{margin-top:10px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px}
.headline-right .summary{font-size:15px;color:var(--ink);line-height:1.6;border-left:0;padding-left:0}

/* 主体内容：桌面 7/5 两栏网格 */
.content-area{display:block}
.article{margin-bottom:20px}
.article-body{font-size:16px;line-height:1.8;color:var(--ink);word-wrap:break-word}

.side-info{margin-top:20px}
.faq h3,.related h3{margin:0 0 10px 0;font-size:15px;color:var(--accent)}
.faq-grid{display:block}
.related-list{margin:0;padding-left:20px;color:var(--muted)}
.related-list li{margin:6px 0}

/* 页脚索引式排版（视觉识别） */
.site-footer{border-top:1px solid var(--separator);margin-top:36px;background:transparent}
.footer-index{max-width:var(--max-width);margin:0 auto;padding:18px 16px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.footer-brand{font-weight:600}
.footer-meta{color:var(--muted);font-size:13px}
.footer-nav .footer-note{font-size:13px;color:var(--muted)}

/* 桌面规则（>=1024px）：实现严格的两段差异布局 */
@media (min-width:1024px){
  .headline-grid{grid-template-columns:1fr 1fr;align-items:start}
  .headline-left{padding-right:20px;border-right:1px solid var(--separator)}
  .headline-right{padding-left:20px}

  .content-area{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start}
  .article{min-width:0}
  .side-info{border-left:1px solid var(--separator);padding-left:20px}

  /* FAQ：两列布局 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* 页脚更具索引感，横向排列更多空白 */
  .footer-index{padding:22px 24px}
}

/* 手机规则（<=767px）：标题与摘要上下排列，侧栏下移，FAQ 单列 */
@media (max-width:767px){
  body{font-size:15px}
  .brand-row{padding:10px 12px}
  .page-shell{margin:12px auto;padding:0 12px}
  .headline-grid{display:block}
  .headline-left .title{font-size:20px}
  .headline-right{margin-top:10px}
  .headline-left{border-right:none;padding-right:0}
  .headline-right .summary{padding-left:0;border-left:none}

  .content-area{display:block}
  .side-info{margin-top:18px;padding-left:0;border-left:none}
  .faq-grid{display:block}
  .related-list{padding-left:18px}

  .footer-index{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px}
}

/* 中等宽度（768-1023）维持较高可读性但采用单栏阅读 */
@media (min-width:768px) and (max-width:1023px){
  .headline-grid{display:block}
  .content-area{display:block}
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

/* 细节：避免圆角与阴影 */
*{border-radius:0}
button, .button{background:none;border:1px solid var(--separator);padding:6px 10px;color:var(--accent)}

/* 可访问性小调整 */
h1,h2,h3{color:var(--ink);margin:0}