:root{
  --bg-cream:#f7efe6; /* 奶油白 */
  --deep-brown:#3b2a22; /* 深棕 */
  --muted:#7a6a60;
  --accent:#523d33;
  --text:#222;
  --line:#e6ddd6;
  --max-width:1280px; /* 在 1120-1440 范围内 */
  --gap:20px;
  --radius:4px; /* 方形信息块，轻微圆角 */

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-serif: Georgia, "Times New Roman", Times, serif;
}

/* 基础重置，保持轻量 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-cream),var(--bg-cream));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* 视觉识别：深色报头与正文不同对齐基线（页头居中/水平基线与正文左对齐） */
.site-header{
  background:var(--deep-brown);
  color:var(--bg-cream);
  padding:14px 18px;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand .home-link{
  color:var(--bg-cream);
  text-decoration:none;
  font-weight:600;
  letter-spacing:0.02em;
}
.index-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
.index-nav a{color:var(--bg-cream);text-decoration:none;font-size:13px}
.index-nav span{color:rgba(255,255,255,0.9);font-size:13px}

/* 页面容器 */
.page-wrap{padding:28px 16px 60px}
.article-grid{max-width:var(--max-width);margin:0 auto;background:transparent}

/* 标题区：桌面按 7/5 分栏，移动端堆叠 */
.title-area{display:grid;gap:16px;align-items:start}
.title-left .eyebrow{font-size:13px;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:0.06em}
.title-left h1{font-family:var(--font-serif);font-weight:700;margin:0;color:var(--deep-brown);line-height:1.12;font-size:26px}
.meta-inline{margin-top:10px;color:var(--muted);font-size:13px}
.meta-inline .sep{padding:0 6px;color:var(--line)}
.title-side .info-block{background:#fff;border:1px solid var(--line);padding:12px;border-radius:var(--radius)}
.title-side .summary{margin:8px 0 0;color:var(--muted);font-size:14px}

.content-wrap{display:grid;grid-template-columns:1fr;gap:24px;margin-top:18px}
.content-main{background:#fff;padding:22px;border:1px solid var(--line)}
.content-body{color:var(--text);font-size:16px;line-height:1.7}

/* 侧边信息：方形信息块，紧凑密度 */
.content-side{display:flex;flex-direction:column;gap:12px}
.side-meta{display:flex;flex-direction:column;gap:10px}
.info-square{background:#fff;border:1px solid var(--line);padding:10px;border-radius:var(--radius);display:flex;flex-direction:column}
.info-square .k{font-size:12px;color:var(--muted)}
.info-square .v{font-size:14px;color:var(--deep-brown);margin-top:6px}

/* FAQ：采用无卡片 details 列表（HTML 插入 {{faq}} 应为 details 列表项） */
.faq-block{background:transparent}
.faq-block .faq-title{display:block;color:var(--deep-brown);font-weight:700;margin-bottom:8px}
.faq-list details{border-top:1px dashed var(--line);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--accent);outline:none}
.faq-list p{margin:8px 0 0;color:var(--muted)}

/* 相关阅读：四列在桌面，紧凑标题网格 */
.related{margin-top:18px}
.related-head{font-size:15px;color:var(--deep-brown);margin:0 0 10px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid a{display:block;padding:8px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--deep-brown);font-size:14px}

/* 广告槽样式（不得悬浮、覆盖正文） */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:10px;border:1px dashed var(--line);background:transparent;color:var(--muted);text-align:center}

/* 页脚 */
.site-footer{padding:18px 0;color:var(--muted);text-align:center}

/* 小屏（手机）规则：恢复自然文档顺序；不得横向滚动；侧栏下移 */
@media (max-width:767px){
  .header-inner{padding:0 6px}
  .title-area{grid-template-columns:1fr}
  .title-left h1{font-size:20px}
  .title-side .info-block{order:3}
  .content-wrap{grid-template-columns:1fr}
  .content-main{order:0}
  .content-side{order:1}
  /* 移动端 FAQ 必须出现在正文之后：确保侧栏在 DOM 中但视觉上移到正文后 */
  .content-side{margin-top:6px}
  .related-grid{grid-template-columns:repeat(1,1fr)}
  .related-grid a{font-size:15px}
  /* 保证在 320px 不出现横向滚动 */
  .page-wrap{padding-left:12px;padding-right:12px}
  .ad-slot{margin-left:0;margin-right:0}
}

/* 桌面（>=1024px）：非对称杂志网格；标题区 7/5 分栏；正文主列偏左，右侧元信息和 FAQ 错位排列 */
@media (min-width:1024px){
  .page-wrap{padding:36px 20px}
  .article-grid{display:block}

  /* 标题区 7/5 网格：左侧用于标题，右侧用于摘要/关键词等短信息 */
  .title-area{grid-template-columns:7fr 5fr;align-items:start}
  .title-left h1{font-size:34px}

  /* 主体网格：非对称 7/5 分栏（总宽度 1120-1440，使用变量 max-width） */
  .content-wrap{grid-template-columns:7fr 5fr;align-items:start;gap:28px}
  .content-main{order:0}
  .content-side{order:1}

  /* 右侧 FAQ 错位：向下偏移以制造杂志式断层 */
  .faq-block{margin-top:40px}

  /* 相关阅读：四列紧凑标题网格 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid a{font-size:13px;padding:8px}
}

/* 无发光按钮或蓝紫渐变等被禁止的样式，确保简洁 */
button, a.button{background:none;border:1px solid var(--accent);color:var(--accent);padding:6px 10px;border-radius:2px}