/* 全站共享样式。
   改这里不需要重算 HTML —— 改完 deploy 即可（等不及就 POST /api/purge 清 /assets/common.css）。
   页面专属样式仍写在页面 frontmatter 的 page_css 里，内联在该页 <style> 中。

   约定：老页面手写过的类名（.verdict .window .calc .faq .sources .stats .cardlist
   .hublist .fresh .pager .related .tag .hl .best ...）全部保留并重新美化，
   这样 6 篇 format: html 的老页面不用改一个字。 */

:root {
  --bg:#ffffff; --bg-soft:#f6f8fc;
  --surface:#ffffff; --surface-2:#f3f6fb; --surface-3:#e6edf7;
  --text:#101828; --text-dim:#3f4b5f; --muted:#667287;
  --accent:#1256d6; --accent-2:#3b6ef0; --accent-soft:rgba(18,86,214,.10);
  --green:#0a7a4c; --amber:#96650a; --danger:#c02b2b;
  --line:#e2e8f2; --border:#d3dcea;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --wrap:1080px;

  /* ── 字号阶梯（type scale）──────────────────────────────────
     rem 相对 html（16px），与 body 的 17px 无关。
     改字号只改这里，全站同步；不要在各选择器里再写死数值。

     body（17px）只作用于顶栏/导航等 UI 壳，正文一律由 .prose 接管。
     英文内容站的经验值：正文 19px、导语比正文大、次要内容不低于 17px、
     元信息 14–15px、标签 12px。低于 15px 的正文类内容会让长文读起来费劲。 */
  --fs-lede:1.3125rem;      /* 21px 导语/首段，比正文大 */
  --fs-h1:clamp(1.9rem, 4.2vw, 2.6rem);
  --fs-h2:1.5rem;           /* 24px */
  --fs-h3:1.1875rem;        /* 19px，与正文同级 */
  --fs-body:1.1875rem;      /* 19px 正文 */
  --fs-secondary:1.0625rem; /* 17px 次要内容：结论块/FAQ/表格/推广卡 */
  --fs-small:0.9375rem;     /* 15px 小字：来源/图注/卡片描述 */
  --fs-meta:0.875rem;       /* 14px 元信息：日期/面包屑/页脚 */
  --fs-micro:0.75rem;       /* 12px 标签/eyebrow */
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
/* 字体栈：system-ui 前置，浏览器自动映射到各系统原生 UI 字体
   （macOS→SF、Win11→Segoe UI Variable、Win10→Segoe UI、Android→Roboto、Linux→系统默认）。
   不加载任何字体文件；去掉了原先的 Inter —— 系统里装没装 Inter 是随机的，会让不同访客看到不同字体。
   字重 450：白底 + 无衬线会让字显瘦，英文内容站正文常用 400–450，白底取上限。
   不再写 -webkit-font-smoothing:antialiased —— 它在 macOS 上关闭次像素渲染，是"字细"的主要来源。 */
body {
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  font-size:17px; font-weight:450;
}
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 1.25rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }

/* ---------------------------------------------------------- 顶部 */

.site-header {
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; gap:1.25rem; height:60px; }
.brand {
  font-weight:700; font-size:1rem; letter-spacing:-.01em; color:var(--text);
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.brand::before {
  content:''; width:22px; height:22px; border-radius:7px; flex:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
.nav-links { display:flex; align-items:center; gap:1.1rem; margin-left:auto; font-size:var(--fs-small); overflow-x:auto; }
.nav-links a { color:var(--text-dim); white-space:nowrap; }
.nav-links a:hover { color:var(--text); text-decoration:none; }
.nav-links .here { color:var(--text); font-weight:600; }
.nav-links .sep { display:none; }              /* 顶部用间距分隔，不再用 · */

/* 面包屑 */
.breadcrumbs { font-size:var(--fs-meta); color:var(--muted); margin:1.1rem 0 .35rem; }
.breadcrumbs a { color:var(--text-dim); }
.breadcrumbs .sep { color:var(--border); margin:0 .45rem; }

/* ---------------------------------------------------------- 文章头 */

article { padding-bottom:1rem; }
.article-hero { max-width:72ch; margin:1.5rem 0 1.75rem; }
.eyebrow {
  font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:.7rem;
}
h1 {
  font-size:var(--fs-h1); line-height:1.18; letter-spacing:-.022em;
  font-weight:700; margin-bottom:.7rem;
}
.lede { font-size:var(--fs-lede); color:var(--text-dim); line-height:1.55; margin-bottom:1rem; }
.meta-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem;
  font-size:var(--fs-meta); color:var(--muted);
}
.meta-row time { font-variant-numeric:tabular-nums; }
.meta-row .sep { color:var(--border); }
.meta-row a { color:var(--accent); }

/* 头图 */
.cover { margin:1.25rem 0 1.75rem; }
.cover img { width:100%; border-radius:var(--radius); border:1px solid var(--border); }

/* 目录 */
.toc {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.15rem; margin:0 0 2rem; max-width:72ch;
}
.toc b { display:block; font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.toc ol { margin-left:1.1rem; font-size:var(--fs-small); line-height:1.9; }
.toc a { color:var(--text-dim); }
.toc a:hover { color:var(--accent); }

/* ---------------------------------------------------------- 正文 */

/* 英文站尺度：19px（文章站中位：Medium 21 / Substack 20 / Dev.to 18-19），栏宽 74ch。
   h2 与正文拉开 1.4 倍以上层级差。靠字号与留白建立层级，不靠边框色块。
   74ch 随字号缩放，19px 下正文栏约 686px，仍在 1080 容器内并留有余地。 */
.prose { max-width:74ch; font-size:var(--fs-body); line-height:1.75; }
.prose > * + * { margin-top:1.25rem; }
.prose h2 {
  font-size:var(--fs-h2); line-height:1.28; letter-spacing:-.016em; margin:2.75rem 0 .7rem;
  scroll-margin-top:80px; padding-top:.35rem;
}
.prose h3 { font-size:var(--fs-h3); margin:1.9rem 0 .45rem; }
.prose p { color:var(--text); }
.prose strong { color:#0b1220; font-weight:650; }
.prose ul, .prose ol { margin-left:1.25rem; }
.prose li { margin-bottom:.45rem; }
.prose li::marker { color:var(--muted); }
.prose a { text-decoration:underline; text-decoration-color:rgba(18,86,214,.35); text-underline-offset:2px; }
.prose blockquote {
  border-left:3px solid var(--accent); padding:.15rem 0 .15rem 1.1rem;
  color:var(--text-dim); font-size:var(--fs-body);
}
.prose hr { border:0; border-top:1px solid var(--line); margin:2.25rem 0; }

/* 图片 / 图注 */
.prose figure.img, .figure { margin:1.6rem 0; }
.prose figure img { border-radius:var(--radius-sm); border:1px solid var(--border); }
figcaption { font-size:var(--fs-meta); color:var(--muted); margin-top:.55rem; line-height:1.5; }
.gallery { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:1.6rem 0; }
.gallery figure { margin:0; }

/* 代码块 */
code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:.1em .38em;
}
pre {
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:1rem 1.1rem; overflow-x:auto; margin:1.2rem 0; line-height:1.6;
}
pre code { background:none; border:0; padding:0; font-size:.85rem; }

/* 表格 */
table { width:100%; border-collapse:collapse; margin:1.5rem 0 .5rem; font-variant-numeric:tabular-nums; font-size:var(--fs-secondary); }
th,td { padding:.7rem .8rem; text-align:right; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; font-size:var(--fs-meta); letter-spacing:.02em; text-transform:uppercase; }
td:first-child, th:first-child { text-align:left; }
tbody tr:hover { background:rgba(16,24,40,.035); }
.best { color:var(--green); font-weight:700; }

/* ---------------------------------------------------------- 组件 */

/* 结论块 */
.verdict {
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:1.15rem 1.3rem; margin:1.6rem 0; box-shadow:var(--shadow);
}
.verdict h2 { margin:0 0 .6rem; font-size:1.125rem; }
.verdict ul { margin-left:1.1rem; line-height:1.75; font-size:var(--fs-secondary); }
.verdict b { color:#0b1220; }

.note-box {
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--muted);
  border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:1.5rem 0;
  font-size:var(--fs-secondary); color:var(--text-dim); line-height:1.7;
}
.warn-box { border-left-color:var(--amber); color:var(--text); }

/* 推广卡（affiliate / CTA）——默认不出现，只在正文里写 :::offer 才有 */
.offer {
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  background:linear-gradient(135deg, rgba(18,86,214,.06), rgba(59,110,240,.03));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.25rem; margin:1.75rem 0; box-shadow:var(--shadow);
}
.offer-body { flex:1 1 260px; }
.offer h3 { font-size:1.0625rem; margin-bottom:.25rem; }
.offer p { font-size:var(--fs-secondary); color:var(--text-dim); margin:0; }
.offer a, .btn {
  display:inline-block; padding:.6rem 1.1rem; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:650; font-size:.88rem;
  border:1px solid transparent; white-space:nowrap;
}
.offer a:hover, .btn:hover { background:#0e46b0; text-decoration:none; }

/* 展示广告位：第二屏（正文第一段之后自动插一处）。
   不给它加背景和边框，避免看起来像内容；只留上下细线 + 预留高度防 CLS。
   实际尺寸由 site.ad_slot_html 里的广告单元决定，min-height 只是兜底。 */
/* 高度按 728x90 预留（90 + 上下留白 + 分隔线），避免广告加载时布局跳动（CLS）。
   iframe 由 Adsterra 注入，宽度自适应，不需要在这里限宽。 */
.ad-slot {
  margin:2.25rem 0; padding:1rem 0; min-height:122px;
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.ad-slot:empty { display:none; }
.ad-slot > * { max-width:100%; }

/* 首页：_index.md 正文包在 .prose.home 里，与文章页共用 .prose 字号规范。
   这里只写"首页独有"的样式。

   导语（.sub / 首段）必须比正文【大】且用 --text-dim：英文站的 standfirst 是
   放大强调，不是缩小弱化。曾误设成 1.1rem（比正文小）+ 灰色，结果首段看起来
   比后续段落淡一截、小一截，像是两种层级——勿再改小。 */
.home > p:first-of-type,
.sub { font-size:var(--fs-lede); color:var(--text-dim); line-height:1.55; }

/* 老计算器组件（.window / .calc / .answer / .inputs）现代化 */
.window, .calc, .answer {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.15rem 1.25rem; margin:1.5rem 0;
}
.window .big { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.window .big.off { color:var(--green); }
.window .big.peak { color:var(--amber); }
.window .status { font-size:var(--fs-secondary); margin-top:.5rem; color:var(--text-dim); }
.window .tzline { font-size:var(--fs-meta); color:var(--muted); margin-top:.7rem; }
.hl { color:var(--green); font-weight:700; }
.warn { color:var(--amber); font-weight:700; }

.inputs { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.field { flex:1; min-width:170px; }
label { display:block; font-size:var(--fs-meta); color:var(--muted); margin-bottom:.35rem; }
input[type=number], select {
  width:100%; padding:.6rem .75rem; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:1rem;
}
input[type=number]:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input[type=range] { width:100%; margin:.4rem 0 .2rem; accent-color:var(--accent); }
.sliderhead { display:flex; justify-content:space-between; align-items:baseline; }

/* widget 容器 */
.widget {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem 1.3rem; margin:1.75rem 0;
}
.widget h2 { margin:0 0 .5rem; font-size:1.125rem; }

/* 徽章 / 标签 */
.tag {
  display:inline-block; font-size:var(--fs-micro); padding:.18rem .55rem; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); margin-left:.4rem; vertical-align:middle; font-weight:600;
}
.muted-tag {
  display:inline-block; font-size:var(--fs-micro); padding:.18rem .55rem; border-radius:999px;
  background:var(--surface-3); color:var(--muted); margin-left:.4rem; vertical-align:middle;
}

/* FAQ */
.faq { margin-top:.75rem; }
.faq details {
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); padding:.85rem 1.1rem; margin-bottom:.6rem;
}
.faq summary { cursor:pointer; font-size:1.0625rem; font-weight:600; }
.faq p { font-size:var(--fs-secondary); color:var(--text-dim); margin-top:.6rem; line-height:1.75; }

/* 小字 / 来源 / 更多 */
/* 来源/脚注：长文里常被缩到 13px 导致读不下去。15px 是下限，再小就别写。
   （这些是合规内容——灯塔要求每个数字可追溯，读不清等于没写。） */
.note, .sources, .footnote { font-size:var(--fs-small); color:var(--muted); line-height:1.7; }
.sources { margin:.75rem 0 0; }
.sources li { margin-left:1.1rem; }
.more { font-size:var(--fs-small); color:var(--text-dim); margin-top:1rem; line-height:1.7; }
.links {
  margin:2rem 0 1rem; padding:1rem 1.2rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:var(--fs-secondary); line-height:1.85;
}
.bullets { margin:.6rem 0 0 1.1rem; font-size:var(--fs-secondary); color:var(--text); line-height:1.75; }
.bullets li { margin-bottom:.75rem; }
.bullets b { color:var(--text); font-weight:650; }
.cta { color:var(--accent); font-size:var(--fs-meta); font-weight:600; }

/* 统计条 */
/* 统计条：英文站不把统计数字框起来——去掉背景与边框，只留上下细线。
   margin-top 必须自己给：全局 `* { margin:0 }` 下上方元素不产生间距，
   细线版没有内边距撑开，上边距 0 会直接贴住上一段。 */
.stats {
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin:2rem 0 2rem;
  padding:.9rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:var(--fs-small); color:var(--muted);
}
/* stats 里的数字会因中间字重 + 白色背景在小屏出 sub-pixel 雪花，
   强制 tnum + 略重字重（"日期是事实"——比统计更重）能消除。 */
.stats b, .stats strong { font-weight:550; font-variant-numeric:tabular-nums; }
.stats b { color:var(--text); font-weight:700; }

/* 卡片网格（首页分区 / 精选 / 相关阅读） */
.cardlist { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:1.25rem 0 .5rem; }
.card {
  display:block; padding:1.3rem 1.4rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--text); transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover { border-color:var(--accent); background:var(--surface-2); transform:translateY(-2px); text-decoration:none; }
.card b { display:block; font-size:1.0625rem; margin-bottom:.4rem; letter-spacing:-.01em; }
.card span { display:block; font-size:var(--fs-small); color:var(--muted); line-height:1.6; }
.card em {
  display:block; margin-top:.75rem; font-size:var(--fs-micro); font-style:normal; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}

/* 分区页列表 */
.hublist, .fresh { list-style:none; margin:.5rem 0 0; }
.hublist li { border-bottom:1px solid var(--line); }
.hublist li:last-child { border-bottom:0; }
.hublist a {
  display:block; padding:.95rem .25rem; color:var(--text); font-weight:600; font-size:1.0625rem;
}
.hublist a:hover { color:var(--accent); text-decoration:none; }
.hublist span { display:block; color:var(--muted); font-size:var(--fs-small); margin-top:.2rem; font-weight:400; }

.fresh li { padding:.8rem 0; border-bottom:1px solid var(--line); }
.fresh li:last-child { border-bottom:0; }
.fresh a { color:var(--text); font-weight:600; }
.fresh time { color:var(--muted); font-size:var(--fs-micro); margin-left:.6rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fresh span { display:block; color:var(--muted); font-size:var(--fs-small); margin-top:.2rem; }

.pager { margin-top:1.6rem; font-size:var(--fs-meta); color:var(--muted); display:flex; gap:1rem; align-items:center; }
.pager .sep { color:var(--border); }

/* 相关阅读 */
.related { margin:3rem 0 1rem; padding-top:2rem; border-top:1px solid var(--line); }
.related h2 { font-size:var(--fs-h2); margin:0 0 1rem; letter-spacing:-.01em; }

/* ---------------------------------------------------------- 页脚 */

.site-footer {
  margin-top:3rem; border-top:1px solid var(--line); background:var(--bg-soft);
  padding:2rem 0 2.5rem;
}
/* 大页脚：多列站点地图（英文站标配，同时是内链枢纽）。窄屏自动堆叠。 */
.footer-grid {
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr));
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.footer-col h2 {
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:.7rem;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.45rem; }
.footer-col a { font-size:var(--fs-small); color:var(--text-dim); line-height:1.5; }
.footer-col a:hover { color:var(--accent); text-decoration:none; }
.footer-brand { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.footer-note { color:var(--muted); font-size:.78rem; }
.footer-about { font-size:.82rem; color:var(--muted); line-height:1.7; max-width:46ch; }
.footer-disclosure { font-size:.78rem; color:var(--muted); line-height:1.75; max-width:80ch; padding-top:1.25rem; }
.updated { font-size:.75rem; color:var(--muted); margin-top:1rem; }

/* ---------------------------------------------------------- 窄屏 */

@media (max-width:720px) {
  body { font-size:16.5px; }
  h1 { font-size:1.65rem; }
  .header-inner { height:54px; gap:.75rem; }
  .nav-links { gap:.85rem; font-size:.82rem; }
  .offer { flex-direction:column; align-items:flex-start; }
  /* 窄屏：只缩放正文与 h2 两档，其余跟着 --fs-* 走（改变量即可全站同步） */
  .prose { font-size:1.0625rem; }
  .prose h2 { font-size:1.3rem; }
  .home > p:first-of-type, .sub { font-size:1.15rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .footer-brand-col { grid-column:1 / -1; }
}