:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#b30000; /* 朱红强调 */
  --rule:#e6e6e6;
  --max-desktop:1280px; /* 容器宽度将在桌面规则中被 clamp 为 1120-1440 */
  --rh:24px; /* 基线节奏 */
  --line-height:1.6;
  --fs-base:16px;
  --gap:18px;
  --dense-gap:12px;
}

/* 全局重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size:var(--fs-base);
  line-height:var(--line-height);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none}
a:focus{outline:1px dashed var(--accent);outline-offset:2px}

/* 边框、分隔线风格 */
.masthead, .site-footer, .bottom-assembly, .content-grid{border-top:1px solid var(--rule)}

.ad-wrap{padding:8px 16px;color:var(--muted);font-size:13px}
.ad-wrap .ad-slot{display:block}

/* 报头：双层但第二层极窄 */
.masthead{padding:12px 16px 8px;display:block}
.masthead-row{display:flex;align-items:center;justify-content:space-between}
.masthead-main{padding-bottom:6px}
.masthead-sub{font-size:13px;color:var(--muted);padding:4px 0;border-top:1px solid transparent}
.site-title{font-weight:700;color:var(--text);letter-spacing:0.2px}
.masthead-meta{font-size:13px;color:var(--muted)}
.keywords{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 标题与摘要左右分置（桌面）/单列（移动） */
.title-band{display:flex;align-items:flex-start;gap:20px;padding:18px 16px 10px}
.title-band h1{flex:1 1 auto;margin:0;font-size:28px;line-height:1.05;color:var(--text);font-weight:700}
.title-band .summary{flex:0 0 340px;margin:0;color:var(--muted);font-size:15px}

.meta-row{display:flex;gap:12px;padding:0 16px 12px;color:var(--muted);font-size:13px}
.meta-row time{white-space:nowrap}

/* 主体网格：编辑部堆叠结构，正文10/2边注 */
.content-grid{display:grid;grid-template-columns:1fr;gap:18px;padding:0 16px 24px}
.col-main{min-width:0}
.col-side{min-width:0}

/* 正文区域视觉签名：双层基线网格感 */
.content{
  color:var(--text);
  font-size:15px;
  line-height:var(--line-height);
  word-wrap:break-word;
  hyphens:auto;
  padding-right:6px;
  /* 细线基线背景：清淡、双层感 */
  background-image:repeating-linear-gradient(to bottom, rgba(179,0,0,0.02) 0px, rgba(179,0,0,0.02) 1px, transparent 1px, transparent calc(var(--rh)) );
  background-size:100% var(--rh);
}
.content p{margin:0 0 12px}
.content h2, .content h3{margin:18px 0 8px}

.side-box{border-left:1px solid var(--rule);padding-left:14px;color:var(--muted);font-size:14px}
.side-box h3{margin:0 0 8px;color:var(--text);font-size:15px}
.side-box h4{margin:12px 0 6px;font-size:13px;color:var(--muted)}

.ad-middle{margin-top:18px}

/* 底部错位排列：FAQ 与 相关阅读不同宽度错位 */
.bottom-assembly{display:flex;flex-direction:column;gap:14px;padding:18px 16px 40px}
.faq{order:1}
.related{order:2}
.faq h2, .related h2{margin:0 0 10px;font-size:16px}
.faq-list{color:var(--text)}
.related-list{display:block}
.related-list > *{display:block}

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

/* FAQ 编号式样 */
.faq-list ol{margin:0;padding-left:20px;color:var(--muted)}
.faq-list li{margin:8px 0}

/* 相关阅读紧凑四列网格（桌面成立） */
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-list a{display:block;color:var(--text);font-size:14px}

/* 无圆角、细分隔线、无阴影：遵守 surface */

/* ===== 桌面规则（>=1024px）必须明确存在 ===== */
@media (min-width:1024px){
  /* 内容容器约束到 1120-1440 范围，居中 */
  .page{max-width:clamp(1120px,88vw,1440px);margin:0 auto}

  /* 标题跨栏（跨越编辑网格） */
  .title-band{padding:24px 0 12px;align-items:flex-end}
  .title-band h1{font-size:36px}
  .title-band .summary{flex:0 0 420px;font-size:15px}

  /* 主体采用 10/2 边注布局 */
  .content-grid{grid-template-columns:10fr 2fr;align-items:start;gap:28px;padding:0}

  /* 侧栏视觉不做热门文章常见布局，作为边注存在（窄、淡） */
  .col-side{padding-top:6px}

  /* 底部错位排列：FAQ 更宽，相关阅读窄并右移（视觉错位） */
  .bottom-assembly{display:grid;grid-template-columns:3fr 1fr;grid-template-areas:"faq related";gap:28px;padding:24px 0 48px}
  .faq{grid-area:faq}
  .related{grid-area:related}
  .related{align-self:start}

  /* 相关阅读改为四列紧凑标题网格 */
  .related-list{grid-template-columns:repeat(2,1fr);gap:12px}
  .related-list a{font-size:13px;color:var(--muted)}

  /* 调整副标题行 */
  .meta-row{padding:0 0 16px 0}
}

/* ===== 手机规则（<=767px）必须明确存在 ===== */
@media (max-width:767px){
  body{font-size:15px}
  .masthead{padding:10px}
  .masthead-sub{display:block}

  /* 单列自然重排，取消错位与跨栏 */
  .title-band{flex-direction:column;gap:8px;padding:12px 12px}
  .title-band h1{font-size:20px}
  .title-band .summary{flex:auto;font-size:14px;color:var(--muted)}

  .content-grid{grid-template-columns:1fr;padding:8px 12px 18px;gap:12px}
  .col-side{order:2;border-left:none;padding-left:0}
  .side-box{padding:10px 0 0;border-top:1px solid var(--rule)}

  .bottom-assembly{display:block;padding:12px}
  .faq{margin-bottom:12px}

  /* 相关阅读在手机上单列列表，避免四列网格 */
  .related-list{display:block}
  .related-list a{padding:8px 0;border-top:1px solid var(--rule);display:block;color:var(--muted)}

  /* 广告容器调整为不遮挡内容、宽度自适应 */
  .ad-wrap{padding:10px 12px}
}

/* 可访问性小调整 */
h1,h2,h3,h4{color:var(--text);margin:0}

/* 限制图片与媒体在正文内不超出 */
.content img, .content video{max-width:100%;height:auto}