:root{
  --bg:#fff9f2; /* 奶油白 */
  --accent:#3a2a22; /* 深棕 */
  --muted:#6b5a52;
  --line:#e6dfd9;
  --max-width:1300px;
  --container-min:1120px;
  --gap:24px;
  --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

/* 基础重置与版心 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--accent);font-family:var(--font-stack);-webkit-font-smoothing:antialiased;}
.container{margin:0 auto;padding:16px;}
.page-frame{border:1px solid var(--line);max-width:100%;background:transparent}

/* header: 左右分置的编辑部报头 + 左侧纵向刊头视觉 */
.site-header{border-bottom:1px solid var(--line);background:transparent}
.header-inner{display:flex;align-items:flex-start;gap:16px;padding:12px 16px}
.masthead-left{flex:0 0 180px}
.vertical-masthead{display:flex;flex-direction:column;gap:8px;font-weight:600;color:var(--accent)}
.vertical-masthead .home-link{color:var(--accent);text-decoration:none;font-size:1.05rem}
.vertical-masthead .masthead-item{font-size:0.9rem;color:var(--muted)}
.masthead-right{flex:1;text-align:right}
.site-brand{font-size:1.15rem;font-weight:700;color:var(--accent)}
.site-sub{font-size:0.85rem;color:var(--muted)}

/* main grid: desktop 12-column -> 主栏8 / 侧栏4 */
.main-grid{display:grid;grid-template-columns:1fr;gap:24px;padding:22px 16px}
.article{order:1}
.sidebar{order:2}

.article-header{border-top:0;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
.title{margin:0;font-size:1.9rem;text-align:center;line-height:1.15;color:var(--accent)}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:0.9rem;margin-top:8px}
.meta-row .keywords{margin-left:12px}
.summary{margin-top:12px;border-top:0;padding-top:8px;max-width:820px;margin-left:0}
.summary p{margin:8px 0 0 0;color:var(--muted)}

.article-body .content{line-height:1.8;color:var(--accent)}
.article-body .content p{margin:0 0 1em 0}

.section-title{font-size:1.05rem;margin:0 0 8px 0;color:var(--accent)}
.faq{border-top:1px solid var(--line);padding-top:12px}
.faq-list{display:block}
.faq-list > *{border-top:1px solid var(--line);padding:12px 0}

.side-module{border-top:1px solid var(--line);padding:12px 0}
.side-module dl{margin:0;font-size:0.95rem;color:var(--muted)}
.side-module dl dt{font-weight:600;color:var(--accent)}
.side-module dl dd{margin:0 0 8px 0}

.ad-slot{padding:12px;background:transparent;color:var(--muted);font-size:0.95rem}
.ad-slot > *{display:block}

/* 底部相关阅读三列短卡 */
.related-section{border-top:1px solid var(--line);padding:18px 16px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.related-grid > *{padding:10px 8px;border-top:1px solid var(--line);background:transparent}

.site-footer{border-top:1px solid var(--line);padding:14px 16px;color:var(--muted);font-size:0.9rem}

/* 分隔线样式 */
.divider{height:1px;background:var(--line);margin:18px 0}

/* 视觉节奏与签名：页头与正文采用不同对齐基线 */
.site-header .vertical-masthead{align-items:flex-start}
.title{transform:none}

/* ====== 桌面规则（必须包含 min-width:1024px） ====== */
@media (min-width:1024px){
  .container{padding:20px}
  .main-grid{grid-template-columns:repeat(12,1fr);gap:28px;padding:32px;align-items:start}
  .article{grid-column: span 8}
  .sidebar{grid-column: span 4}
  .page-frame{margin:20px auto;max-width:var(--max-width)}

  /* 将容器在宽屏下限制在 1120px—1440px 之间（条件控制） */
  @media (min-width:1120px){
    .page-frame{max-width:1300px}
  }
  @media (min-width:1300px){
    .page-frame{max-width:1300px}
  }
  @media (min-width:1440px){
    .page-frame{max-width:1440px}
  }

  .header-inner{padding:18px 28px}
  .masthead-left{flex:0 0 200px}
  .site-brand{font-size:1.2rem}
  .title{font-size:2.2rem}
  .summary{max-width:900px}

  /* 侧栏在桌面保持固定在右侧，广告顶部放在侧栏顶端 */
  .sidebar{position:relative}
  .ad-top{border-top:0}
  .ad-bottom-side{margin-top:16px}

  /* 底部相关阅读三列 */
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* ====== 手机规则（必须包含 max-width:767px） ====== */
@media (max-width:767px){
  body{font-size:15px}
  .page-frame{border-left:0;border-right:0}
  .header-inner{padding:12px}
  .masthead-left{flex:0 0 auto}
  .vertical-masthead{flex-direction:row;gap:12px;align-items:center}
  .masthead-left .masthead-item{display:none}
  .masthead-right{text-align:left}

  .main-grid{grid-template-columns:1fr;padding:12px 12px;gap:12px}
  .article{order:1}
  .sidebar{order:3}

  .title{text-align:center;font-size:1.5rem}
  .meta-row{justify-content:flex-start}
  .summary{margin-left:0}

  /* 侧栏下移为页面自然区块 */
  .sidebar{border-top:1px solid var(--line);padding-top:12px}

  /* 中部广告在正文下方显示 */
  .middle-ad{padding:8px 12px}

  .related-grid{grid-template-columns:1fr;gap:10px}

  /* 模块仅保留顶部线以区分 */
  .side-module{border-top:1px solid var(--line)}
  .site-footer{padding:12px}
}

/* 可访问性与小屏容错：确保 320px 不出现横向滚动 */
@media (max-width:320px){
  .container{padding:10px}
  .title{font-size:1.35rem}
  .summary p{font-size:0.95rem}
}