/* 主题变量：砖红与砂岩白 */
:root{
  --bg:#f7efe6; /* 砂岩白 */
  --surface:#fff; /* 面板背景，近白 */
  --accent:#b33a2e; /* 砖红 */
  --muted:#6b6b6b;
  --border:rgba(0,0,0,0.06);
  --max-width:1200px; /* 在 1120-1440 之间 */
  --line-height:1.75;
  --title-font-weight:700;
}

/* 基础版式 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#222;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--line-height);
  font-size:16px;
}
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:20px;
}

/* Header：左右分置的编辑部报头（站名与面包屑合并为工具栏） */
.site-header{background:transparent}
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-brand .home-link{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.02em;
}
.breadcrumb{color:var(--muted); font-size:0.95rem}
.divider{border:none;border-top:1px solid var(--border);margin:0}

/* 主体网格：非对称杂志网格 */
.main-grid{
  display:grid;
  grid-template-columns:1fr; /* 默认移动单列 */
  gap:28px;
  align-items:start;
  padding-bottom:32px;
}

/* Article */
.article{background:var(--surface);border:1px solid var(--border);padding:22px 24px}
.title-row{
  display:grid;
  grid-template-columns:7fr 5fr; /* 标题区 7/5 分栏（在宽屏下生效） */
  gap:18px;
  align-items:start;
}
.title{margin:0;font-size:1.6rem;line-height:1.08;letter-spacing:-0.01em;font-weight:var(--title-font-weight);color:#111}
/* 视觉识别：标题首字设为强调色（克制） */
.title::first-letter{color:var(--accent);font-weight:900}
.summary{color:var(--muted);font-size:0.98rem}

.meta-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:12px;font-size:0.92rem;color:var(--muted)}
.published{color:var(--muted)}
.current-time{margin-left:6px}
.kw{margin-left:auto;color:var(--muted)}

.content{margin-top:18px;color:#222;font-size:1rem;line-height:1.9}
.content p{margin:0 0 1em}

/* 相关阅读 */
.related-section{margin-top:24px}
.related-section .section-title{margin:0 0 12px 0;font-size:1rem;color:#222}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid > *{background:transparent;border-bottom:1px solid var(--border);padding:8px 4px;color:var(--muted);font-size:0.95rem}

/* 侧栏 */
.aside{display:block}
.aside-box{background:var(--surface);border:1px solid var(--border);padding:14px;margin-bottom:14px}
.aside-title{margin:0 0 8px 0;font-size:0.98rem;color:#111}
.meta-list .meta-item{font-size:0.95rem;color:var(--muted);padding:6px 0}
.small-note .note{font-size:0.9rem;color:var(--muted)}

/* FAQ 桌面表格样式：左题右答 */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-list .faq-item{display:flex;gap:12px;border-top:1px solid var(--border);padding-top:10px;padding-bottom:10px}
.faq-list .faq-item .q{flex:0 0 40%;color:#222;font-weight:600}
.faq-list .faq-item .a{flex:1;color:var(--muted)}

/* 广告槽 */
.ad-slot{width:100%;padding:12px;margin:18px 0;background:transparent;border:1px dashed var(--border);color:var(--muted);font-size:0.95rem}
.ad-top{margin:0 0 12px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:16px 0;background:transparent}
.footer-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:0.92rem}

/* ------------------ 桌面样式（强制） ------------------ */
@media (min-width:1024px){
  .container{padding:28px}
  .main-grid{
    grid-template-columns: 7fr 5fr; /* 非对称网格：正文偏左，侧栏偏右 */
    gap:32px;
  }

  /* Article 主列样式放大 */
  .article{padding:28px}
  .title{font-size:2.2rem}
  .summary{font-size:1.03rem}
  .meta-row{font-size:0.95rem}

  /* 相关阅读四列紧凑标题网格（related_pattern） */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid > *{padding:8px 6px;border-bottom:none;border-right:1px solid var(--border);background:transparent}
  .related-grid > *:nth-child(4n){border-right:none}

  /* 侧栏在视觉上与主列错位：使用顶部间距让侧栏段块与正文错位排列 */
  .aside{position:relative;top:10px}
  .aside-box{padding:16px}

  /* FAQ 在桌面采用表格式：若内容带有 .faq-item 则生效；如果外部提供不同标记，表格式尽量通过 CSS 兼容 */
  .faq-list{gap:6px}
}

/* ------------------ 手机样式（强制） ------------------ */
@media (max-width:767px){
  :root{--max-width:100%;}
  body{font-size:15px}
  .container{padding:14px}
  .main-grid{grid-template-columns:1fr;gap:18px}
  .title-row{grid-template-columns:1fr;gap:8px}
  .title{font-size:1.25rem}
  .summary{order:2;font-size:0.98rem}
  .meta-row{display:flex;flex-direction:column;gap:6px}
  .kw{margin-left:0}

  /* 内容区确保在 320px 不横向滚动 */
  .article, .aside{padding:12px}
  .related-grid{grid-template-columns:1fr;gap:8px}

  /* 侧栏下移（恢复自然文档顺序）：aside 在 DOM 中已在 article 后，因此仅需样式保证顺序 */
  .aside{order:2}

  /* FAQ 在移动端采用块式垂直列表，接近自然阅读顺序 */
  .faq-list{display:block}
  .faq-list .faq-item{display:block;padding:8px 0;border-top:1px solid var(--border)}
  .faq-list .faq-item .q{display:block;font-weight:700;margin-bottom:6px}
  .faq-list .faq-item .a{display:block;color:var(--muted)}

  /* 广告尺寸调整 */
  .ad-slot{padding:10px;font-size:0.95rem}

  /* 防止固定宽元素溢出 */
  img, iframe, embed, object{max-width:100%;height:auto}
}

/* 无圆角、细分隔线、无阴影，避免常见 AI 卡片风格 */
/* 禁止大量圆角和阴影 */
*{border-radius:0!important;box-shadow:none!important}