:root{
  --bg:#f6f3f1; /* warm gray background */
  --surface:#ffffff; /* content surface */
  --muted:#8b8580; /* warm gray text */
  --ink:#22201d; /* charcoal */
  --accent:#3a3a3a; /* for subtle borders */
  --max-desktop-width:1320px; /* between 1120 and 1440 will be enforced in media */
  --gutter:24px;
  --baseline:24px; /* base for dual baseline grid */
}

/* 全局版式 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-size:16px;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, "Noto Sans", sans-serif;line-height:1.45}

a{color:inherit;text-decoration:none}

.page-shell{display:grid;grid-template-columns:1fr;align-items:start;gap:0}

/* 左侧纵向刊头（桌面）与顶部紧凑栏（移动） */
.site-nav{background:transparent;padding:16px 12px;border-right:1px solid rgba(58,58,58,0.06)}
.site-nav .brand{font-weight:700;color:var(--ink);font-family: Georgia, 'Times New Roman', serif}
.site-nav .brand-link{font-size:18px}
.site-nav .nav-list{margin-top:18px}
.site-nav .nav-list ul{list-style:none;padding:0;margin:0;color:var(--muted);font-size:14px}
.site-nav .nav-list li{padding:6px 0}

/* 编辑部主区 */
.editorial{padding:18px}
.editorial-grid{display:grid;grid-template-columns:1fr;gap:20px}

/* 标题区跨栏 */
.article-header{background:var(--surface);padding:22px;border:1px solid rgba(58,58,58,0.06);border-radius:2px}
.article-header .keyword{color:var(--muted);font-size:13px;margin-bottom:8px}
.article-header h1{font-family: Georgia, 'Times New Roman', serif;font-size:28px;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.article-header .meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.article-header .summary{margin:0;color:var(--muted);font-size:15px}

/* 主体和侧注 */
.main-col{display:block}
.article-content{background:var(--surface);padding:20px;border:1px solid rgba(58,58,58,0.06);border-radius:2px;color:var(--ink);font-size:16px;line-height:1.8;position:relative;overflow-wrap:break-word}

/* 视觉签名：正文区域双层基线网格感——细而浅的水平线条 */
.article-content{background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) calc(var(--baseline) - 1px), rgba(0,0,0,0.015) calc(var(--baseline) - 1px), rgba(0,0,0,0) var(--baseline));
  background-size:100% auto}
.article-content p{margin:0 0 1rem}

.ad-slot{padding:12px;margin:18px 0;background:transparent;border-radius:2px}
.ad-slot .adbox{display:block}

.faq-block{margin-top:18px}
.faq-block .section-title{font-size:16px;margin:0 0 12px;color:var(--ink);font-weight:600}
.faq-list{background:var(--surface);border:1px solid rgba(58,58,58,0.06);padding:12px}
/* 横线问答列表：期望 {{faq}} 输出若干条问答，这里保证样式 */
.faq-list > * + *{border-top:1px solid rgba(34,32,29,0.06);padding-top:12px;margin-top:12px}

.related-block{margin-top:18px}
.related-block .section-title{font-size:16px;margin:0 0 12px;color:var(--ink);font-weight:600}
.related-grid{display:grid;gap:12px}
.related-grid > *{background:var(--surface);border:1px solid rgba(58,58,58,0.06);padding:12px;border-radius:2px;font-size:14px;color:var(--muted)}

.side-col{margin-top:6px}
.side-surface{background:var(--surface);border:1px solid rgba(58,58,58,0.06);padding:14px}
.side-title{font-weight:600;margin-bottom:8px}
.side-surface dl{margin:0}
.side-surface dt{font-size:12px;color:var(--muted)}
.side-surface dd{margin:0 0 8px 0;font-size:14px}

.site-footer{padding:18px 16px;margin-top:20px;border-top:1px solid rgba(58,58,58,0.06);background:transparent}
.footer-inner{max-width:var(--max-desktop-width);margin:0 auto;color:var(--muted);font-size:14px}
.footer-inner .home-link{font-weight:600;color:var(--ink)}

/* --- 桌面规则：1024px 及以上 --- */
@media (min-width:1024px){
  body{font-size:17px}
  .page-shell{grid-template-columns:200px 1fr;min-width:1120px}
  .site-nav{padding:28px 18px;position:sticky;top:20px;height:calc(100vh - 40px);align-self:start}
  .editorial{padding:32px}
  .editorial-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:min-content;gap:20px;max-width:var(--max-desktop-width);margin:0 auto}

  /* 标题跨栏（跨所有列） */
  .article-header{grid-column:1 / -1}
  .article-header h1{font-size:36px}
  .article-header .summary{font-size:16px}

  /* 主体占 10 列，侧注占 2 列 */
  .main-col{grid-column:1 / span 10}
  .side-col{grid-column:11 / span 2}

  /* 相关阅读底部错位：RELATED 跨列不同宽度排列 */
  .related-block{grid-column:1 / -1;display:block}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .related-grid > *{min-height:64px}

  .footer-inner{padding-left:0}
}

/* --- 手机规则：最大宽度 767px --- */
@media (max-width:767px){
  :root{--gutter:14px}
  body{font-size:15px}
  .page-shell{grid-template-columns:1fr;padding:0}
  .site-nav{display:flex;align-items:center;justify-content:flex-start;padding:10px 12px;border-right:none;border-bottom:1px solid rgba(58,58,58,0.06)}
  .site-nav .nav-list{display:none}
  .site-nav .brand-link{font-size:18px}

  .editorial{padding:14px}
  .editorial-grid{grid-template-columns:1fr;gap:14px}
  .article-header{padding:16px}
  .article-header h1{font-size:20px}

  /* 取消桌面并列，侧注下移为单列 */
  .main-col{grid-column:auto}
  .side-col{grid-column:auto}
  .side-col .side-surface{margin-top:6px}

  .related-grid{grid-template-columns:1fr}

  /* 保证在 320px 时无横向滚动 */
  .editorial, .article-content, .article-header, .side-surface, .related-grid > *{width:100%;box-sizing:border-box}
}

/* 可访问性与小件修饰 */
.section-title{font-family: Georgia, 'Times New Roman', serif}
.article-header .keyword{letter-spacing:0.02em}
.meta-sep{padding:0 6px;color:var(--muted)}

/* 防止广告覆盖或悬浮 */
.ad-slot{clear:both}
.ad-slot *{max-width:100%}