/* ============================================================
   肆刻 · 样式（S2 仪表 · 单套视觉，日夜两版）
   一个文件，无预处理器，无框架。改字号改颜色都在这一份里。
   目录：字体 → 变量 → 基础 → 顶栏 → 状态条 → 分类 → 卡片 →
        行 → 页脚 → 开关 → 字标 → 状态页 → 响应式
   ============================================================ */

/* 毛笔字标。原字体 5.8MB，这里只用「肆刻NEWS」9 个字，
   子集化后 4.5KB —— 比一张站标图还小，所以可以放心自托管，不引外部 CDN。 */
@font-face {
  font-family: "Brand";
  src: url("/assets/fonts/brand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------- 变量 ---------------- */
:root {
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;

  --r: 2px;              /* 直角风格，圆角只用 2px */
  --gap: 24px;
  --pad: 16px;
  --cardH: 354px;
  --headH: 46px;
  --maxw: 1280px;

  /* 日间配色：底色必须比面板暗到「一层」的程度。
     原来底色 #F1F2F3 和白卡片只差 6% 亮度，卡片边界几乎靠猜——
     这正是「没有质感」的根因：不是阴影不够重，是地面和纸面同色。
     现在压到 #E7EAED（差约 11%），白卡自己就浮起来了。 */
  --bg: #E7EAED;
  --panel: #FFFFFF;
  --line: #D8DDE3;
  --line2: #EBEEF1;
  --ink: #121517;
  --ink2: #4A5055;
  --mute: #83898F;
  --accent: #B16800;
  --accent-soft: rgba(177, 104, 0, .09);
  --hd: rgba(255, 255, 255, .93);
  --hover: rgba(177, 104, 0, .045);
  --shadow-under-head: rgba(16, 20, 26, .055);
}

/* 夜间不是日间调暗，是重新配一套：面板比底色亮一档、强调色提亮到能压在近黑上。 */
html[data-theme="night"] {
  --bg: #090A0B;
  --panel: #101214;
  --line: #2B3035;
  --line2: #191C1F;
  --ink: #EDEFF1;
  --ink2: #B2B8BE;
  --mute: #6A7076;
  --accent: #FFA51F;
  --accent-soft: rgba(255, 165, 31, .12);
  --hd: #0B0C0D;
  --hover: rgba(255, 165, 31, .06);
  --shadow-under-head: rgba(0, 0, 0, .38);
}

/* ---------------- 基础 ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 底色不做纯色平涂：顶部略亮、底部略暗，等于给页面一个「光源在上方」的前提。
   卡片阴影的方向和它一致，读者才会觉得光是从上面照下来的，而不是自己脑补的。 */
html[data-theme="day"] body { background: linear-gradient(180deg, #EAEEF1 0%, #E2E6EA 62%, #E0E5E9 100%) }
html[data-theme="night"] body { background: linear-gradient(180deg, #0A0B0C 0%, #090A0B 60%, #070808 100%) }

/* 所有数字等宽：不等宽的话「07:00」和「12:00」在同一行里宽度不一，
   读者扫一眼分不清哪个是哪个。 */
.rail-upd, .rail-meta, .rk, .c-no, .c-cnt, .clock b, .tm, .ft-l b { font-variant-numeric: tabular-nums }

a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }

/* 焦点可见：键盘用户必须看得见自己在哪。鼠标点击不显示（:focus-visible 自动处理） */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.app {
  min-height: 100vh;
  position: relative;
  background-image: radial-gradient(1200px 340px at 50% -200px, var(--accent-soft), transparent 72%);
  background-repeat: no-repeat;
}

/* 顶栏 / 状态条 / 分类栏 三处左沿必须和卡片对齐。
   卡片是 max-width 1280 居中再内缩 16 → 1440 下左沿 96。
   别用 --pad（16px），那会让这三处贴到屏幕边，和卡片错开 80px。 */
.hd, .rail, .cats {
  padding-left: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  padding-right: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
}

/* ---------------- 顶栏 ---------------- */
.hd {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--hd);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--line);
}
html[data-theme="day"] .hd { box-shadow: 0 6px 18px -14px rgba(23, 29, 36, .22) }
html[data-theme="night"] .hd { box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .9) }

.hd-l { display: flex; align-items: center; gap: 13px }
.hd-r { display: flex; align-items: center; gap: 18px }
.brand-link { display: block; line-height: 0 }

.clock { text-align: right; line-height: 1.1 }
.clock b {
  display: block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.clock span {
  display: block;
  font-size: 9px;
  color: var(--mute);
  letter-spacing: .1em;
  margin-top: 4px;
}

/* ---------------- 状态条（原来那条四段刻度已删） ---------------- */
.rail {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line2);
}
.rail-upd, .rail-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--mute);
}
.rail-upd b, .rail-meta b { color: var(--ink2); font-weight: 500 }
.rail-meta { margin-left: auto }

/* ---------------- 分类 ---------------- */
.cats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 4px;
}
.cat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 12px 6px;
  border: 1px solid var(--line);
  border-radius: 1px;
  font-size: 12px;
  color: var(--ink2);
  letter-spacing: .02em;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.cat i { font-family: var(--mono); font-style: normal; font-size: 9.5px; color: var(--mute) }
.cat:hover { border-color: var(--accent); color: var(--ink) }
.cat.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft) }
.cat.on b { font-weight: 600 }
.cat.on i { color: var(--accent); opacity: .7 }

/* 胶囊给一层薄底 + 内高光，不然一排空框像输入框 */
html[data-theme="day"] .cat {
  background: linear-gradient(180deg, #FFFFFF, #F7F8F9);
  box-shadow: 0 1px 1px rgba(23, 29, 36, .04), inset 0 1px 0 #FFF;
}
html[data-theme="day"] .cat.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, #FFF), color-mix(in srgb, var(--accent) 6%, #FFF));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(177, 104, 0, .14);
}
html[data-theme="night"] .cat {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="night"] .cat.on {
  background: linear-gradient(180deg, rgba(255, 165, 31, .14), rgba(255, 165, 31, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 1px rgba(255, 165, 31, .1);
}

/* ---------------- 引流位（值得充） ----------------
   三个形式共用一套色，靠 .promo-a / .promo-b / .promo-c 区分。
   设计约束来自需求本身：「不突兀、字少、醒目、不要太大，这个站还是以新闻为准」。
   所以 A 款没有用实心橙底——实心橙会和卡片的留白抢，而是拿一层很浅的暖底 + 1px 边框，
   在浅灰页面上是一个「贴近纸张颜色的标签」，视线扫过会停一下，但不会把卡片压下去。
   夜间不能直接压暗同一套色（黑底上的暖色会发脏），改成暖褐描边 + 内上缘微光。 */
.promo {
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* A：分类条下的内容条，宽度和卡片区完全对齐 */
.promo-a {
  display: flex;
  align-items: center;
  gap: 11px;
  width: calc(100% - var(--pad) * 2);
  max-width: calc(var(--maxw) - var(--pad) * 2);
  margin: 12px auto 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #FFF9EF, #FFF4E0);
  border: 1px solid #F2DFBE;
  border-bottom-color: #E8CE9E;
  box-shadow: 0 1px 2px rgba(120, 80, 10, .05);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.promo-a:hover {
  border-color: #E3B96E;
  box-shadow: 0 4px 12px -5px rgba(160, 110, 20, .3);
  transform: translateY(-1px);
}
html[data-theme="night"] .promo-a {
  background: linear-gradient(180deg, #1B1712, #16130E);
  border-color: #3C2F1C;
  border-bottom-color: #2A2114;
  box-shadow: inset 0 1px 0 rgba(255, 190, 90, .07);
}
html[data-theme="night"] .promo-a:hover { border-color: #6E5023 }

/* 「推广」标签：9.5px 不是随便定的——再小在 2 倍屏上也糊，再大就变成横幅的主角。
   有它，读者点进去不会觉得被套路；没有它，这是硬广冒充内容。 */
.promo-tag {
  flex: 0 0 auto;
  font-size: 9.5px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 2px;
  letter-spacing: .04em;
  color: #8A5A00;
  background: #F7E4C4;
  border: 1px solid #E9CD9C;
}
html[data-theme="night"] .promo-tag { color: #E0A64A; background: #2A2114; border-color: #4A3A1E }

.promo-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  letter-spacing: .01em;
  color: #6B4410;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="night"] .promo-txt { color: #DCC7A0 }

.promo-go {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #B16800;
  white-space: nowrap;
}
.promo-go i {
  font-style: normal;
  display: inline-block;
  margin-left: 3px;
  transition: transform .18s;
}
.promo-a:hover .promo-go i { transform: translateX(3px) }
html[data-theme="night"] .promo-go { color: #FFB53F }

/* 桌面：粘在顶栏（62px）下面，但只在「往上翻」的时候出现。
   为什么不是一条常驻条：常驻的粘性广告等于永久占用 42px 视口，
   900 高的屏幕上那是 4.7%，而且它永远盖在正文上方——这正是让人反感的形态。
   往下的动作 = 在读，收起；往上的动作 = 在找回导航或刚才那段，出现。
   收起时是 translateY(-100%) 滑到顶栏背后（顶栏 z-index 更高且不透明），
   不是 display:none——后者会打断过渡、还会让 grid 跳一下。 */
@media (min-width: 761px) {
  .promo-a {
    position: sticky;
    top: 62px;
    z-index: 19;
    transition: transform .22s ease, opacity .2s ease, border-color .18s, box-shadow .18s;
    will-change: transform;
  }
  .promo-a.hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  /* 粘住的时候，卡片会从它下面滑过去，在条子下沿被横切一道——
     一条悬空的小圆角条横切一行文字，看着像页面出错了。
     解法：粘住时把条子本身摊成通栏（100vmax 的实心阴影向外铺），
     于是它从「浮着的卡片」变成「顶栏下面的第二条」，切边变成版面边界。
     底色必须用条子自己的奶白，不能用 --bg：
     页面底色是竖向渐变 + 顶部一团暖光，用一个单一颜色去铺必然出现色差接缝（试过，很明显）。 */
  .promo-a.stuck {
    border-radius: 0;
    border-color: transparent;
    background: #FFF7EA;
    box-shadow:
      0 0 0 100vmax #FFF7EA,
      0 1px 0 #F0DFC4;
    clip-path: inset(-1px -100vmax -1px -100vmax);
  }
  html[data-theme="night"] .promo-a.stuck {
    background: #17130E;
    box-shadow:
      0 0 0 100vmax #17130E,
      0 1px 0 #2E2517;
  }
}

/* 手机不粘：一屏只有 844 高，任何常驻横条都是在抢内容。
   让它跟着页面滚走，需要的时候往上翻还能看到。 */
@media (max-width: 760px) {
  .promo-a { position: static }
}

/* B：顶栏下通栏，最醒目也最抢戏，默认不用 */
.promo-b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 34px;
  padding: 0 var(--pad);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: #FFF6E6;
  background: linear-gradient(90deg, #B16800, #C77A08 45%, #B16800);
}
.promo-b:hover { background: linear-gradient(90deg, #BE7200, #D2830B 45%, #BE7200) }
.promo-b b { color: #FFF; font-weight: 700 }
.promo-b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.promo-b i { font-style: normal; opacity: .75; font-size: 11.5px; white-space: nowrap }
.promo-b .promo-tag {
  color: #FFE9C4;
  background: rgba(0, 0, 0, .18);
  border-color: rgba(255, 255, 255, .28);
}

/* C：右下浮层 */
.promo-c {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 16px 0 10px;
  border-radius: 99px;
  background: linear-gradient(180deg, #FFB53F, #F09A12);
  border: 1px solid #D98600;
  color: #2A1B00;
  box-shadow: 0 8px 22px -10px rgba(180, 110, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .18s, box-shadow .18s;
}
.promo-c:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(180, 110, 0, .7) }
.promo-dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #2A1B00;
  color: #FFB53F;
}
.promo-ctx { display: flex; flex-direction: column; line-height: 1.25 }
.promo-ctx b { font-size: 13px; font-weight: 700 }
.promo-ctx s { text-decoration: none; font-size: 10px; font-weight: 400; opacity: .66; letter-spacing: .02em }

/* ---------------- 网格 ---------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad) 38px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ---------------- 卡片 ---------------- */
.card {
  height: var(--cardH);
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color .18s, box-shadow .22s;
  /* 让块内滚动不影响整页，也避免 iOS 上橡皮筋带动页面 */
  contain: paint;
}

/* 质感四规则：
   ① 日间两段阴影：贴近的 1px 定轮廓（锐），扩散的做体积（软）。只用一段，要么像贴纸要么像脏污。
   ② 夜间不能用黑影——黑底上的黑影看不见，只会把边缘糊掉。靠「上亮下暗」的受光渐变立起来。
   ③ 表头分层用 color-mix(ink N%)：日间 ink 是黑→表头略深，夜间 ink 是白→表头略亮，一句话日夜都对。
   ④ 底边比其余三边深一档，卡片才「站」在页面上而不是「贴」着。 */
html[data-theme="day"] .card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 55%, #FAFBFC 100%);
  border-color: #D3D9DF;
  border-top-color: #DDE2E7;
  border-bottom-color: #BEC6CE;
  /* 三段阴影，各管一件事，缺一段就露馅：
     ① 1px 贴身 —— 卡片和地面之间那道「缝」，没有它卡片像印在纸上；
     ② 18px 中景 —— 交代卡片离地多高，边缘处大约压暗 10%，这是能不能看出立体感的关键；
     ③ 40px 远景 —— 只做氛围，扩散大、浓度低，负责让卡片「有重量」。
     上一版把中景的扩散写成 -13px 全抵消了，等于只有贴身那一层，所以看着平。 */
  box-shadow:
    0 1px 2px rgba(17, 24, 32, .07),
    0 8px 18px -8px rgba(17, 24, 32, .20),
    0 24px 40px -24px rgba(17, 24, 32, .30),
    inset 0 1px 0 #FFF;
}
html[data-theme="day"] .card:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  border-bottom-color: #AEB6C0;
  box-shadow:
    0 1px 2px rgba(17, 24, 32, .07),
    0 12px 24px -8px rgba(17, 24, 32, .22),
    0 34px 54px -26px rgba(17, 24, 32, .34),
    inset 0 1px 0 #FFF;
}
html[data-theme="night"] .card {
  background: linear-gradient(180deg, #14171A 0%, #101214 58%, #0E1012 100%);
  border-color: #2E343A;
  border-bottom-color: #171A1D;
  /* 夜间不靠投影（黑底上没有投影），靠三件东西：
     内上缘高光（表面反光）+ 内下缘暗线（厚度）+ 极淡的外发光（把卡片从背景里「提」出来） */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .012),
    0 18px 40px -30px #000;
}
html[data-theme="night"] .card:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, #3C434A);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 24px 56px -32px #000,
    0 0 0 1px rgba(255, 165, 31, .07);
}

/* 悬停上浮 1px：只有 1px，是为了让阴影变化有物理依据；再多就像按钮，不像面板。
   而且只在真有指针的设备上做——触屏没有 hover，点一下卡片跳一下是 bug 感。 */
@media (hover: hover) {
  .card { transition: border-color .18s, box-shadow .22s, transform .22s }
  .card:hover { transform: translateY(-1px) }
}

/* 顶边发丝光：夜间一条 7% 白线，把「面」的上缘点亮 */
html[data-theme="night"] .card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, .03) 78%, transparent);
}

/* ---------------- 卡头 ---------------- */
.hd-card {
  height: var(--headH);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  position: relative;
  /* 表头做成「一块比正文略深的带子」，卡片才有分层。原来只做到 3.2%、
     而且渐变在 92% 就收干净了，看上去跟正文一个平面。 */
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5.6%, transparent), color-mix(in srgb, var(--ink) 2.2%, transparent));
}
/* 3px 琥珀竖条 + 一枚小光点，像仪表面板的指示灯 */
.hd-card::before {
  content: "";
  width: 3px;
  height: 11px;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}
.c-no { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--mute) }
.c-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-name:hover { color: var(--accent) }
.c-right { margin-left: auto; display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto }
.c-cnt { font-family: var(--mono); font-size: 11.5px; color: var(--ink2) }
.c-cnt s { text-decoration: none; color: var(--mute); font-size: 9.5px }

/* 站标：日夜两套图，CSS 切，不做 JS 判断——切换零延迟、不闪、不 404。
   尺寸取 --lg（由 HTML 内联给定，手机端用媒体查询改这个变量，不用 !important）。 */
.logo { display: block; flex: 0 0 auto; line-height: 0; width: var(--lg, 18px); height: var(--lg, 18px) }
.logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.logo .ln { display: none }
html[data-theme="night"] .logo .ld { display: none }
html[data-theme="night"] .logo .ln { display: block }

/* ---------------- 列表 ---------------- */
.list {
  overflow-y: auto;
  /* 稳定留出滚动条位宽：不然 20 条的卡和 10 条的卡右边框差 4px，一排看过去错位 */
  scrollbar-gutter: stable;
  height: calc(var(--cardH) - var(--headH));
  /* 卡头下方的柔和暗部：假装卡头是凸起的、在正文上投了一道影。
     背景不随滚动移动，所以这条影子永远贴在卡头下面，不会跟着内容跑。 */
  background: linear-gradient(180deg, var(--shadow-under-head), transparent 42px);
  padding: 0 0 20px;
  overscroll-behavior: contain;
}
/* 渐隐只在「确实还能往下滑」时出现（.more 由 site.js 按 scrollHeight 判断）。
   不判断的话，只有 10 条、根本不用滚的卡也会把最后一行淡化，
   读者会以为「这里还有内容但被切了」——假信号比没有信号更糟。
   底部留白与渐隐高度都取 20px：滑到底时渐隐正好盖在留白上，最后一行是清晰的。 */
.list.more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), rgba(0, 0, 0, .25));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), rgba(0, 0, 0, .25));
}
/* 键盘用户 Tab 进来时整块高亮，否则不知道焦点在哪（17 块都长一样） */
.list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }

/* ---- 内容装得下时，放弃滚动容器身份（.fit 由 site.js 按 scrollHeight 判断）----
   overflow-y:auto 即便内容不溢出也仍然是个「滚动容器」：滚轮落在它身上会被它吞掉，
   而它自己没有可滚的距离，于是页面一动不动。读者把鼠标停在那张卡上就滚不动页面，
   但看着又没有任何异常——这是最难自查的一类体验 bug。
   两行是刻意的：overflow:hidden 只是「用户不能滚」但它**仍然算滚动容器**，
   实测滚轮停上去页面照样不动（CDP 真实滚轮事件验证过）。
   overflow:clip 才是「根本不是滚动容器」，滚轮直接穿到页面。
   不支持 clip 的旧浏览器忽略第二行、退回 hidden —— 宁可不动也不能乱滚。 */
.list.fit { overflow: hidden; overflow: clip }

/* 原生滚动条一律关掉（原因见下面 .sb 的注释）。留着会出现「原生 + 自绘」两条。 */
.list { scrollbar-width: none; -ms-overflow-style: none }
.list::-webkit-scrollbar { width: 0; height: 0; display: none }

/* ---- 自绘滚动指示条 ----
   为什么要自己画：iOS Safari 的滚动条是 overlay，只在手指滑动时闪一下，
   松手就消失，日间那条浅灰更是根本看不见；Firefox 的 scrollbar-width: thin
   只能给单色不能给透明度。两端都不可控，所以干脆全部隐藏原生、画一条 3px 的。
   它常驻显示（不是 hover 才出来）——常驻的那条细线本身就是「这里还能往下滑」的提示，
   比渐隐更明确。位置和长度由 site.js 按 scrollTop 实时算。 */
.sb {
  position: absolute;
  top: var(--headH);
  right: 0;
  bottom: 0;
  width: 10px;
  z-index: 4;
  padding: 4px 0 10px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.sb.on { opacity: 1 }
.sb i {
  display: block;
  width: 3px;
  min-height: 20px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 15%, transparent);
  transition: background .2s, width .2s;
}
html[data-theme="night"] .sb i { background: color-mix(in srgb, #FFF 20%, transparent) }
.card:hover .sb i,
.list:focus-visible ~ .sb i { background: color-mix(in srgb, var(--ink) 30%, transparent) }
html[data-theme="night"] .card:hover .sb i,
html[data-theme="night"] .list:focus-visible ~ .sb i { background: color-mix(in srgb, #FFF 40%, transparent) }

.row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: stretch;
  position: relative;
  text-decoration: none;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.6;
  transition: background .14s, color .14s;
}
.row + .row { box-shadow: inset 0 1px 0 var(--line2) }
html[data-theme="day"] .row:nth-child(even) { background: rgba(16, 20, 26, .024) }
html[data-theme="night"] .row:nth-child(even) { background: rgba(255, 255, 255, .017) }

/* 前三名序号用强调色，读者一眼看到「这条在榜上很靠前」 */
.rk {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mute);
  letter-spacing: .04em;
  text-align: right;
  padding: 4px 8px 4px 0;
  display: block;
}
.row:nth-child(-n+3) .rk { color: var(--accent); font-weight: 600 }

.tx { overflow: hidden; padding: 4px 13px 4px 10px }
/* 单行截断：这是「每块等高」能成立的前提。允许换行的话长标题占 2~3 行，
   10 条能撑到 600px，17 块高度全不一样，栅格就没意义了。完整标题在 title 里。 */
.ti {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.row:hover { background: var(--hover); color: var(--ink) }
.row:hover .rk { color: var(--accent) }
/* 行首补一条 2px 琥珀边：静态站没有侧栏，这条是「你正看着这一行」的唯一提示 */
.row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .14s;
}
.row:hover::before { opacity: .85 }

/* 抓取失败的占位：格子留着写原因。删格子会让后面 16 块整体错位，读者以为站坏了。
   注意要写 html[data-theme] 前缀，否则打不过上面那条「日间卡片渐变」——
   之前 .card.empty 单类名（0,2,0）但日间规则是 (0,2,1)，透明度从来没生效过。 */
html[data-theme="day"] .card.empty,
html[data-theme="night"] .card.empty {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
html[data-theme="day"] .card.empty { border-color: #CDD3DA }
html[data-theme="night"] .card.empty { border-color: #2B3035 }
html[data-theme="day"] .card.empty .hd-card,
html[data-theme="night"] .card.empty .hd-card { background: none; border-bottom-color: transparent }
.ph-empty {
  height: calc(var(--cardH) - var(--headH));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 22px;
}
.ph-empty b { font-size: 12.5px; font-weight: 600; color: var(--ink2); letter-spacing: .04em }
.ph-empty span { font-size: 11px; color: var(--mute); line-height: 1.75 }

/* ---------------- 页脚 ---------------- */
/* 左 / 中 / 右 三段：左右各占 1fr、中间 auto —— 中间必然是页面正中。
   原来用 space-between，中间那块会落在两侧不相等的空白里，
   视觉上偏左或偏右，看着像没对齐。 */
.ft {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad) 34px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--mute);
  line-height: 1.7;
}
.ft-l { display: flex; align-items: baseline; gap: 14px }
.ft-l b { font-size: 11px; letter-spacing: .06em; color: var(--ink2); font-weight: 600 }
.ft-l .tm { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink2) }
.ft-l s { text-decoration: none; opacity: .72; font-size: 10.5px }
.ft-l { justify-self: start }
.ft-c { justify-self: center; font-size: 10.5px; opacity: .72; white-space: nowrap; letter-spacing: .01em }
.ft-c b { font-weight: 600 }
/* 只有「联系我」真的配了链接才画虚线下划线。没配链接就画线，
   是「看起来能点但点不动」的假信号，比不画更糟。 */
.ft-contact { border-bottom: 1px dotted currentColor; padding-bottom: 1px }
.ft-contact:hover { color: var(--accent); border-bottom-style: solid }
.ft-r { justify-self: end; font-size: 10.5px; opacity: .72; text-align: right }

.foot-promo {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) 30px;
  font-size: 11.5px;
  color: var(--ink2);
}

/* ---------------- 日夜开关 ---------------- */
/* 几何：滑块宽 = 轨道内宽 ÷ 2，停在左时中心正好是左图标中心，不需要手调偏移。
   图标压在滑块上面（z-index 2）——做「滑块带图标」时另一侧是空白，做「滑块盖图标」时
   当前状态被吃掉，只有「图标在上、滑块在下」两种状态同时可见。 */
.tgl {
  --tw: 54px;
  --th: 24px;
  --tpad: 2px;
  --tk: calc((var(--tw) - var(--tpad) * 2) / 2);
  --trk: #E3E6E9;
  --trkb: #CFD3D8;
  --knb: #B16800;
  --tsh: 0 1px 2px rgba(0, 0, 0, .14);
  --icoff: #83898F;
  --icon: #FFFFFF;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--tw);
  height: var(--th);
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--trk);
  box-shadow: inset 0 0 0 1px var(--trkb);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .24s;
}
.tgl .kn {
  position: absolute;
  top: var(--tpad);
  left: var(--tpad);
  width: var(--tk);
  height: calc(var(--th) - var(--tpad) * 2);
  border-radius: 1px;
  background: var(--knb);
  box-shadow: var(--tsh);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), background .24s;
}
.tgl[aria-checked="true"] .kn { transform: translateX(var(--tk)) }
.tgl .ic {
  position: absolute;
  top: 0;
  width: var(--tk);
  height: 100%;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--icoff);
  transition: color .24s;
}
.tgl .ic.l { left: var(--tpad) }
.tgl .ic.r { right: var(--tpad) }
.tgl .ic svg { width: 12px; height: 12px; display: block }
.tgl[aria-checked="false"] .ic.l,
.tgl[aria-checked="true"] .ic.r { color: var(--icon) }
.tgl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

html[data-theme="night"] .tgl {
  --trk: #16191C;
  --trkb: #2E3338;
  --knb: #FFA51F;
  --tsh: 0 1px 3px rgba(0, 0, 0, .55);
  --icoff: #5F666C;
  --icon: #0A0B0C;
}

/* ---------------- 字标 ---------------- */
/* --s 一个变量推所有尺寸：字号 0.48×s、字距 -0.024×s、描边 0.0052×s。
   描边用 box-shadow 而不是 border：border 会吃掉 2px 内框，36px 盒子和 180px 盒子的
   填充率就不一样了。box-shadow 不参与布局，各尺寸比例才一致。 */
.brand {
  --s: 36px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) * .22);
  background: #FFFFFF;
  color: #0A0B0C;
  border: 0;
  box-shadow: 0 0 0 1px #D2D6DA;
  font-family: "Brand", "KaiTi", "STKaiti", serif;
  font-size: calc(var(--s) * .48);
  line-height: 1;
  letter-spacing: calc(var(--s) * -.024);
  -webkit-text-stroke: calc(var(--s) * .0052) currentColor;
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
}
/* font-weight 必须锁 400：这款字体只有 400 一档，写粗会触发合成加粗，笔画糊成一团 */
.brand b {
  display: block;
  font-weight: 400;
  line-height: 1;
  transform: translateY(calc(var(--s) * -.011));
}
html[data-theme="night"] .brand {
  background: #FFA51F;
  box-shadow: 0 0 0 1px #E08E0A;
  color: #0A0B0C;
}
/* 英文行只在 ≥96px 出现：36px 里英文只有 3.5px，读不出 */
.brand .en {
  display: none;
  font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: calc(var(--s) * .096);
  letter-spacing: calc(var(--s) * .0499);
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  transform: translateX(calc(var(--s) * .025));
}
.brand.has-en { --s: 128px; row-gap: calc(var(--s) * .0178) }
.brand.has-en .en { display: block }
.brand.has-en b { transform: none }
.brand.xl { --s: 180px }

/* ---------------- 顶栏字标：NEWS 放进方块里 ---------------- */
/* 关键不是「把 en 显示出来」，是「小尺寸要另一套比值」。
   .en 原来是 0.096×s —— 那是给 180px 大标记配的；放到 36px 只有 3.4px，等于没有。
   顶栏这套单独给：肆刻 0.40×s、NEWS 0.152×s。
   方块同时从 36 放大到 46：36px 里 NEWS 最多 5.5px，1:1 屏幕上糊成一颗灰点；
   46px 才有 7px，能读出 "NEWS"。这是「放进方块里」能做到的上限，
   再大顶栏左右留白就没了（顶栏高 62px，46px 的方块上下各剩 8px）。 */
.brand.hd { --s: 46px; font-size: calc(var(--s) * .40) }
.brand.hd .en {
  display: block;
  font-size: calc(var(--s) * .152);
  letter-spacing: calc(var(--s) * .016);
  margin-top: calc(var(--s) * .028);
  /* 字距会在末字右边多留半个间距，整体左移半个才是视觉居中 */
  transform: translate(calc(var(--s) * .008), calc(var(--s) * .012));
  /* 用 currentColor + opacity，不用固定灰：
     夜间方块是橙底，任何中灰压上去都发灰发糊；跟着字色走就没这个问题。
     日间是深墨压白底（≈#6B6B6B），夜间是深墨压橙底，两边都够看。 */
  color: inherit;
  opacity: .66;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
}
.brand.hd b { transform: translateY(calc(var(--s) * -.006)) }

/* 顶栏标语：填掉「肆刻」右侧那片空。nowrap 是必须的——它一旦换行，
   整个顶栏会被撑高，而粘性引流条的 top 是按 62px 写死的。 */
.hd-claim {
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink2);
  white-space: nowrap;
}

/* ---------------- 状态页 ---------------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 80px }
.wrap h1 { font-size: 22px; letter-spacing: .04em; margin-bottom: 10px }
.lead { font-size: 12.5px; color: var(--ink2); line-height: 1.9; margin: 10px 0 20px }
.lead a { color: var(--accent) }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line2) }
.tbl th { font-size: 10px; letter-spacing: .12em; color: var(--mute); font-weight: 500; text-transform: uppercase }
.tbl td { color: var(--ink2) }
.tbl tr.bad td { color: #C0392B }
.tbl tr.bad td:nth-child(3) { font-weight: 600 }
html[data-theme="night"] .tbl tr.bad td { color: #FF7A6B }

/* ---------------- 手机 ---------------- */
/* 手机不是「桌面挤窄」，是另一套读法：
   桌面一屏看 17 块，读者是「扫」，所以标题必须单行截断、每块等高；
   手机一屏只有一块，读者是「读」，标题就要允许换行（截断反而看不出讲什么），
   行距和点击区都要放大。参考 newsnow 的做法：卡片圆角、卡头更大、行内两行标题。
   唯一保留的是「块内滚动」——不然 20 条 × 17 块要滑一万多像素才到底。 */
@media (max-width: 760px) {
  :root {
    --cardH: 520px;
    --headH: 54px;
    --gap: 14px;
    --pad: 12px;
    --r: 12px;
  }

  .hd { height: 58px }
  /* 窄屏不用 max()+calc() 那套对齐公式：屏幕宽度小于 1280 时它恒等于 --pad，
     但百分比在 padding 上的解析依赖包含块，实测在 390 宽下会把顶栏右端推出视口。
     这里直接写死固定内边距，行为可预测。 */
  .hd, .rail, .cats { padding-left: var(--pad); padding-right: var(--pad) }
  .hd-r { gap: 12px }
  .clock b { font-size: 17px }
  .clock span { font-size: 8.5px }

  .rail { padding-top: 9px; padding-bottom: 8px }
  .rail-upd, .rail-meta { font-size: 9.5px; letter-spacing: .06em }

  /* 六个胶囊要在 390 内一次排完——排不下时「社区」永远被切掉一半，看着像 bug 而不是可滑动。
     加了圆角做成胶囊，手指按下去的落点更明确。 */
  .cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    padding-top: 11px;
    padding-bottom: 6px;
  }
  .cats::-webkit-scrollbar { display: none }
  /* 实测（390 宽）：gap 6 + padding 11 时 scrollWidth 413，超出 23px，「社区」被切一半。
     收到 gap 4 / padding 9 后是 379 < 390，六个胶囊完整落在屏内，不用滑。
     这条数字是量出来的，不是估的——改字号或改文案后必须重新量。 */
  .cat {
    border-radius: 99px;
    padding: 6px 8px;
    font-size: 12.5px;
    gap: 4px;
    flex: 0 0 auto;
  }
  .cat i { font-size: 9.5px }

  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap);
    padding: 13px var(--pad) 28px;
  }

  .card { height: auto; border-radius: var(--r) }
  .hd-card { height: var(--headH); padding: 0 14px; gap: 9px }
  /* 卡头左边那条 3px 琥珀竖线在桌面是「仪表指示灯」，手机上它和圆形站标挤在一起像多余装饰 */
  .hd-card::before { display: none }
  /* 编号（01/02…）是桌面那套仪表盘的一部分，手机上它只占宽度不提供信息 */
  .c-no { display: none }
  .logo { --lg: 26px }
  .c-name { font-size: 15px; letter-spacing: .01em }
  .c-cnt { font-size: 12px }
  .c-cnt s { font-size: 10px }

  .list {
    height: auto;
    max-height: calc(var(--cardH) - var(--headH));
    padding-bottom: 22px;
  }
  /* 手机上渐隐和留白同样对齐到 22px，理由同桌面 */
  .list.more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0, 0, 0, .2));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), rgba(0, 0, 0, .2));
  }

  /* 行高与首行基线：--lh 是标题首行的行盒高度，序号用同一个值对齐，
     两行标题时序号贴在第一条上（不会掉到两行中间）。 */
  .row {
    --lh: 22.5px;
    grid-template-columns: 24px minmax(0, 1fr);
    font-size: 14.5px;
    line-height: 1.552;
  }
  .row .tx { padding: 10px 14px 10px 2px }
  .rk {
    padding: 10px 0 0;
    font-size: 11px;
    line-height: var(--lh);
    text-align: center;
    letter-spacing: 0;
  }
  /* 这才叫「读」：标题最多两行。桌面那套单行截断在手机上会把「养老金要崩盘？
     用三本账穿越认知迷雾」砍成「养老金要崩盘？用三本账穿越…」，等于没标题。 */
  .ti {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 两行标题的行高更松，但首行必须和序号对齐，所以 padding 略减 */
  .row:hover::before { opacity: 1 }

  /* 手机上三段竖排、居中。左对齐会让「By 大蝦不是大侠」孤零零贴在左边，
     和上面满屏的卡片比显得没做完。 */
  .ft { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px var(--pad) 26px; text-align: center }
  .ft-l { justify-self: auto }
  .ft-c { justify-self: auto }
  .ft-r { justify-self: auto; text-align: center }
  /* 顶栏标语在 390 宽放不下（会和时钟撞）；方块收到 44px，NEWS 仍有 6.7px */
  .hd-claim { display: none }
  .brand.hd { --s: 44px }
  .ft-l { gap: 10px }
  .ft-r { text-align: left; font-size: 9.5px }

  .wrap { padding: 26px 14px 60px }
  .tbl th, .tbl td { padding: 8px 6px; font-size: 11.5px }
  .tbl th:nth-child(2), .tbl td:nth-child(2),
  .tbl th:nth-child(6), .tbl td:nth-child(6) { display: none }

  /* 引流条在 390 上要能一行放下：标签、正文、CTA 三段的字号一起收，
     正文允许省略号——宁可少几个字，也不让它换行把卡片顶下去。 */
  .promo-a { height: 40px; gap: 8px; padding: 0 10px; margin-top: 10px }
  .promo-tag { font-size: 9px; padding: 3px 4px }
  .promo-txt { font-size: 12px }
  .promo-go { font-size: 11.5px }
  .promo-b { font-size: 11.5px; gap: 7px; height: 32px }
  .promo-b i { display: none }
  .promo-c { right: 12px; bottom: 12px; height: 42px; padding: 0 13px 0 9px }
  .promo-ctx b { font-size: 12px }
  .promo-ctx s { font-size: 9.5px }
}

/* 极窄屏：状态条右端的统计会挤到换行，直接不显示——
   它只是「站的规模」，不是必需品，读者更关心更新时间。 */
@media (max-width: 420px) {
  .rail-meta { display: none }
}

/* 系统开了「减少动态效果」：所有过渡直接关掉，不做位移 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}