/* 设计变量与重置 */
:root{
  --bg: #F8F6F0; /* 纸白 */
  --ink: #0b2340; /* 藏蓝主色 */
  --muted: #6b7280;
  --accent: #234061; /* 正文首字轻量强调色 */
  --border: #d8d5cc;
  --max-width: 1280px; /* 在 1120-1440 之间，居中容器 */
  --gap: 18px;
  --density-gap: 12px; /* 紧凑密度 */
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);}
img,svg,figure{max-width:100%;height:auto}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* 报头：左右分置，站名居中 */
.site-header{border-bottom:1px solid var(--border);background:transparent}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:8px}
.header-left,.header-right{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.header-center{font-weight:700;color:var(--ink);font-size:18px;text-align:center;flex:0 0 auto}
.header-left a{color:var(--ink);text-decoration:none}
.sep{color:var(--border)}

/* Page container */
.page-container{max-width:var(--max-width);margin:20px auto;padding:0 16px}
.article{background:transparent;border:1px solid transparent}

/* 标题与摘要带：跨栏显示 */
.title{font-size:36px;line-height:1.08;margin:6px 0 8px 0;color:var(--ink);font-weight:700;letter-spacing:-0.02em;display:block;max-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.summary{background:#fff;border:1px solid var(--border);padding:12px 14px;margin-bottom:14px;color:var(--muted);font-size:15px}

/* 主体布局 - 默认移动优先，桌面用 media query 改为 10/2 */
.layout-grid{display:block}
.col-main{width:100%}
.col-side{width:100%;margin-top:12px}

.content{background:white;border:1px solid var(--border);padding:18px;font-size:15.5px;line-height:1.7;color:var(--ink)}
.content p{margin:0 0 12px 0}

/* 视觉签名：正文首段首字轻量强调（不改写内容） */
.content p:first-of-type::first-letter{color:var(--accent);font-weight:600;font-size:1.4em;float:left;line-height:1;margin-right:6px}

/* 广告容器样式（独立容器，不悬浮） */
.ad{background:transparent;border:1px dashed var(--border);padding:10px;margin:14px 0;color:var(--muted);font-size:13px}
.ad-top{max-width:var(--max-width);margin:10px auto}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:22px}

/* 侧栏面板 */
.col-side .side-panel{background:#fff;border:1px solid var(--border);padding:12px;font-size:14px}
.side-title{font-weight:700;margin:0 0 8px 0;color:var(--ink);font-size:14px}
.keywords{color:var(--muted);word-break:break-word}
.side-sep{border:none;border-top:1px solid var(--border);margin:10px 0}
.side-note{font-size:13px;color:var(--muted)}

/* FAQ: 两列桌面、单列手机 */
.faq{margin-top:18px}
.faq-grid{display:block;gap:12px}
.faq-grid > *{background:#fff;border:1px solid var(--border);padding:12px;margin-bottom:12px}

/* 推荐阅读：带日期的分隔线列表 */
.related{margin-top:18px}
.related-title{font-size:16px;margin-bottom:8px}
.related-list{background:#fff;border-top:1px solid var(--border)}
.related-list a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}
.related-list a time{color:var(--muted);font-size:13px}

/* Footer */
.site-footer{margin-top:30px;padding:18px 0;border-top:1px solid var(--border);background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 16px;color:var(--muted);font-size:13px}

/* 桌面特定布局：1120-1440 范围内使用编辑部堆叠结构，正文 10 / 2 边注 */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .header-inner{padding:14px 20px}
  .page-container{padding:0 20px}

  /* 使用 grid 创建 10/2 栅格 */
  .layout-grid{display:grid;grid-template-columns:1fr 260px;grid-column-gap:22px;align-items:start}
  .col-main{grid-column:1/2}
  .col-side{grid-column:2/3}

  /* 标题跨栏且比例更大（跨栏标题） */
  .title{font-size:44px;max-height:3.2em}
  .summary{margin-bottom:18px}

  /* FAQ 与推荐形成不同宽度错位排列（编辑部式组合） */
  .faq{grid-column:1/2}
  .related{display:block;margin-top:20px}
  .related-list{margin-left:80px;border-left:4px solid var(--border)}

  /* FAQ 两栏 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:12px}
  .faq-grid > *{margin:0}

  /* 稠密风格调小间距 */
  .content{padding:20px}
}

/* 手机端规则，单列重排，取消错位和跨栏 */
@media (max-width:767px){
  :root{--max-width:720px}
  .header-inner{padding:10px 12px}
  .title{font-size:22px;line-height:1.12;max-height:none;-webkit-line-clamp:none}
  .summary{font-size:14px;padding:10px}
  .layout-grid{display:block}
  .col-side{order:3;margin-top:10px}
  .col-main{order:1}
  .ad-top{margin:8px 12px}
  .content{font-size:16px;padding:14px}
  .faq-grid{display:block}
  .related-list a{padding:12px}
  /* 防止横向滚动：所有块适配容器 */
  .page-container,.header-inner,.footer-inner{padding-left:12px;padding-right:12px}
}

/* 避免大型圆角与玻璃风格，确保方角框线 */
*{border-radius:2px}

/* 链接样式，避免占位死链 */
a{color:var(--ink)}