/* 基础变量与版面语义 - 单一强调色：深紫灰 (palette) 与象牙白背景 */
:root{
  --bg: #f8f3ec; /* 象牙白 */
  --ink: #222226; /* 深色文字 */
  --muted: #6e6a70; /* 次要文字 */
  --accent: #3b3650; /* 深紫灰 单一强调色 */
  --line: rgba(34,34,38,0.06);
  --baseline-1: rgba(34,34,38,0.04);
  --baseline-2: rgba(34,34,38,0.02);
  --max-width-clamp: clamp(1120px, 82vw, 1440px);
  --sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 全局重置与轻纸张底色 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sys-font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* 头部：极简细导航 */
.site-header{border-bottom:1px solid var(--line);background:transparent}
.header-inner{max-width:var(--max-width-clamp);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.brand-link{font-weight:700;color:var(--ink);letter-spacing:0.01em}
.index-bar ul{display:flex;gap:14px;align-items:center;margin:0;padding:0;list-style:none}
.index-bar li{font-size:14px;color:var(--muted)}
.index-bar a{color:var(--accent);font-weight:600}

/* 顶部广告 */
.ad-slot{max-width:var(--max-width-clamp);margin:12px auto;padding:8px 12px;color:var(--muted);font-size:13px;border:1px dashed var(--line);background:transparent}

/* 页面容器与桌面轨道 */
.page-container{display:flex;justify-content:center}
.left-track{display:none}

.main-grid{width:100%;max-width:var(--max-width-clamp);padding:20px 18px}

/* 文章局部结构 - 标题构图：标题居中，摘要左对齐 */
.article-header{margin-bottom:18px}
.article-title{font-size:40px;margin:8px 0 12px;text-align:center;color:var(--ink);line-height:1.05;font-weight:700}
.meta-row{display:flex;gap:18px;justify-content:center;color:var(--muted);font-size:13px;margin-bottom:10px}
.summary{max-width:900px;margin:0 auto 18px;text-align:left;color:var(--muted);font-size:15px}

/* 内容区域：桌面采用 8/4 分栏；mobile 单列 */
.content-area{display:grid;grid-template-columns:1fr;gap:28px}
.article-body{order:1}
.article-aside{order:2}

/* 视觉签名：正文区双层基线网格感 */
.baseline-wrap{
  padding:6px 4px 28px 4px;
  background-image:
    repeating-linear-gradient(180deg, transparent 0, transparent 22px, var(--baseline-1) 22px, var(--baseline-1) 22.6px),
    repeating-linear-gradient(180deg, transparent 0, transparent 11px, var(--baseline-2) 11px, var(--baseline-2) 11.3px);
  background-repeat:repeat;
  background-size:100% 44px,100% 22px;
}

.article-body p, .article-body h2, .article-body h3, .article-body ul, .article-body ol{color:var(--ink);margin:0 0 12px}
.article-body p{font-size:16px;line-height:1.65}
.article-body h2{font-size:18px;margin:18px 0 10px}

/* 侧栏风格（无容器卡片） */
.article-aside .section-heading{font-size:14px;margin:6px 0 8px;color:var(--accent);font-weight:600}
.article-aside .faq-list > *{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.article-aside .related-list{padding-left:18px;margin:8px 0 0;color:var(--muted)}
.article-aside .related-list li{margin:8px 0}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);margin-top:28px}
.footer-inner{max-width:var(--max-width-clamp);margin:12px auto;padding:10px 18px;color:var(--muted);font-size:13px}

/* 桌面规则 - 必须包含 @media (min-width: 1024px) */
@media (min-width:1024px){
  .left-track{display:block;width:84px;flex:0 0 84px}
  .left-track .track-inner{writing-mode:vertical-rl;text-orientation:upright;font-size:12px;color:var(--muted);padding:8px 0}

  .main-grid{display:block}
  .content-area{grid-template-columns:2fr 1fr;align-items:start;gap:36px}
  .article-body{order:1;padding-right:12px}
  .article-aside{order:2;padding-left:6px}

  /* 正文宽度与版面控制：容器在 1120px—1440px 间自适应 */
  .main-grid{max-width:var(--max-width-clamp)}

  /* 标题放大但不遮挡首屏（不使用占满首屏的 Hero） */
  .article-title{font-size:56px}

  /* 编辑部式细线网格：在大屏显示更多的竖向细线（装饰但轻量） */
  .page-container{background-image:linear-gradient(to right, transparent 0, transparent calc(50% - 600px), rgba(0,0,0,0.02) calc(50% - 599px), rgba(0,0,0,0.02) calc(50% + 599px), transparent calc(50% + 600px));background-repeat:no-repeat}
}

/* 手机端规则 - 必须包含 @media (max-width: 767px) */
@media (max-width:767px){
  body{font-size:15px}
  .header-inner{padding:10px 12px}
  .index-bar ul{gap:10px}
  .left-track{display:none}
  .main-grid{padding:12px}
  .article-title{font-size:22px;text-align:center;margin:6px 0}
  .meta-row{justify-content:flex-start;gap:10px;font-size:12px}
  .summary{text-align:left;font-size:14px;padding-right:6px}
  .content-area{grid-template-columns:1fr}
  .article-body{order:1}
  .article-aside{order:2}

  /* 侧栏下移并以紧凑区块呈现（自然重排） */
  .article-aside .section-heading{font-size:13px}
  .ad-slot{margin:10px 0;padding:8px}

  /* 确保 320px 不横向滚动 */
  .page-container, .main-grid{padding-left:12px;padding-right:12px}
  .baseline-wrap{padding-right:2px;padding-left:2px}
}

/* 可访问性与小屏优化 */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}