/* 主题色：深紫灰与象牙白；现代无衬线编辑风；双层基线网格视觉签名 */
:root{
  --bg-ivory:#FBF9F7;
  --deep-purple-gray:#3a2f42;
  --accent:#5b4a6b; /* 深紫调 */
  --muted:#7c7580;
  --text:#222;
  --max-width:1280px; /* 在 1120-1440 之间，取中间值 */
  --gutter:24px;
  --base-font:16px;
  --baseline:32px; /* 双层基线单位：32px 产生更舒展的节奏 */
  --content-line-height:1.75;
  --radius:4px; /* 方形信息块 -> 小方角 */
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
html,body{height:100%;background:var(--bg-ivory);color:var(--text);font-size:var(--base-font);line-height:var(--content-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}
/* Narrow dark header */
.site-header{background:var(--deep-purple-gray);color:#fff;padding:10px 16px}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-name{color:#fff;font-weight:700;text-decoration:none;font-size:1rem}
.index-list{color:rgba(255,255,255,0.9);font-size:0.95rem;display:flex;gap:8px;align-items:center}
.index-list .sep{opacity:0.6}
/* Ad containers are independent, non-floating */
.ad{max-width:var(--max-width);margin:16px auto;padding:8px 12px;color:var(--muted);background:transparent;border:1px dashed rgba(0,0,0,0.04);box-sizing:border-box}
.ad-top{margin-top:18px}
.ad-middle{margin:24px auto}
.ad-bottom{margin:28px auto}

.page-wrapper{max-width:var(--max-width);margin:20px auto;padding:0 var(--gutter);box-sizing:border-box}
.article{display:block}
.article-head{margin-bottom:14px}
.title-row{display:flex;flex-direction:column;gap:10px}
.title-row h1{font-size:1.75rem;margin:0;color:var(--deep-purple-gray);letter-spacing:-0.01em}
.summary{background:#fff;padding:10px;border-radius:var(--radius);box-sizing:border-box;border:1px solid rgba(0,0,0,0.04);color:var(--muted);font-size:0.98rem}
.meta{margin-top:10px;color:var(--muted);font-size:0.92rem;display:flex;gap:12px;align-items:center}
.published{color:var(--muted)}
.current{color:var(--muted)}

/* Layout grid: default is mobile-friendly single column; desktop overrides produce editor stack */
.layout-grid{display:block}
.side{display:none}
.content-wrap{background:#fff;padding:20px;border-radius:2px;border:1px solid rgba(0,0,0,0.04);box-sizing:border-box}
.content-body{color:var(--deep-purple-gray);font-size:1rem}

/* 视觉签名：正文区双层基线网格（细线每 baseline 显示） */
.content-body{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(var(--baseline) - 1px),
    rgba(0,0,0,0.02) calc(var(--baseline) - 1px),
    rgba(0,0,0,0.02) calc(var(--baseline))
  );
  background-repeat:repeat-x;
  background-position:0 0;
  background-size:100% var(--baseline);
  padding:8px 0; /* 视觉上与基线对齐 */
}
.content-body p{margin:0 0 16px 0}
.content-body h2, .content-body h3{margin:20px 0 8px 0}

/* FAQ with theme top border */
.faq{background:#fff;margin-top:20px;padding:12px;border:1px solid rgba(0,0,0,0.04);box-sizing:border-box}
.faq-title{margin:0 0 10px 0;padding-top:6px;border-top:4px solid var(--accent);color:var(--deep-purple-gray);font-size:1rem}
.faq-inner{color:var(--muted)}

.related{margin-top:18px}
.related-title{margin:0 0 10px 0;color:var(--deep-purple-gray);font-size:1rem}
.related-list{background:#fff;padding:12px;border:1px solid rgba(0,0,0,0.04);box-sizing:border-box}
.related-list > *{display:block;margin:6px 0}

.site-footer{max-width:var(--max-width);margin:28px auto;color:var(--muted);padding:10px 16px}

/* Accessibility helper: visually hidden when needed */
.sr{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* DESKTOP: 编辑部堆叠结构：窄报头、跨栏标题、摘要带、正文10/2边注、底部FAQ与推荐不同宽度错位排列。 */
@media (min-width:1024px){
  .header-inner{padding:6px 0}
  .site-name{font-size:1.05rem}

  .page-wrapper{padding:0 28px}
  .title-row{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
  .title-row h1{font-size:2.2rem;grid-column:1/-1; /* 跨栏标题（跨越整行） */}
  .summary{grid-column:2/3;margin-top:12px}
  .article-head .meta{grid-column:1/2;margin-top:6px}

  /* 主体采用 12 栏网格，正文占10/侧栏占2 */
  .layout-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
  .side{display:block;grid-column:11/13}
  .content-wrap{grid-column:1/11;padding:28px}
  .side-surface{background:#fff;padding:12px;border:1px solid rgba(0,0,0,0.05);border-radius:2px}

  /* FAQ 与相关阅读故意错位：FAQ 较窄偏左，相关阅读偏右并稍后开始，形成错位排列 */
  .faq{grid-column:1/7;margin-top:28px;padding:16px}
  .related{grid-column:7/13;margin-top:10px;padding-left:12px}
  .faq-title{padding-top:10px}

  /* 使正文排版更宽松 */
  .content-body{font-size:1.05rem;line-height:1.9;padding:4px 0}
}

/* MOBILE: 各层按语义顺序单列，取消错位和跨栏。确保 320px 无横向滚动 */
@media (max-width:767px){
  :root{--gutter:14px}
  .site-header{padding:10px var(--gutter)}
  .header-inner{flex-direction:row;gap:8px}
  .index-list{display:none} /* 遵循 navigation_mode：仅保留站名与首页（栏目索引样式在桌面呈现） */

  .page-wrapper{padding:0 var(--gutter)}
  .title-row{display:block}
  .title-row h1{font-size:1.25rem}
  .summary{margin-top:8px}
  .meta{flex-direction:column;align-items:flex-start;gap:6px}

  .layout-grid{display:block}
  .side{display:none}
  .content-wrap{padding:16px}

  .faq,.related{padding:12px}
  .faq{border-top:4px solid var(--accent)}

  /* 保证内容在最窄 320px 时不溢出 */
  img,table,pre{max-width:100%;height:auto}
  .content-body{word-break:break-word}
}

/* 禁止常见的虚假或占位链接样式（模板不得生成占位死链） */
a[role="link"]{text-decoration:none}