/* 主题变量，遵循: 深紫灰与象牙白 */
:root{
  --bg: #fbf8f4; /* 象牙白 */
  --ink: #22202a; /* 深色文字 */
  --muted: #6b6570; /* 深紫灰中性色 */
  --accent: #4a4052; /* 深紫灰 */
  --border: #e6e1dd; /* 轻边框 */
  --max-width: 1360px; /* 在 1120-1440 范围内 */
  --gutter: 24px;
  --meta-strip-width: 56px;
  --radius: 6px; /* 方角风格 */
  --shadow: none; /* 禁止重阴影 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

/* 全局布局 */
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);}
a{color:inherit;text-decoration:none}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);box-sizing:border-box}
.site-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);}
.site-title{font-weight:700;font-size:18px;color:var(--accent);text-align:center;display:inline-block}
.nav-left,.nav-right{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.nav-sep{color:var(--border)}

.page-container{max-width:var(--max-width);margin:20px auto;padding:0 var(--gutter);box-sizing:border-box}
.layout-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;position:relative}

/* 元信息纵向签名（视觉识别） */
.meta-vertical{display:none} /* 默认移动隐藏，桌面显示 */
.meta-vertical-inner{writing-mode:vertical-rl;text-orientation:mixed;color:var(--muted);font-size:13px;padding:8px 0}

/* 文章样式 */
.article{background:transparent;border:1px solid transparent;padding:0;margin:0}
.article-head{padding:6px 0 12px}
.eyebrow{font-size:13px;color:var(--accent);font-weight:600;letter-spacing:0.02em}
.article-title{font-size:28px;line-height:1.15;margin:6px 0 8px;font-weight:700}
.article-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.article-meta time{font-variant-numeric:tabular-nums}
.summary{background:transparent;border-left:3px solid var(--border);padding:10px 12px;margin:0 0 18px;color:var(--muted);border-radius:2px}
.article-body .content{font-size:16px;line-height:1.75;color:var(--ink)}

/* 侧边信息区 */
.side-info{display:block}
.side-block{background:rgba(255,255,255,0.6);border:1px solid var(--border);padding:14px;border-radius:4px;margin-bottom:18px}
.side-title{font-size:15px;margin:0 0 10px;color:var(--accent);font-weight:600}

/* FAQ 桌面样式：尝试兼容多种语义结构（dl dt/dd） */
.faq dl{margin:0}
.faq dt{float:left;width:40%;font-weight:700;color:var(--accent);}
.faq dd{margin-left:42%;margin-bottom:12px;color:var(--muted)}

/* 相关阅读侧边风格：两列摘要列表在桌面 */
.related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.related li{font-size:14px;color:var(--muted)}

/* 推荐底部区 */
.recommend{margin-top:18px}
.recommend-title{font-size:16px;color:var(--accent);margin:0 0 12px}
.recommend-list{display:grid;gap:12px}
.recommend-list > *{background:#fff;padding:10px;border:1px solid var(--border);border-radius:4px;font-size:14px;color:var(--muted)}

/* 广告插槽样式：独立容器，不悬浮，不覆盖正文 */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:10px var(--gutter);box-sizing:border-box;border-top:1px dashed var(--border);color:var(--muted);font-size:14px;text-align:center}
.ad-slot[aria-hidden="true"]{opacity:1}

.site-footer{border-top:1px solid var(--border);padding:18px 0;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box;color:var(--muted);font-size:13px}

/* 响应：桌面 >=1024px 与 手机 <=767px 的两套显著差异 */
@media (min-width:1024px){
  .layout-grid{grid-template-columns: var(--meta-strip-width) 1fr 420px; gap:28px; align-items:start}
  .meta-vertical{display:block;grid-column:1/2;}
  .article{grid-column:2/3}
  .side-info{grid-column:3/4}

  /* 文章在桌面保持较宽排版，正文等价于 8 列阅读域（采用流式列宽） */
  .article-title{font-size:34px}
  .article-body .content{column-width:360px;column-gap:36px;}

  /* 侧栏两个区块高度区分：通过 min-height 区分视觉重量 */
  .side-block--faq{min-height:220px}
  .side-block--related{min-height:120px}

  /* FAQ 左问右答（优先样式 dt/dd/dl） */
  .faq dt{width:36%;}
  .faq dd{margin-left:38%;}

  /* 读取区底部相关推荐 4 列 */
  .recommend-list{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:767px){
  /* 移动端独立重排：单列、信息区下移、推荐由四列变单列 */
  .layout-grid{grid-template-columns:1fr;gap:16px}
  .meta-vertical{display:none}
  .article-title{font-size:20px}
  .article-body .content{column-width:auto;column-gap:0;font-size:15px}

  /* 侧边栏折叠为正文后的两段列表（视觉转换） */
  .side-info{grid-column:1/2;order:2}
  .side-block{margin:12px 0}
  .related ul{grid-template-columns:1fr}

  /* 推荐单列 */
  .recommend-list{grid-template-columns:1fr}

  .ad-slot{margin:14px 0}
}

/* 中间宽度（768-1023）采用过渡式展现，保持可读性 */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{grid-template-columns:1fr;gap:20px}
  .meta-vertical{display:none}
  .article{grid-column:1/2}
  .side-info{grid-column:1/2}
  .recommend-list{grid-template-columns:repeat(2,1fr)}
}

/* 无需高开销视觉效果，禁止玻璃拟态、模糊背景与悬浮卡片 */
*{box-sizing:border-box}