/* 全局变量与基础重置 */
:root{
  --bg: #fbf6ee; /* 奶油白 */
  --accent: #3b2418; /* 深棕主色，尽量稳重 */
  --muted: #7a6b60;
  --line: #e6dfd7;
  --max-width: 1200px; /* 在 1120-1440 之间 */
  --gutter: 28px;
  --dense: 8px; /* 紧凑间距基准 */
  --signature-offset: 48px; /* 正文对齐基线，区别于页头 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  color:var(--accent);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

a{color:inherit;text-decoration:none}

/* 工具栏（页头）——左对齐紧凑品牌栏，视觉基线与正文不同 */
.toolbar{border-bottom:1px solid var(--line);background:transparent}
.toolbar-inner{max-width:var(--max-width);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.toolbar .home{font-weight:700;color:var(--accent);font-size:15px}
.toolbar .breadcrumb{color:var(--muted);font-size:13px;margin-left:8px}

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

/* 左右两栏网格在桌面生效（reverse-rail：正文在右侧占 8 列，左侧为 4 列） */
@media (min-width:1024px){
  .container{display:grid;grid-template-columns:33.3333% 66.6667%;gap:var(--gutter);align-items:start}
  .left-rail{order:1}
  .content-rail{order:2}
}

/* 左侧栏样式 */
.left-rail{padding:12px 0}
.rail-brand{padding:8px 12px;border-top:2px solid var(--line);margin-bottom:10px}
.rail-brand-name{font-weight:700;color:var(--accent);font-size:16px}
.rail-breadcrumb{font-size:13px;color:var(--muted);margin-top:6px}

.rail-meta{margin:12px 0;padding:8px 12px}
.meta-row{font-size:13px;color:var(--muted);padding:4px 0}
.meta-label{color:var(--muted);margin-right:6px}

.related{margin-top:14px;padding:10px 0}
.related-title{font-size:14px;color:var(--accent);margin:0 12px 8px}
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;padding:0 12px}
.related-list a{display:block;font-size:13px;color:var(--accent);padding:6px 0;border-bottom:1px dashed var(--line)}

/* 广告容器，独立且不悬浮 */
.ad-slot{border:1px dashed var(--line);padding:10px;margin:12px 0;background:transparent;color:var(--muted);font-size:13px}

/* 正文区域 */
.content-rail{background:transparent;padding:0 12px}
.article-head{padding-top:6px;padding-bottom:6px}

/* 标题构图：压左并用粗细横线构图（上粗下细） */
.title{font-size:28px;line-height:1.18;margin:0 0 8px 0;padding-top:12px;padding-left:var(--signature-offset);position:relative;font-weight:800;color:var(--accent)}
.title::before{content:'';display:block;height:6px;background:var(--accent);width:48px;position:absolute;left:0;top:12px}
.title::after{content:'';display:block;height:2px;background:var(--line);width:100%;position:absolute;left:var(--signature-offset);bottom:-8px}

.summary{max-width:72ch;color:var(--muted);margin:40px 0 12px 0;padding-left:var(--signature-offset);font-size:15px}

/* 正文主体，保证直接可见 */
.article-body{padding-left:var(--signature-offset);padding-right:8px;color:var(--accent);font-size:16px}
.article-body p{margin:0 0 12px}
.article-body h2{border-top:1px solid var(--line);padding-top:12px;margin-top:18px}

/* FAQ 横线问答列表 */
.faq-section{padding-left:var(--signature-offset);margin-top:18px}
.faq-section .section-title{font-size:16px;margin:0 0 8px;color:var(--accent)}
.faq-list > * + *{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.faq-list h3{font-size:14px;margin:0 0 6px;color:var(--accent)}
.faq-list p{margin:0;color:var(--muted);font-size:14px}

.article-footer{padding-left:var(--signature-offset);margin-top:18px;font-size:13px;color:var(--muted)}

.site-footer{border-top:1px solid var(--line);margin-top:30px;padding:12px 0;background:transparent}
.site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;padding:6px 16px;display:flex;justify-content:space-between;align-items:center}

/* 手机端（<=767px）专属重排：左侧信息拆分为标题前后紧凑区块，正文保持第一阅读主体 */
@media (max-width:767px){
  .container{display:block;padding:0 10px}
  .left-rail{display:block}
  .desktop-only{display:none}
  .mobile-only{display:block}

  /* 在 mobile，将部分左栏信息放在标题上方或下方： .meta-before（上） .meta-after（下） */
  .meta-mobile{background:transparent;padding:6px 0;color:var(--muted)}
  .meta-before{margin-bottom:6px}
  .meta-after{margin-top:10px}

  /* 标题更适配窄屏，保留横线构图但缩短偏移 */
  :root{--signature-offset:16px}
  .title{font-size:20px;padding-left:var(--signature-offset)}
  .title::before{left:0;top:10px;width:36px;height:4px}
  .title::after{left:var(--signature-offset)}
  .summary{margin:10px 0;padding-left:var(--signature-offset)}
  .article-body{padding-left:var(--signature-offset);padding-right:0}

  /* 相关阅读在移动端保持两列摘要列表（若宽度不足会自适应换行） */
  .related-list{grid-template-columns:repeat(2,1fr);gap:6px}
  .related-list a{font-size:13px}

  /* 左侧 rail 在 mobile 不再作为侧栏，位置顺序自然堆叠：保留顶部品牌小条 */
  .rail-brand{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
}

/* 中等屏避免横向滚动 */
@media (min-width:768px) and (max-width:1023px){
  .container{padding:0 18px}
}

/* 可访问性与细节 */
h1,h2,h3{color:var(--accent)}
button, a{outline-color:var(--accent)}

/* 禁止阴影以遵守 forbidden_pattern */
*{box-shadow:none}