/* 全局变量与基础重置 */
:root{
  --bg:#f6f4f1; /* 轻纸张底色，暖灰 */
  --text:#222222; /* 炭黑 */
  --muted:#6b6661; /* 暖灰文案 */
  --accent:#3a3a3a;
  --max-width:1280px; /* 在 1120-1440 之间选取 */
  --gutter:28px;
  --left-fr:1; /* 对应 4 列 */
  --right-fr:2; /* 对应 8 列 */
  --header-baseline:8px; /* 视觉识别基线差异 */
  --article-baseline:20px;
  --radius:6px;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans CJK SC",sans-serif;line-height:1.6;margin:0}
a{color:inherit;text-decoration:none}
.page-wrap{padding:18px}
.site-header{padding:16px var(--gutter) 8px;border-bottom:1px solid rgba(0,0,0,0.06);background:transparent}
.header-row{display:flex;align-items:center;gap:12px}
.header-row.main-row{justify-content:space-between}
.site-brand{font-weight:700;letter-spacing:0.2px;color:var(--accent);font-size:1.125rem}
.header-nav{display:flex;gap:14px;color:var(--muted);font-size:0.92rem}
.header-nav .nav-item{padding:6px 8px}
.narrow-row{height:28px;margin-top:6px;color:var(--muted);font-size:0.82rem}
.index-strip{opacity:0.95}
.ad{max-width:var(--max-width);margin:14px auto;padding:6px 8px;color:var(--muted);text-align:center;border:1px dashed rgba(0,0,0,0.05);background:transparent}
.container{max-width:var(--max-width);margin:0 auto;display:grid;gap:20px;padding:18px}

/* 关键布局：桌面为两栏反向轨道（右侧为正文 8 列，左侧为信息 4 列）
   DOM 顺序已考虑移动端重排：left-top, article-header, left-bottom, article-body
*/
.left-top,.left-bottom,.article-header,.article-body{padding:4px 8px}
.aside-title{font-size:0.98rem;color:var(--accent);margin:0 0 8px}
.breadcrumb{font-size:0.88rem;color:var(--muted);margin-bottom:8px}
.site-id{font-size:0.86rem;color:var(--muted)}

/* 标题构成：紧凑的关键词眉题 + 紧凑标题 */
.eyebrow{font-size:0.85rem;color:var(--muted);margin:0 0 6px;text-transform:none}
h1{font-size:1.6rem;line-height:1.18;margin:0 0 8px;color:var(--text);font-weight:700}
.meta{font-size:0.86rem;color:var(--muted);display:flex;gap:12px;align-items:center;margin-bottom:10px}
.summary{margin:0 0 14px;color:var(--muted);font-size:1rem}

/* 正文样式（技术资讯紧凑型，舒展密度） */
.article-body .content{font-size:1rem;color:var(--text);word-wrap:break-word}
.article-body .content p{margin:0 0 14px}
.article-body .content pre, .article-body .content code{font-family:monospace,ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono";background:transparent;padding:0.2em 0.35em;border-radius:3px}

/* FAQ 使用无卡片的 details 折叠列表，样式简洁 */
.faq .section-title{font-size:1.05rem;color:var(--accent);margin:14px 0}
.faq-list details{padding:8px 0;border-top:1px solid rgba(0,0,0,0.04)}
.faq-list details summary{cursor:pointer;font-weight:600;color:var(--text);outline:none}
.faq-list details p{margin:8px 0 0;color:var(--muted)}

/* 相关阅读：支持两列摘要列表（related_pattern） */
.related-grid{display:grid;gap:10px;grid-auto-rows:minmax(40px,auto)}
.related-grid > *{font-size:0.95rem;color:var(--muted)}

/* 页脚 */
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:12px 18px;margin-top:18px;color:var(--muted);font-size:0.9rem}

/* 桌面端布局（必须存在 @media (min-width:1024px)）
   - 容器宽度在 1120-1440 之间由 --max-width 控制
   - 使用非对称网格：左侧 4/12，右侧 8/12（视觉重心与常规右栏相反）
   - 页头与正文采用不同对齐基线（visual_signature）
*/
@media (min-width:1024px){
  .container{grid-template-columns:var(--left-fr) var(--right-fr);align-items:start;gap:28px;padding:28px}
  .left-top{grid-column:1/2}
  .left-bottom{grid-column:1/2}
  .article-header{grid-column:2/3;padding-left:12px}
  .article-body{grid-column:2/3;padding-left:12px}

  /* left column 视觉基线更靠左，header 使用不同基线 */
  .site-header{padding-left:calc(var(--header-baseline));}
  .article-header{padding-left:calc(var(--article-baseline));}

  /* 相关阅读呈两列摘要列表 */
  .related-grid{grid-template-columns:repeat(2,1fr)}

  /* 保持舒展密度：行高微增，字号略大 */
  body{font-size:16px}
  h1{font-size:1.9rem}
}

/* 手机端布局（必须存在 @media (max-width:767px)）
   - 将主容器改为单列流；左侧信息拆为标题前后的紧凑区块
   - 正文保持第一阅读主体：在视觉顺序上文章头部与正文保持可读优先
   - 避免横向滚动、文字截断、固定侧栏或重叠
*/
@media (max-width:767px){
  .page-wrap{padding:12px}
  .container{display:grid;grid-template-columns:1fr;gap:12px;padding:8px}

  /* DOM 的显示顺序在小屏上为：left-top, article-header, left-bottom, article-body */
  .left-top{order:1}
  .article-header{order:2}
  .left-bottom{order:3}
  .article-body{order:4}

  /* 标题与眉题紧凑排列 */
  h1{font-size:1.25rem}
  .eyebrow{font-size:0.78rem}
  .meta{flex-direction:row;gap:8px;font-size:0.82rem}

  /* 相关阅读在移动端为单列，紧凑呈现 */
  .related-grid{grid-template-columns:1fr}

  /* 所有模块无卡片背景，减少边距以提高信息密度但保持可触控间距 */
  .left-top,.left-bottom,.article-header,.article-body{padding:6px 2px}
}

/* 中等宽度补充规则（768-1023）以防断点奇怪行为 */
@media (min-width:768px) and (max-width:1023px){
  .container{max-width:960px;padding:18px}
  .container{grid-template-columns:1fr}
  .left-top{order:1}
  .article-header{order:2}
  .left-bottom{order:3}
  .article-body{order:4}
  body{font-size:15px}
}