/* 基本变量与版式 */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#666666;
  --accent:#b71c1c; /* 朱红强调 */
  --header-bg:#111111; /* 深色报头 */
  --container-gap:28px;
  --max-desktop-width:1280px; /* 控制在1120-1440区间以clamp为准 */
  --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 全局重置与可读性 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--system-font);-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.container{width:clamp(1120px,75vw,1440px);margin:0 auto;padding:18px}

/* 顶部报头：左右分置编辑部报头 */
.site-header{background:var(--header-bg);color:#fff;padding:8px 0}
.site-header .masthead{display:flex;align-items:center;justify-content:space-between}
.site-name{color:#fff;text-decoration:none;font-weight:700;letter-spacing:0.02em;font-size:18px}
.edition{opacity:0.85;font-size:13px;color:#fff}

/* 广告容器：独立且不覆盖正文 */
.ad{padding:10px;margin:14px auto;border:1px solid #eee;background:#fafafa;color:var(--muted);font-size:13px}
.ad-top{max-width:clamp(760px,80%,1100px)}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:20px}

/* 主布局 - 非对称杂志网格 */
.layout-grid{display:grid;grid-template-columns:1fr;gap:24px}
.article{background:var(--bg);padding:0}
.side{background:transparent}

/* 标题区：超大但不超过两行并紧接正文 */
.title{font-size:36px;line-height:1.06;margin:6px 0 8px;font-weight:800;letter-spacing:-0.01em;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* 内联元信息（移动优先可见） */
.meta-inline{color:var(--muted);font-size:13px;margin-bottom:10px}
.meta-inline .sep{padding:0 6px;color:var(--muted)}

.summary{background:#fff;padding:12px;border-left:3px solid var(--accent);margin:8px 0 16px;color:var(--muted)}

.content{color:var(--ink);line-height:1.8;font-size:16px}
.content p{margin:0 0 14px}

.section-title{font-size:18px;border-top:1px solid #eee;padding-top:12px;margin-top:18px;color:var(--ink)}

/* 侧栏块：方形信息块与错位排列（桌面表现） */
.side-sticky{display:flex;flex-direction:column;gap:18px}
.meta-block{background:#fff;border:1px solid #eee;padding:12px}
.meta-block .meta-row{font-size:13px;color:var(--muted);margin-top:8px}
.keywords{font-size:13px;color:var(--ink);margin-top:6px}

.faq-block{background:#fff;border:1px solid #eee;padding:12px}
.faq-title{font-size:15px;margin:0 0 8px}
.faq-list, .faq-side{font-size:14px;color:var(--muted)}
.related-list{border-top:1px dashed #e6e6e6;margin-top:10px;padding-top:10px}
.related-list a{color:var(--ink);text-decoration:none}

/* 视觉签名：大面积留白与紧凑字阶 */
.article-head{padding-bottom:6px}

/* 页脚 */
.site-footer{padding:18px 0 34px;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* 媒体查询：桌面（>=1024px）与手机（<=767px）必须明确存在 */
@media (min-width:1024px){
  /* 非对称网格：标题区 7/5 分栏，正文主列偏左 */
  .layout-grid{grid-template-columns:7fr 5fr;align-items:start;gap:36px}

  .article{order:1}
  .side{order:2}

  /* 保持容器宽度在业务要求范围内 */
  .container{width:clamp(1120px,70vw,1440px)}

  /* 在桌面上，隐藏移动内联元信息，侧栏呈现详尽元信息并错位排列 */
  .meta-inline{display:none}

  /* 侧栏 FAQ 错位：通过内边距产生视觉错位而非绝对定位 */
  .side-sticky{padding-top:40px}
  .faq-block{margin-top:40px}

  /* 标题放大但不超过两行（仍受行高控制） */
  .title{font-size:44px}

  /* 提高正文可读宽度 */
  .content{font-size:17px;line-height:1.85}
}

@media (max-width:767px){
  /* 手机端自然重排：标题、元信息、摘要、正文、FAQ、推荐 */
  .layout-grid{grid-template-columns:1fr;gap:16px;padding:12px}
  .container{width:100%;padding:12px}

  /* 显示内联元信息，侧栏移动到主体下方并折叠为区块 */
  .meta-inline{display:block}
  .side{order:3}
  .side-sticky{padding:0}
  .meta-block{border-left:3px solid var(--accent);padding:10px}

  /* 简化表面样式，避免大块阴影与圆角 */
  .ad{margin:10px 0}

  /* 标题尺寸更紧凑，确保不截断主要信息且不引起横向滚动 */
  .title{font-size:24px}

  .content{font-size:16px}

  /* 侧栏中的重复FAQ在移动端放在正文后，视觉为连续区块 */
  .faq-side{display:none}
}

/* 其他细节：辅助可访问性与避免常见禁止元素 */
a{color:var(--accent)}
button{display:none}

/* 禁止浮动卡片、模糊与玻璃拟态（视觉约束） */
*{backdrop-filter:none}