/* 主题与变量 */
:root{
  --brick:#912c2f; /* 砖红 */
  --sand:#f7efe6; /* 砂岩白 */
  --accent:#b35447;
  --text:#222;
  --muted:#6d6d6d;
  --max-width:1280px; /* 在1120-1440之间选用 */
  --frame-gap:22px;
  --line:1px solid rgba(0,0,0,0.08);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'PingFang SC', 'Microsoft Yahei', sans-serif;
}

/* 全局重置与纸张表面 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--sand);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brick);text-decoration:none}
a:hover{text-decoration:underline}

.page-frame{
  margin:24px auto;
  background:transparent; /* 模拟轻纸张效果，模块以线条分隔 */
}

/* 顶部广告 */
.ad-block{margin:8px auto; padding:10px; color:var(--muted); font-size:13px; border-top:var(--line); border-bottom:var(--line); background:transparent}
.ad-top{max-width:var(--max-width);}

/* 头部：双层报头，第二层极窄 */
.site-header{max-width:var(--max-width); margin:0 auto 18px; padding:8px 0}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:var(--line);border-bottom:var(--line);background:transparent}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.home-link{font-weight:700;color:var(--brick)}
.header-meta{color:var(--muted);font-size:13px}

.header-index{height:36px;border-bottom:var(--line);display:flex;align-items:center}
.header-index ul{display:flex;gap:18px;list-style:none;margin:0;padding:0 4px;font-size:13px;color:var(--muted)}
.header-index li{display:inline-flex;align-items:center}
.header-index a{color:var(--brick)}

/* 网格与版心 */
.content-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:var(--max-width);margin:18px auto;padding:0 var(--frame-gap)}

article.article{background:transparent}
.side-column{background:transparent}

/* 标题区：桌面左右分置 */
.title-block{display:block;margin-bottom:12px;padding-top:8px}
.title-block h1{margin:0;color:var(--brick);font-family:var(--serif);font-size:28px;line-height:1.18}
.summary{margin-top:10px;color:var(--muted);font-size:15px}

.article-meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.article-meta .meta-sep{margin:0 8px}

.article-content{color:var(--text);line-height:1.75;font-size:16px}
.article-content p{margin:0 0 1em}

.section-title{font-size:16px;margin:18px 0 10px;color:var(--brick);font-family:var(--serif)}

/* FAQ 横线问答列表风格：外部模板可能提供结构，这里用选择器增强横线分隔 */
.faq-list > *{padding:12px 0;border-top:var(--line)}
.faq-list .question{font-weight:600}
.faq-list .answer{margin-top:6px;color:var(--muted)}

/* 相关阅读 编号列表样式 */
.related-list{counter-reset:relcounter;padding-left:18px;margin:0}
.related-list > *{display:list-item;list-style:none;counter-increment:relcounter;margin:8px 0;padding-left:6px}
.related-list > *::before{content:counter(relcounter)".";color:var(--brick);margin-right:8px}

/* 侧栏模块 */
.side-module{border-top:var(--line);padding-top:12px}
.side-module h3{margin:0 0 8px;font-size:15px;color:var(--brick);font-family:var(--serif)}
.side-module ul{margin:0;padding:0 0 0 18px;color:var(--muted)}
.side-module .keywords{color:var(--muted);font-size:14px}

/* 页脚：视觉签名，桌面为横向索引式 */
.site-footer{max-width:var(--max-width);margin:28px auto 40px;padding-top:18px;border-top:var(--line);color:var(--muted);font-size:14px}
.footer-index{display:flex;gap:28px;flex-wrap:wrap}
.footer-index .col{flex:1 1 160px}
.footer-index .brand-col{flex:2 1 260px;text-align:right}
.brand-line{font-weight:700;color:var(--brick);font-size:16px}
.small{font-size:13px}
.copyright{margin-top:14px;text-align:center;color:var(--muted);font-size:13px}

/* 桌面专属规则：外框式专题页、正文8列+侧栏4列、模块通过框线区分 */
@media (min-width:1024px){
  .page-frame{border:var(--line);padding:18px 0;background:var(--sand);max-width:calc(var(--max-width) + var(--frame-gap) * 2);}
  .content-grid{grid-template-columns:repeat(12,1fr);gap:28px;padding:12px var(--frame-gap)}

  /* 标题区左右分置：标题占8列，摘要占4列（视觉上左右并列） */
  .title-block{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;gap:18px}
  .title-block h1{grid-column:1 / span 8;font-size:34px}
  .title-block .summary{grid-column:9 / span 4;margin-top:0;font-size:15px}

  /* 主体与侧栏 */
  article.article{grid-column:1 / span 8}
  .side-column{grid-column:9 / span 4}

  /* 侧栏顶部线与模块区分 */
  .side-module{border-top:var(--line);padding-top:12px}

  /* 页脚横向索引式布局强调宽屏排布 */
  .footer-index{display:flex;align-items:flex-start}
}

/* 手机端独立重排：移除左右总框线，侧栏下移并由竖排模块呈现 */
@media (max-width:767px){
  body{font-size:15px}
  .page-frame{margin:0;padding:0}
  .site-header{padding:8px 12px}
  .header-index{height:30px}
  .content-grid{padding:0 12px;grid-template-columns:1fr}

  /* 标题与摘要堆叠 */
  .title-block{display:block}
  .title-block h1{font-size:20px}
  .title-block .summary{font-size:14px}

  /* 主体与侧栏垂直排列，侧栏下移 */
  article.article{order:0}
  .side-column{order:1}
  .side-column{border-top:var(--line);padding-top:12px;margin-top:8px}

  /* 页脚堆叠 */
  .footer-index{display:block}
  .footer-index .col{margin-bottom:12px}
  .footer-index .brand-col{text-align:left}

  /* 移除左右边框视觉（合同：移除总框架左右边线） */
  .page-frame{border:0}
}

/* 中等宽度处理，保证容器在1120-1440之间时表现稳健 */
@media (min-width:1120px) and (max-width:1440px){
  :root{--max-width:1200px}
}

/* 可访问性与小屏修正 */
h1,h2,h3,h4{line-height:1.2}