/* 视觉随笔型模板 — 设计种子: 7944f4d827bb0318 */
:root{
  --bg: #FFF7E6; /* 奶油白 */
  --brown: #3e2b1f; /* 深棕 */
  --accent: #6b3f2a; /* 克制强调色 */
  --muted: #6b6259;
  --surface-border: rgba(62,43,31,0.08);
  --radius: 2px; /* 2px 小圆角 */
  --max-site-width: 1280px; /* 在 1120-1440 区间内取中 */
  --content-max: 820px; /* 正文约820px */
  --gutter: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--brown);}
.site-wrapper{max-width:var(--max-site-width);margin:0 auto;padding:22px;}
.site-header{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--surface-border);}
.masthead{display:flex;flex-direction:column;align-items:center;gap:6px}
.brand{font-weight:700;font-size:18px;color:var(--brown);text-decoration:none}
.navline{height:2px;width:220px;background:linear-gradient(90deg,transparent 10%,var(--accent) 50%,transparent 90%);border-radius:1px}
.top-nav{font-size:13px;color:var(--muted);}
.top-nav .nav-item{padding:0 6px}
.top-nav .nav-sep{color:var(--surface-border)}

.page-frame{padding-top:18px}
.layout-grid{display:grid;grid-template-columns:72px 1fr;gap:32px;align-items:start}

/* 章节轨道（桌面） */
.chapter-track{min-width:72px;max-width:72px;padding-top:12px}
.chapter-track ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;align-items:center}
.chapter-track li{font-size:13px;color:var(--muted);writing-mode:vertical-rl;text-orientation:mixed}

/* 主列 */
.main-column{min-width:0}
.article{background:transparent;border-radius:var(--radius);border:1px solid var(--surface-border);padding:20px}
.article-title{font-size:28px;line-height:1.05;margin:6px 0 12px;text-align:center;font-weight:800;letter-spacing:-0.6px;color:var(--brown)}
/* visual_signature: 标题首字使用克制强调色（使用 first-letter，不改写 title 文本） */
.article-title::first-letter{color:var(--accent);font-size:1.08em}
.meta{display:flex;gap:12px;align-items:center;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:10px}
.meta .pubtime{font-variant-numeric:tabular-nums}
.current-time{opacity:0.95}
.summary{max-width:var(--content-max);margin:0 auto 18px;text-align:left;color:var(--muted);line-height:1.45}
.content{max-width:var(--content-max);margin:0 auto;color:var(--brown);line-height:1.9;font-size:16px}
.content p{margin:0 0 1em}

.ad-slot{border:1px dashed var(--surface-border);padding:12px;border-radius:var(--radius);background:transparent;margin:18px 0}
.ad-top{margin-bottom:18px}
.ad-middle{margin-top:18px;margin-bottom:18px}
.ad-bottom{margin-top:22px}

/* FAQ 与 相关阅读 跨越主内容宽度（在布局下方作为流式区块） */
.faq-related{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.faq, .related{background:transparent;border:1px solid var(--surface-border);padding:16px;border-radius:var(--radius)}
.sec-title{font-size:15px;margin:0 0 10px;color:var(--brown);font-weight:700}
.faq-body, .related-body{color:var(--muted);font-size:15px;line-height:1.6}
.related-body ol{padding-left:20px;margin:0}
.related-body ol li{margin:8px 0}
.faq-body ol{counter-reset:faq;list-style:none;padding-left:0;margin:0}
.faq-body ol li{counter-increment:faq;padding-left:28px;position:relative;margin:10px 0}
.faq-body ol li::before{content:counter(faq)".";position:absolute;left:0;color:var(--accent);font-weight:700}

.site-footer{margin-top:28px;padding-top:12px;padding-bottom:6px;text-align:center;color:var(--muted);font-size:13px}

/* Mobile track (标题下方横线形式)，在手机显示；桌面隐藏 */
.mobile-track{display:none;margin:10px 0}
.mobile-track ul{display:flex;gap:12px;list-style:none;padding:0;margin:0;justify-content:center}
.mobile-track li{font-size:12px;color:var(--muted);border-bottom:2px solid var(--surface-border);padding-bottom:6px}

/* ----------------- 响应：桌面 ≥1024px ----------------- */
@media (min-width:1024px){
  .site-wrapper{padding:32px}
  .layout-grid{grid-template-columns:80px 1fr;gap:36px}
  .chapter-track{min-width:80px;max-width:80px}
  .article{padding:28px}
  .article-title{font-size:34px}
  .summary{margin-left:calc((100% - var(--content-max))/2);margin-right:auto}
  .content{font-size:17px}
  /* 在桌面端，正文宽度受限为约820px，形成编辑部式阅读栏 */
  .content, .summary{max-width:var(--content-max)}
  /* FAQ 与 推荐跨越主内容宽度：在桌面上它们与主列同宽且在下方并列 */
  .faq-related{grid-template-columns:1fr 1fr}
}

/* ----------------- 手机 ≤767px：独立重排 ----------------- */
@media (max-width:767px){
  :root{--gutter:14px}
  .site-wrapper{padding:14px}
  .layout-grid{grid-template-columns:1fr;gap:12px}
  .chapter-track{display:none}
  .mobile-track{display:block}
  .article{border-radius:var(--radius);padding:14px}
  .article-title{font-size:20px;text-align:center}
  .summary{text-align:left;margin:10px 0}
  .content{max-width:100%;font-size:15px;line-height:1.7;padding:0}
  .faq-related{grid-template-columns:1fr;gap:12px}
  .faq, .related{padding:12px}
  /* 确保在极窄屏（320px）不横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间区（768-1023）采用混合但仍保持两套排版差异 */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{grid-template-columns:64px 1fr;gap:20px}
  .chapter-track{min-width:64px;max-width:64px}
  .article-title{font-size:24px}
  .content{max-width:720px;margin:0 auto}
}

/* 可访问性小幅增强 */
.article-title, .sec-title{word-break:break-word}
a{color:var(--accent)}