/* 全局变量与排版基准 */
:root{
  --paper:#F7F3EA; /* 纸白 */
  --navy:#112D4E;  /* 藏蓝 */
  --accent:#7A2B2B; /* 克制强调色（标题首字/关键词使用） */
  --muted:#6B6B6B;
  --text:#222222;
  --max-width:1240px; /* 桌面容器宽度限制（处于1120-1440范围内） */
  --gutter:28px;
  --break-desktop:1024px;
  --break-mobile:767px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 页面基色与基础布局 */
html,body{height:100%;margin:0;background-color:var(--paper);color:var(--text);}
.page-root{display:flex;flex-direction:column;min-height:100vh}

/* 广告占位（不悬浮、不遮盖） */
.ad{width:100%;box-sizing:border-box;padding:10px 0;text-align:center;font-size:0.95rem;color:var(--muted)}
.ad-top,.ad-bottom{background:transparent}
.ad-middle{margin:28px 0}

/* 站点页眉：左对齐紧凑品牌栏 */
.site-header{padding:12px var(--gutter);border-bottom:1px solid rgba(17,45,78,0.06);background:transparent}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;gap:18px}
.brand-link{font-weight:700;color:var(--navy);text-decoration:none;font-size:1rem}
.col-index{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:0.9rem}
.col-item{opacity:0.95}
.col-sep{color:rgba(17,45,78,0.12)}

/* 主体容器 */
.site-main{flex:1;padding:20px 12px}
.layout-wrap{max-width:var(--max-width);margin:0 auto}

/* 内容栅格：桌面为双栏偏移纸张式，手机为单列 */
.content-grid{display:block}

/* 文章样式 */
.article{color:var(--text);line-height:1.75}
.title-row{display:block;margin-bottom:8px}
.article-title{margin:0;font-size:2.05rem;line-height:1.05;font-weight:800;letter-spacing:-0.02em;color:var(--navy);}
/* 标题首字视觉签名：使用 ::first-letter 实现克制强调色 */
.article-title::first-letter{color:var(--accent);font-size:1.18em;font-weight:900;letter-spacing:0}
.article-summary{margin-top:8px;color:var(--muted);font-size:0.98rem}

.meta{display:flex;justify-content:flex-start;gap:16px;font-size:0.92rem;color:var(--muted);margin:12px 0}
.meta time{color:inherit}

.article-body{font-size:1rem;color:var(--text);margin-top:6px}
.article-body p{margin:0 0 1em}

.faq-section{margin-top:26px}
.faq-grid{display:block;color:var(--text)}

/* 侧栏（相关阅读） */
.sidebar{margin-top:18px}
.related-title{margin:0 0 8px 0;font-size:0.95rem;color:var(--navy)}
.related-list{display:flex;flex-direction:column;gap:8px;font-size:0.95rem;color:var(--muted)}
.related-list a{color:var(--navy);text-decoration:none}

/* 无框模块, 使用细微边线和空白作为节奏而非卡片 */

/* 辅助：无障碍隐藏标题 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Footer */
.site-footer{padding:18px 12px;margin-top:28px;color:var(--muted);font-size:0.9rem}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.site-footer a{color:var(--navy);text-decoration:none}

/* 桌面专用规则：1024px 及以上 */
@media (min-width: 1024px){
  .layout-wrap{padding:24px}
  .content-grid{display:grid;grid-template-columns:1fr 320px;grid-column-gap:36px;align-items:start}

  /* 标题与摘要左右分置 */
  .title-row{display:grid;grid-template-columns:1fr 320px;align-items:start;gap:18px}
  .article-summary{margin-top:6px}

  /* 标题向左越出正文基线（偏移纸张效果），但不使用阴影或大圆角 */
  .article{position:relative}
  .article-title{display:block;padding-left:44px;transform:translateX(-44px);}

  /* 侧栏为窄边注（保留视觉节奏，但非固定） */
  .sidebar{margin-top:0}

  /* FAQ 两列 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

  /* 更紧凑的标题样式（报刊式紧凑标题） */
  .article-title{font-size:2.3rem}
}

/* 手机规则：最大宽度 767px；取消偏移和越界，重排为单列安全边距 */
@media (max-width: 767px){
  :root{--gutter:16px}
  .header-inner{padding:0 6px}
  .layout-wrap{padding:8px}
  .site-main{padding:8px 6px}
  .content-grid{display:block}

  /* 标题与摘要恢复堆叠，去掉越界 */
  .title-row{display:block}
  .article-title{transform:none;padding-left:0;font-size:1.5rem}
  .article-summary{margin-top:8px}

  /* 侧栏下移为文章后续区域（DOM 已在文章后面） */
  .sidebar{margin-top:18px}

  /* FAQ 单列 */
  .faq-grid{display:block}

  /* 防止横向滚动：所有宽度采用盒模型与内边距 */
  .article,.article-body,.related-list{word-wrap:break-word}
}

/* 禁止常见被禁止样式（提示性注释，非执行代码）：
   - 未使用渐变和发光按钮
   - 未使用外部字体或远程资源
*/