/* 主题变量（深紫灰与象牙白） */
:root{
  --bg-ivory:#f8f6f2;
  --deep-purple-gray:#2b2130;
  --accent:#6b5671; /* 用作竖线与小标题 */
  --muted:#6e6b6b;
  --max-width:1200px; /* 在1120—1440之间选定 */
  --gutter:24px;
  --base-font: "Helvetica Neue", Arial, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --serif: Georgia, "Songti SC", serif;
  --density: 0.92; /* 紧凑 */
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--base-font);
  background:var(--bg-ivory);
  color:var(--deep-purple-gray);
  line-height:1.5;
  font-size:16px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* 报头（深色，横向文字刊头） */
.site-header{
  background:var(--deep-purple-gray);
  color:var(--bg-ivory);
  padding:12px calc(var(--gutter));
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand-link{color:var(--bg-ivory);font-weight:700}
.headline{font-size:14px;opacity:0.95}
.headline .seed{margin-left:12px;opacity:0.75}

/* 页面容器 */
.page-wrap{padding:20px calc(var(--gutter));}
.grid-root{
  max-width:var(--max-width);
  margin:0 auto;
  position:relative;
  display:grid;
  gap:20px;
}

/* 贯穿页面的1px主题竖线（视觉识别） */
.vline{
  position:absolute;
  left:calc((100% - var(--max-width))/2 + 88px); /* 靠近正文起始处，随容器居中 */
  top:0;
  bottom:0;
  width:1px;
  background:var(--accent);
  opacity:0.7;
  pointer-events:none;
}

/* 通用卡片风格：正文为纯白方形块 */
.article-top, .article-body, .side-rail{background: #ffffff; border:1px solid rgba(43,33,48,0.06); padding:18px; box-shadow:none}
.info-block{background:#ffffff; border:1px solid rgba(43,33,48,0.06); padding:12px; margin-bottom:12px}
.info-title{font-weight:700; color:var(--accent); font-size:13px; margin-bottom:8px}
.info-body{color:var(--muted); font-size:14px}

/* 标题与排版（标题衬线，正文无衬线） */
.title{
  font-family:var(--serif);
  font-size:clamp(26px, 4.4vw, 36px);
  line-height:1.05;
  margin:0 0 8px 0;
  color:var(--deep-purple-gray);
  word-break:break-word;
}
.meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.summary{font-size:15px;color:var(--muted);margin-bottom:14px}
.content{font-family:var(--base-font); color:var(--deep-purple-gray); font-size:16px; line-height:1.65}

/* 广告容器边界样式（不可悬浮、不可覆盖） */
.ad{background:transparent;padding:12px 0;}
.ad-top,.ad-middle,.ad-bottom{display:block}

/* FAQ 默认样式：如果 {{faq}} 提供 .faq-item/.q/.a 结构，桌面将呈现左右表格 */
.faq{margin-top:18px}
.faq .faq-item{margin-bottom:12px}
.faq .faq-item .q{font-weight:700;color:var(--deep-purple-gray);margin-right:12px}
.faq .faq-item .a{color:var(--muted)}

/* 相关阅读：编号式样（CSS counters）；移动端会横向布局 */
.related{margin-top:18px}
.related a{display:block;padding:8px 0;color:var(--deep-purple-gray)}
.related a::before{counter-increment:related-counter; content:counter(related-counter)"."; font-weight:700; margin-right:10px; color:var(--accent)}
.related{counter-reset:related-counter}

/* 页脚 */
.site-footer{padding:18px 0;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 12px}

/* 桌面规则（>=1024px）：12列网格，文章8列，侧栏4列；侧栏从摘要下方开始 */
@media (min-width:1024px){
  .grid-root{display:grid; grid-template-columns: repeat(12, 1fr); grid-template-rows:auto 1fr; gap:24px; align-items:start}

  .article-top{grid-column:1 / span 8; grid-row:1}
  .article-body{grid-column:1 / span 8; grid-row:2}
  .side-rail{grid-column:9 / span 4; grid-row:2}

  /* FAQ 表格式：每项左右分栏 */
  .faq .faq-item{display:flex;gap:18px;border-top:1px dashed rgba(43,33,48,0.04);padding-top:12px;padding-bottom:12px}
  .faq .faq-item .q{width:32%;min-width:160px}
  .faq .faq-item .a{flex:1}

  /* 相关阅读以编号左侧为主的紧密列表 */
  .related{margin-top:18px}
}

/* 手机规则（<=767px）：单列，侧栏移到正文、FAQ之后；相关推荐改为横向分隔列表 */
@media (max-width:767px){
  .page-wrap{padding:12px}
  .grid-root{display:flex;flex-direction:column;gap:12px}

  .vline{display:none}

  .article-top,.article-body,.side-rail{padding:14px}

  /* 将侧栏顺序下移：DOM 已放在最后一列，但在移动设备我们需要它在正文与FAQ之后，DOM 当前即满足这一点（side-rail 在 DOM 中位于 grid-root 下方）；若仍需调整，可使用 order*/
  .side-rail{order:4}
  .article-body{order:2}
  .article-top{order:1}

  /* FAQ 垂直堆叠 */
  .faq .faq-item{display:block;padding:10px 0;border-bottom:1px solid rgba(43,33,48,0.04)}
  .faq .faq-item .q{display:block;margin-bottom:6px}

  /* 相关阅读：横向分隔列表 */
  .related{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
  .related a{white-space:nowrap;padding:8px 12px;background:#fff;border:1px solid rgba(43,33,48,0.06);border-radius:2px;flex:0 0 auto}
  .related a::before{display:none}

  /* 控制密度与可读性 */
  .title{font-size:clamp(20px, 7vw, 28px)}
  .content{font-size:15px}
}

/* 中等屏（768px—1023px）作出平滑过渡 */
@media (min-width:768px) and (max-width:1023px){
  .grid-root{max-width:960px}
  .vline{display:none}
}

/* 无巨型圆角、无强烈阴影，保持方形信息块 */
.info-block, .article-top, .article-body, .side-rail{border-radius:4px}

/* 可访问性小优化 */
.title, .meta, .summary{word-wrap:break-word}