body.site{max-width:none; padding:0; margin:0}

/* ── 一级：顶栏 ── */
.sitebar{position:sticky; top:0; z-index:20; background:var(--bg);
         border-bottom:1px solid var(--line)}
.sitebar-in{max-width:1120px; margin:0 auto; padding:10px 18px 0}
.sb-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sb-brand{font-weight:800; font-size:17px; letter-spacing:-.01em; text-decoration:none;
          color:var(--title)}
.sb-tag{font-size:12px; color:var(--muted)}
.sb-date{margin-left:auto; font-size:12.5px; color:var(--muted)}
/* 语言切换：常驻右上角。★ 当前语言实心、另一版可点、未出版的灰着并注明制作中 */
.langsw{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.langsw .lg{font-size:12px; padding:3px 9px; text-decoration:none; color:var(--muted); line-height:1.5}
.langsw .lg.on{background:var(--fg); color:var(--bg); font-weight:600}
.langsw .lg.off{opacity:.42; text-decoration:line-through}
/* 关键数字条：trader 进站第一眼要看到的三个数，任何页面都在 */
/* 顶栏跑马灯。★ 间隙用 `margin-right` **不用 flex `gap`**：位移量必须正好等于
   「一份格子 + 它的尾部间隙」，用 margin 时那正好是轨道的 50%，与间隙大小无关 ⇒
   断点里改 `--kpi-gap` 不会把接缝撕开。用 `gap` 的话 2N 个格子只有 2N-1 个间隙，
   50% 会差半个间隙，而那个错位每循环一圈累计一次，手机上尤其明显。 */
.kpis{overflow:hidden; padding:8px 0 0;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,
                         #000 calc(100% - 18px),transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 18px,
                 #000 calc(100% - 18px),transparent 100%)}
.kpi-track{display:flex; width:max-content;
           animation:kpi-marquee var(--kpi-dur,60s) linear infinite}
.kpi-dup{display:contents}          /* 复制的那份要参与同一条 flex 排布 */
.kpis:hover .kpi-track, .kpis:active .kpi-track,
.kpis:focus-within .kpi-track{animation-play-state:paused}
@keyframes kpi-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* ⚠ 系统开了「减弱动效」就别动 —— 前庭功能敏感的人看滚动条会晕。
   退回原来的手动横滑，并把复制的那份收起来（否则每个价格出现两次）。 */
@media (prefers-reduced-motion:reduce){
  .kpi-track{animation:none; width:auto; overflow-x:auto; scrollbar-width:none}
  .kpi-track::-webkit-scrollbar{display:none}
  .kpi-dup{display:none}
  .kpis{-webkit-mask-image:none; mask-image:none}
}
.kpi{flex:0 0 auto; border:1px solid var(--line); border-radius:999px;
     margin-right:var(--kpi-gap,7px);
     padding:3px 10px; font-size:12.5px; white-space:nowrap; background:var(--card)}
.kpi b{font-weight:700}
.kpi.up{color:var(--long)} .kpi.down{color:var(--short)}
/* 一级导航：手机上横向滚动，桌面上排开 */
.topnav{display:flex; gap:2px; overflow-x:auto; margin-top:8px; scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{flex:0 0 auto; padding:9px 12px; font-size:14px; font-weight:600;
          text-decoration:none; color:var(--muted); border-bottom:2px solid transparent;
          white-space:nowrap}
.topnav a.on{color:var(--title); border-bottom-color:var(--accent)}

/* ── 版心 + 二级：页内侧栏 ── */
.layout{max-width:1120px; margin:0 auto; padding:0 18px 72px}
.subnav{position:sticky; top:125px; display:flex; gap:6px; overflow-x:auto;
        padding:12px 0 10px; scrollbar-width:none; background:var(--bg); z-index:10}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto; font-size:13px; padding:5px 11px; border-radius:999px;
          border:1px solid var(--line); text-decoration:none; color:var(--muted);
          white-space:nowrap}
.subnav .ttl{display:none}
main.col{min-width:0}
/* 版块之间要有真的分隔 —— 一屏往下翻十几张图，没有分隔就是一坨 */
section.mod{padding:6px 0 10px; border-top:1px solid var(--line); margin-top:26px}
section.mod:first-of-type{border-top:0; margin-top:6px}
section.mod > h2{font-size:13px; margin:18px 0 12px; color:var(--muted);
                 letter-spacing:.08em; font-weight:600; text-transform:uppercase}
/* ★ 版块标题只有一行 —— 它已经是本页语言了（WEB-1 之后外壳按语言分家）。
   裸 `section.mod > h2` 那条是 kicker 样式（muted / uppercase / letter-spacing），
   给的是「第二行原文」，而现在没有第二行 ⇒ 一律带 `.solo`。
   ⚠ `letter-spacing` 加在中日韩文字上是逐字拉缝，不是「字距」。 */
section.mod > h2.solo{font-size:19px; color:var(--title); letter-spacing:0;
                      text-transform:none; font-weight:700}

/* ── 今日页 ── */
.hero h1{margin:18px 0 6px}
.hero .sub{margin:0 0 18px}
h2.mod-h{font-size:13px; letter-spacing:.08em; text-transform:uppercase;
         color:var(--muted); margin:40px 0 12px; font-weight:600;
         border-top:1px solid var(--line); padding-top:22px}
.cards{display:grid; gap:12px; grid-template-columns:1fr; margin:8px 0 0}
.card{border:1px solid var(--line); border-radius:10px; padding:14px 15px 12px;
      text-decoration:none; color:inherit; background:var(--card); display:block}
.card .t{font-weight:700; font-size:16px; color:var(--title)}
.card .b{font-size:13px; color:var(--muted); margin:3px 0 8px; line-height:1.5}
.card .n{font-size:12px; color:var(--muted)}
.card .thumb{margin:8px 0 6px; max-height:120px; overflow:hidden; opacity:.95}
.card .thumb svg{width:100%; height:auto; display:block}
/* ⚠⚠ 缩略图里的字**一律不显示**。卡片宽约 420px，而同一张图在正文里有 820px ——
   照搬过来图内字只有 6.5px（2026-08-22 实测）。**看不清的数字比没有数字更糟**：
   读者会以为自己看到了一个值。缩略图只负责给一个形状，数值在栏目页里看。 */
.card .thumb svg text{display:none}
.dl{display:inline-block; margin:18px 0 0; font-size:13px; color:var(--muted);
    text-decoration:none; border-bottom:1px solid var(--line)}
.status{display:block; padding:11px 13px; border-radius:9px; border:1px solid var(--line);
        background:var(--card); margin:16px 0 0; font-size:13.5px}
.status b{display:block} .status span{color:var(--muted); font-size:12.5px}
.status.warn{border-left:4px solid var(--accent)}

/* ── 试用 / 页脚 ── */
.cta{margin:34px 0 0; padding:16px 17px; border:1px solid var(--line); border-radius:11px}
.cta h3{margin:0 0 6px; font-size:16px}
.cta p{margin:0 0 10px; font-size:14px}
.btn{display:inline-block; padding:9px 14px; border-radius:9px; font-size:13.5px;
     font-weight:600; text-decoration:none; background:var(--fg); color:var(--bg)}
.foot{border-top:1px solid var(--line); margin:44px 0 0; padding:16px 18px 40px;
      font-size:12.5px; color:var(--muted); max-width:1120px; margin-left:auto; margin-right:auto}
.foot .legal{display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0}
.foot a{text-decoration:none; border-bottom:1px solid var(--line)}
.legal-body h1{margin:22px 0 10px} .legal-body h2{font-size:17px; margin:26px 0 8px}

/* ── 手机优先的收敛（用户 2026-08-22：手机端是主要浏览渠道）── */
@media(max-width:640px){
  /* 顶栏在 390px 上原来吃掉 ~130px = 一屏的 15%。tagline 是装饰，第一个删。 */
  .sb-tag{display:none}
  .sitebar-in{padding:8px 14px 0}
  .sb-date{font-size:12px}
  .kpis{padding:7px 0 0; --kpi-gap:6px}
  .kpi{font-size:12px; padding:3px 9px}
  /* 点按区 >= 40px：手指不是鼠标 */
  .topnav a{padding:11px 12px; font-size:14.5px}
  .layout{padding:0 14px 56px}
  /* ⚠ 二级 chips 在手机上**不吸顶**：顶栏已经吸了一层，两层加起来 ~170px，
     而 iPhone 可视高度约 700px —— 四分之一屏拿去放导航，正文只剩一半。 */
  .subnav{position:static; padding:10px 0 8px}
  .subnav a{padding:7px 12px; font-size:13.5px}
  section.mod > h2.solo{font-size:18px}
  .card{padding:13px 14px 11px}
}
/* iPhone 底部安全区，横屏时左右也留出刘海 */
@supports(padding:max(0px)){
  body.site{padding-bottom:env(safe-area-inset-bottom)}
  .layout{padding-left:max(14px,env(safe-area-inset-left));
          padding-right:max(14px,env(safe-area-inset-right))}
}

@media(min-width:1000px){
  .layout{display:grid; grid-template-columns:196px minmax(0,1fr); gap:38px;
          align-items:start}
  /* 桌面上二级目录变成真侧栏 —— 一级在顶、二级在侧，两级结构一眼看得见 */
  .subnav{position:sticky; display:block; overflow:visible; padding:22px 0 0;
          border-right:0}
  .subnav .ttl{display:block; font-size:11px; letter-spacing:.1em; color:var(--muted);
               text-transform:uppercase; margin:0 0 8px}
  /* ⚠⚠ 桌面侧栏里**必须允许折行**。基础档为了横向滚动的 chips 设了 `nowrap`，
     侧栏沿用它的话，长版块名（`Before the open · Fri 05:59 to Fri 08:00 SGT`、
     中文那条同样长）会整条**溢出到正文里压住标题** —— 而且不报任何错。
     侧栏是竖排的，本来就该折行。 */
  .subnav a{display:block; border:0; border-left:2px solid var(--line); border-radius:0;
            padding:6px 0 6px 11px; margin:0; white-space:normal; line-height:1.45}
  .subnav a:hover{border-left-color:var(--accent); color:var(--title)}
  .cards{grid-template-columns:1fr 1fr}
  .hero h1{margin-top:26px}
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★ 桌面字号档（WEB-6，2026-08-23 用户当面提：「桌面版打开以后，整个栏目的题目，
   还有『今日』『行情与技术』这些字体都特别小……显示比例不够成比例。手机端看着 OK」）

   ⚠⚠ **根因不是「字太小」，是站点外壳整套结构性文字只有一档。** 改之前实测
   （`scripts/measure_site_type.py`，1440px vs 390px 并排）：品牌 / 一级栏目 /
   二级目录 / 版块标题 / 卡片标题 **五项倍率全部 1.00×** —— 桌面上用的就是手机档的值；
   而同一页里报告自己的正文是 12 → 15px（1.25×）、h1 是 30 → 34px。
   ⇒ 外壳没跟着放大，读者看到的是「正文正常、导航特别小」。

   ⚠ 断点取 **900px 不是 1000px**：报告模板自己的桌面档就是 `@media(min-width:900px)`
   （`report.html.j2`）。取 1000 会留出 900–999px 一段「正文已是桌面档、外壳还是手机档」
   的窗口 —— 正是这次要修的那个毛病的小型版。上面那个 1000px 的块**只管布局**
   （grid / 侧栏 / 两列卡片），两块职责不重叠。
   ★ 本块必须排在 1000px 那块**之后**：同特异度后写的赢，字号只在这一处给。

   ⚠⚠ **手机档一个像素都不许动**（用户明确说手机端 OK）⇒ 本块全是 min-width 里的
   加法，基础档与 `max-width:640px` 那块一行未改。
   ⚠ 长图档（`body.longshot`）在报告模板里，与本块无关 —— 40px 硬线在那边。

   参照系：报告正文桌面档 17px。结构性文字按它定：
   一级栏目 17px（= 正文，它是导航主干）／二级目录 15px／版块标题中文 25px
   （比 h1 34px 小一档、比正文大一档）／英文 kicker 15px。
   ══════════════════════════════════════════════════════════════════════════ */
@media(min-width:900px){
  .sitebar-in{padding:14px 18px 0}
  .sb-brand{font-size:21px}
  .sb-tag{font-size:13px}
  .sb-date{font-size:13.5px}
  .langsw .lg{font-size:13px; padding:4px 11px}
  .kpis{padding:10px 0 0; --kpi-gap:8px}
  .kpi{font-size:14px; padding:4px 12px}
  /* 一级栏目名 —— 用户点名的那五个字条 */
  .topnav{margin-top:10px}
  .topnav a{font-size:17px; padding:11px 15px}
  /* 二级目录 */
  /* ⚠ sticky 的 `top` **= 顶栏实高**，字号一改它就变 ⇒ 每次改完复量，
     不要留着旧数（旧值 118px 是上一档字号量出来的，新字号下顶栏 159px，
     留着它二级目录会滑进顶栏底下）。量法：`scripts/measure_site_type.py` 最后一行。 */
  .subnav{top:159px}
  .subnav a{font-size:15px}
  .subnav .ttl{font-size:12px; margin:0 0 10px}
  /* 版块标题：中文那行是标题，英文那行是 kicker */
  section.mod > h2{font-size:15px; margin:22px 0 14px}
  section.mod > h2.solo{font-size:25px}
  h2.mod-h{font-size:15px; margin:48px 0 14px}
  /* 首页卡片 */
  .card{padding:17px 18px 15px}
  .card .t{font-size:19px}
  .card .b{font-size:15px}
  .card .n{font-size:13px}
  .card .thumb{max-height:150px}
  .status{font-size:15px; padding:13px 15px}
  .status span{font-size:13.5px}
  .dl{font-size:14.5px}
  .cta{padding:20px 22px}
  .cta h3{font-size:20px}
  .cta p{font-size:16px}
  .btn{font-size:15px; padding:10px 17px}
  .foot{font-size:13.5px}
}

.nmap{margin:6px 0 2px}
.nmap .lede{font-size:14.5px; margin:0 0 12px}
.nmap .lede b{color:var(--title)}
:root{--heat:183,121,31}
@media(prefers-color-scheme:dark){:root{--heat:224,169,74}}
.nm-grid{display:grid; gap:2px; align-items:stretch;
         grid-template-columns:var(--lblw,96px) repeat(var(--cols),minmax(0,1fr))}
.nm-h{font-size:11px; color:var(--muted); text-align:center; padding:2px 0 4px;
      line-height:1.25}
.nm-h b{display:block; font-size:12px; color:var(--fg); font-weight:700}
/* ⚠⚠ 行名**必须能折行**。英文行名（`Geopolitics & sanctions`）比中文长一倍多，
   `nowrap` 会让它整条**压到第一列数据格上**（2026-08-23 出图才看见：
   `Geopolitics & sanct[ions 13]7`）—— 中文版正常，所以只看中文页查不出来。
   同 memory `english-only-logic-fails-silently-in-chinese`。 */
.nm-r{font-size:12px; padding:0 8px 0 0; display:flex; justify-content:space-between;
      align-items:center; gap:6px; white-space:normal; line-height:1.25}
.nm-r span{flex:0 0 auto}
.nm-r span{color:var(--muted); font-size:11px}
.nm-c{background:rgba(var(--heat),var(--v)); border-radius:2px; min-height:30px;
      display:flex; align-items:center; justify-content:center;
      font-size:12.5px; font-variant-numeric:tabular-nums}
.nm-c.zero{background:transparent; border:1px dashed var(--line); color:var(--muted);
           font-size:11px}
.kbars{margin:14px 0 0}
.kb{display:grid; grid-template-columns:minmax(74px,auto) minmax(0,1fr) 26px;
    gap:8px; align-items:center; padding:2px 0; font-size:12.5px}
.kb .w{color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb .t{height:9px; border-radius:2px; background:rgba(var(--heat),.85);
       width:calc(var(--p) * 100%); min-width:3px}
.kb .n{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}
.nmap .cap{font-size:12px; color:var(--muted); margin:12px 0 0; line-height:1.6}
@media(min-width:1000px){
  .nm-grid{--lblw:158px}
  .nm-c{min-height:34px; font-size:13.5px}
  .nm-r{font-size:13.5px}
}