/* 样式变量与基础重置 */
:root{
  --bg-ivory: #f7f4ef; /* 象牙白 */
  --ink-deep: #2b2230; /* 深紫灰（接近墨色的紫灰） */
  --muted: #6b5f6a;
  --accent: #4a3f57;
  --border: #e6e0db;
  --radius: 2px; /* 2px 小圆角 */
  --max-site-width: 1280px; /* 在 1120-1440 之间，常态使用 1280 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-ivory);
  color:var(--ink-deep);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.8; /* 宽松型行距，利于长文本阅读 */
  font-size:16px;
  padding:24px 16px;
}
/* header：栏目索引式导航，视觉签名为左对齐基线 */
.site-header{padding:10px 0 18px}
.header-inner{max-width:var(--max-site-width);margin:0 auto;display:flex;align-items:center;gap:18px}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem;letter-spacing:0.02em}
.mini-nav{margin-left:auto}
.mini-nav .home-link{color:var(--muted);text-decoration:none;font-size:0.95rem}

/* 广告容器：独立，不悬浮，不遮挡 */
.ad-slot{max-width:var(--max-site-width);margin:18px auto;padding:8px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--muted);font-size:0.95rem}

/* 整体容器：桌面为三轨阅读结构 */
.container{max-width:var(--max-site-width);margin:0 auto;display:grid;gap:28px;align-items:start}

/* 左侧、正文、右侧板块基础样式 */
.meta-left, .related-right{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:transparent}
.content{padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}

/* 标题构图：大标题配窄元信息列，正文标题基线与页头不同（正文居中对齐基线） */
.article-header h1{margin:0 0 10px;text-align:center;font-size:2rem;line-height:1.12;color:var(--ink-deep);font-weight:700}
.article-header .meta-row{display:flex;justify-content:center;gap:12px;color:var(--muted);font-size:0.95rem;margin-bottom:12px}
.summary{margin:0 0 18px;padding:10px 12px;border-radius:var(--radius);background:var(--bg-ivory);color:var(--muted);border:1px solid var(--border)}

.article-body{color:var(--ink-deep);font-size:1rem}
.article-body p{margin:0 0 1em}

/* FAQ 编号式问答样式 */
.faq-section{margin-top:22px}
.section-title{font-size:1.05rem;color:var(--accent);margin:0 0 10px}
.faq-list{padding-left:1.1rem;margin:0;color:var(--muted)}
.faq-list > li{margin:0 0 0.9rem}

/* 相关阅读网格（桌面四列紧凑） */
.related-grid{display:grid;gap:10px}
.related-grid a{color:var(--ink-deep);text-decoration:none}
.panel-title{font-size:0.95rem;margin:0 0 10px;color:var(--accent)}

/* 元信息列表样式 */
.meta-list{margin:0;padding:0;font-size:0.95rem;color:var(--muted)}
.meta-list dt{font-weight:600;margin-top:6px}
.meta-list dd{margin:2px 0 6px}

/* 页脚 */
.site-footer{max-width:var(--max-site-width);margin:28px auto 0;padding:10px 0;color:var(--muted);font-size:0.9rem}

/* 无阴影：严格禁止使用阴影以免违反 forbidden_pattern */

/* 响应式断点：桌面（min-width:1024px）与手机（max-width:767px）必须各有不同布局 */
@media (min-width:1024px){
  body{padding:36px}
  .container{grid-template-columns: minmax(160px,1fr) 780px minmax(220px,320px);gap:32px;align-items:start}
  /* 明确使正文居中宽度约 780px（desktop_contract） */
  .content{width:100%;max-width:780px;margin:0}
  /* 左侧与右侧为陪衬，信息密度较低 */
  .meta-left{position:relative}
  .related-right{position:relative}
  /* 相关阅读四列紧凑标题网格（related_pattern） */
  .related-grid{grid-template-columns:repeat(4,1fr)}
  .related-grid > *{padding:6px 8px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;font-size:0.95rem}
  /* 视觉签名：页头左基线，正文标题居中（已在样式中体现） */
}

@media (max-width:767px){
  body{padding:12px}
  /* 移动端：两侧信息全部移动到正文之后，正文宽度占满安全区域（mobile_contract） */
  .container{display:block}
  .meta-left,.related-right{margin-top:18px;padding:12px}
  .content{border-radius:var(--radius);padding:14px}
  .article-header h1{text-align:left;font-size:1.35rem}
  .article-header .meta-row{flex-direction:column;align-items:flex-start}
  .summary{font-size:0.95rem}
  /* 相关阅读在移动端呈现为紧凑横向或单列列表（恢复自然阅读顺序） */
  .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .related-grid > *{padding:8px;border-radius:var(--radius);border:1px solid var(--border);background:transparent}
  /* 防止横向滚动 */
  html,body{overflow-x:hidden}
}

/* 辅助：确保 320px 时无横向滚动、文字不被截断 */
@media (max-width:320px){
  body{font-size:15px}
  .article-body{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word}
  .summary{padding:8px}
}

/* 可访问性及互动样式（仅有限的视觉反馈，无动画） */
a:focus{outline:2px solid var(--accent);outline-offset:2px}
button, a{cursor:pointer}