/* 全局变量与重置 */
:root{
  --brown:#3b2f2b; /* 深棕 */
  --cream:#fbf6ec; /* 奶油白 */
  --muted:#7a6b64;
  --line:rgba(59,47,43,0.12);
  --max-width:1320px; /* 在 1120-1440 之间选择中点 */
  --content-gutter:24px;
  --font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --base-line:1.5rem; /* 双层基线基数 */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--cream);color:var(--brown);font-family:var(--font-stack);font-size:16px;line-height:1.5}
a{color:var(--brown);text-decoration:none}
.frame{
  display:flex;align-items:flex-start;gap:24px;
  padding:20px;min-height:100vh;
  /* 外框式专题页：细边框总框架 */
  border-left:2px solid var(--line);
  border-right:2px solid var(--line);
  background:transparent;
}
/* 左侧纵向刊头 */
.left-nav{
  width:180px;flex:0 0 180px;padding:12px 8px 12px 12px;position:sticky;top:18px;height:calc(100vh - 36px);
  display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--line);
}
.left-nav .brand a{font-weight:700;color:var(--brown);display:block}
.left-nav .nav-list{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.left-nav .nav-item{padding:6px 8px;border-radius:2px}

/* 页面根容器，控制最大宽度 */
.page-root{max-width:var(--max-width);margin:0 auto;flex:1}
.page-header{padding:6px 0 12px}
.title-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.post-title{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:0.01em}
.title-rule{display:flex;align-items:center;gap:6px}
.title-rule .thick{display:block;height:6px;width:84px;background:linear-gradient(90deg,var(--brown),var(--brown));}
.title-rule .thin{display:block;height:2px;width:160px;background:linear-gradient(90deg,rgba(59,47,43,0.65),rgba(59,47,43,0.25));opacity:0.6}

/* 网格：正文8列 + 侧栏4列（12列系统）*/
.page-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.content{background:transparent;border-top:1px solid var(--line);padding-top:18px}
.content .meta{display:flex;flex-wrap:wrap;gap:12px;font-size:0.95rem;color:var(--muted);margin-bottom:10px}
.content .meta time{color:var(--muted)}
.summary{background:rgba(59,47,43,0.03);padding:10px;border:1px solid var(--line);margin-bottom:14px}

/* 正文区：双层基线网格感（次要线 + 主要线） */
.article-body{
  font-size:1rem;line-height:1.5rem;padding:6px 2px 30px;
  /* 双层基线：细微条纹和较稀主线 */
  background-image:
    repeating-linear-gradient(to bottom, rgba(59,47,43,0.03) 0px, rgba(59,47,43,0.03) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(to bottom, rgba(59,47,43,0.05) 0px, rgba(59,47,43,0.05) 1px, transparent 1px, transparent 36px);
  background-size:100% 18px,100% 36px;
  background-position: left top, left top;
}
.article-body *{max-width:100%}

/* 侧栏用方角框线、局部底色区块 */
.side{padding:12px;border-top:1px solid var(--line)}
.side-module{padding:10px;border:1px solid var(--line);background:rgba(59,47,43,0.02);margin-bottom:12px}
.side-title{font-size:0.95rem;margin:0 0 8px 0;color:var(--brown)}
.index-list{margin:0;padding:0 0 0 18px;color:var(--muted)}
.index-list li{margin:6px 0}

/* 广告位容器，独立且不可覆盖正文 */
.ad-slot{padding:12px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:0.95rem}
.ad-top{margin:8px 0}
.ad-middle{margin:20px 0}
.ad-bottom{margin:18px 0}

/* FAQ 与相关阅读风格：faq 顶部边线为主题色（design_profile 指定） */
.faq{border-top:4px solid var(--brown);padding-top:12px;margin-top:18px}
.faq-title{margin:0 0 10px 0;font-size:1rem}
.faq-body{color:var(--muted)}
.related{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.related-title{margin:0 0 8px 0}
.related-list{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
/* 相关阅读按关键词索引式列表：保留密集信息排列 */
.related-list > *{font-size:0.95rem}

.site-footer{padding:18px 0;color:var(--muted);font-size:0.9rem}

/* 密集阅读：紧凑排版 */
.post-title,.side-title,.related-title{line-height:1.2}

/* 桌面端专属规则（>=1024px）- 强制生效的桌面结构差异 */
@media (min-width:1024px){
  body{font-size:16px}
  .frame{padding:28px}
  .page-root{max-width:var(--max-width)}
  .page-grid{grid-template-columns:calc((var(--max-width) - 340px - 28px)/1fr * 1fr) 340px; /* 保持 8:4 视觉比例 */
    display:grid;grid-template-columns:1fr 340px;gap:32px}
  .left-nav{position:sticky;top:28px}
  /* 桌面侧重骨架：标题通栏，正文8列、侧栏4列 */
  .post-title{font-size:2rem}
  .title-rule .thick{width:120px;height:8px}
  .title-rule .thin{width:220px}
  .article-body{padding-left:6px;padding-right:6px}
}

/* 手机端规则（<=767px）- 移除总框架左右边线，侧栏下移 */
@media (max-width:767px){
  .frame{flex-direction:column;border-left:none;border-right:none;padding:12px}
  .left-nav{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--line);padding:8px 6px;gap:12px}
  .left-nav .nav-list{flex-direction:row;gap:12px;font-size:13px}
  .page-root{width:100%}
  .page-grid{display:block}
  .content{padding-top:12px}
  .side{order:3;padding-top:12px;border-top:1px solid var(--line)}
  .side-module{margin:0 0 12px 0}
  .post-title{font-size:1.25rem}
  .title-rule .thick{width:64px;height:6px}
  .title-rule .thin{width:120px}
  /* 保留模块顶部线样式（mobile_contract） */
  .content,.side{border-top:1px solid var(--line)}
  /* 确保 320px 宽时没有横向滚动 */
  html,body{overflow-x:hidden}
  .article-body{font-size:0.97rem;background-size:100% 18px,100% 36px}
}

/* 可访问性微调 */
.post-title{word-break:break-word}
.article-body p, .article-body ul, .article-body ol{margin:0 0 12px 0}