/* ═══════════════════════════════════════════════════════════════
   字醒啦 · litmark 站点共用（纸层）
   --------------------------------------------------------------
   2026-10-27 四轮之后改第五轮：照 `Desktop/风格参考` 十四张重定调 ——
     黑白灰 · 巨字 · 发丝线 · 编号 · 大留白 · 颗粒，一个彩色都不许有。
     参考图实测：饱和度 0.00–0.05；亮底是冷灰 #f0f0f0 / #d8d8d8（不是米白）。

   分层：
     · 纸层（起始页 / 加载 / 首页 / 样章 / 目录 / 关于 / 导入后的阅读器）→ 这几件
     · 暗场（章节、实验样张）→ 各自成页，底色纯黑
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* 色：只有黑、白、灰 */
  --black:#000000;
  --ink:#111111;
  --paper:#efefef;
  --panel:#d9d9d9;
  --dim:rgba(17,17,17,.62);
  --faint:rgba(17,17,17,.42);
  /* 2026-10-29 她：「白色模式下的线框不太明显，用更黑一点的线」——
     三档线各加深一档（发丝 .12→.20 / 线 .22→.34 / 重线 .34→.56），
     灰阶层级不变：hair < rule < rule-strong，仍然只有黑白灰。 */
  --rule:rgba(17,17,17,.34);
  --hair:rgba(17,17,17,.20);
  --rule-strong:rgba(17,17,17,.56);
  /* 十轮新增：半透明色要能跟着主题翻，所以把「墨/纸」拆成 rgb 三件套，
     页面里一律写 rgba(var(--ink-rgb), .18)，不要写死 17,17,17 */
  --ink-rgb:17,17,17;
  --paper-rgb:239,239,239;
  --bar:rgba(239,239,239,.9);      /* 站点头的毛玻璃底 */
  --fill:rgba(17,17,17,.045);      /* 卡片/悬停的浅底 */

  /* 字：本机实测过的六族（见 _tmp_caps 探针） */
  --lat:"Arial Black","Helvetica Neue",Arial,sans-serif;      /* 巨字：Arial Black 在 */
  --lat-txt:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  --cond:"Bahnschrift Condensed","Bahnschrift","Arial Narrow",Arial,sans-serif;
  --didot:"Bodoni MT",Didot,Georgia,serif;                     /* 参考图里那个 M */
  --mono:"Cascadia Mono",Consolas,"Courier New",monospace;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;

  /* 站点头高度：纸层页面统一取这两个值，页面里不要再写死 64 */
  --bar-h:88px;
  --bar-h-sm:68px;
}

/* ── 黑底模式（十轮她：「做个白底黑底切换的模式」）─────────────
   只换令牌，不换结构：所有纸层页面都靠这几个变量取色，
   翻一次就整站翻。起始页那张黑海报、章节暗场、阅读器不在此列 ——
   它们本来就是黑的，是「海报」和「舞台」，不是纸。
   开关在站点头（assets/theme.js 注入），偏好存 localStorage `lmx.theme`。 */
:root[data-theme="dark"]{
  --ink:#efefef;
  --paper:#111111;
  --panel:#262626;
  --dim:rgba(239,239,239,.64);
  --faint:rgba(239,239,239,.44);
  /* 暗底的白线要比黑线更亮才看得见：黑 22% 抵得上白 40% 左右 */
  --rule:rgba(239,239,239,.40);
  --hair:rgba(239,239,239,.22);
  --rule-strong:rgba(239,239,239,.60);
  --ink-rgb:239,239,239;
  --paper-rgb:17,17,17;
  --bar:rgba(17,17,17,.9);
  --fill:rgba(239,239,239,.075);
  color-scheme:dark;
}

/* ── 站点头：88px，纸层页面共用一个 ─────────────────────────
   2026-10-28 九轮她：「顶部的导航实在是太小了，在画面的比重不协调」。
   照 6623（EDUARD ◆ BODAK）那一条 —— 每一项是一只被发丝线隔开的格子、
   当前那格整块实心；再照 358c（LEMKUS）上下各压一条线把整条框住。
   编号仍走 CSS 计数器：加一条链接自动多一号，页面里的 markup 不用动。 */
.sitebar{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:var(--bar-h);
  display:flex; align-items:stretch; gap:clamp(16px,2.4vw,38px);
  padding:0 clamp(16px,3vw,36px);
  background:var(--bar);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  font-family:var(--sans); color:var(--ink);
}
.sitebar a{ text-decoration:none; color:inherit; }
.sitebar .brand{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  white-space:nowrap; flex:0 0 auto;
}
.sitebar .brand .lat{
  font-family:var(--lat); font-size:clamp(17px,1.55vw,23px);
  letter-spacing:.005em; line-height:1;
}
.sitebar .brand .cn{
  font-size:9.5px; letter-spacing:.46em; color:var(--faint); line-height:1;
}
.sitebar nav{
  display:flex; align-items:stretch; counter-reset:sitebar-nav;
  margin-left:clamp(4px,1.2vw,16px);
}
.sitebar nav a{
  counter-increment:sitebar-nav;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:0 clamp(12px,1.7vw,24px);
  border-left:1px solid var(--hair);
  font-size:clamp(13px,.98vw,14.5px); letter-spacing:.14em; color:var(--dim);
  white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.sitebar nav a:first-child{ border-left:1px solid var(--rule); }
.sitebar nav a:last-child{ border-right:1px solid var(--rule); }
.sitebar nav a::before{
  content:counter(sitebar-nav,decimal-leading-zero);
  font-family:var(--didot); font-size:9.5px; letter-spacing:.12em;
  color:var(--faint); line-height:1;
  transition:color .18s ease, opacity .18s ease;
}
.sitebar nav a:hover{ color:var(--ink); background:var(--hair); }
.sitebar nav a[aria-current="page"]{ background:var(--ink); color:var(--paper); }
.sitebar nav a[aria-current="page"]::before{ color:var(--paper); opacity:.62; }
.sitebar nav a:focus-visible{ outline:1px dotted var(--ink); outline-offset:-5px; }
.sitebar .aside{
  margin-left:auto; align-self:center;
  display:flex; align-items:center; gap:16px; flex:0 0 auto;
}
.sitebar .go{
  font-family:var(--lat-txt);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
  padding:12px 22px; white-space:nowrap; border-radius:0;
  border:1px solid var(--ink);
  transition:background .18s ease, color .18s ease;
}
.sitebar .go:hover{ background:transparent; color:var(--ink); }
.sitebar .go:focus-visible{ outline:1px dotted var(--ink); outline-offset:3px; }

/* 白底 / 黑底 开关：一个半明半暗的圆，按一下就翻面 */
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border-radius:50%;
  background:none; border:1px solid var(--rule); color:var(--ink);
  cursor:pointer; flex:0 0 auto;
  transition:border-color .18s ease, transform .3s cubic-bezier(.3,1,.4,1);
}
.theme-btn svg{ display:block; width:14px; height:14px; }
.theme-btn .half{ fill:currentColor; }
.theme-btn .ring{ fill:none; stroke:currentColor; stroke-width:1.3; }
.theme-btn:hover{ border-color:var(--ink); }
.theme-btn:focus-visible{ outline:1px dotted var(--ink); outline-offset:3px; }
.theme-btn:active{ transform:rotate(180deg); }

/* ── 站点头的墨块（2026-10-29）──────────────────────────────
   她：「选中与切换动效」。网站不用底部标签栏，所以把它做在这里：
   当前那一格底下的实心墨块由 assets/navink.js 摆位；换页时从上一页那一格滑过来。
   没有脚本时退回原来的「整格实心」，样子不变。 */
.sitebar nav{ position:relative; }
.sitebar nav > a{ position:relative; z-index:1; }
.sitebar nav .navink{
  position:absolute; top:0; bottom:0; left:0; width:0; z-index:0;
  background:var(--ink); pointer-events:none;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1),
             width .5s cubic-bezier(.34,1.4,.5,1);
}
.sitebar nav.has-ink a[aria-current="page"]{ background:transparent; }
.sitebar nav.has-ink a[aria-current="page"]:hover{ background:transparent; color:var(--paper); }

/* 暗场上用的一版（章节页自己有顶栏，这里只兜底） */
.sitebar.dark{
  background:rgba(0,0,0,.9); color:#fff;
  border-bottom-color:rgba(255,255,255,.16);
}
.sitebar.dark .brand .cn{ color:rgba(255,255,255,.45); }
.sitebar.dark nav{ border-left-color:rgba(255,255,255,.16); }
.sitebar.dark nav a{ color:rgba(255,255,255,.62); }
.sitebar.dark nav a::before{ color:rgba(255,255,255,.42); }
.sitebar.dark nav a:hover,.sitebar.dark nav a[aria-current="page"]{ color:#fff; }
.sitebar.dark nav a[aria-current="page"]::before{ color:inherit; }
.sitebar.dark nav a[aria-current="page"]{ border-bottom-color:#fff; }
.sitebar.dark .go{ background:#fff; color:#000; border-color:#fff; }
.sitebar.dark .go:hover{ background:transparent; color:#fff; }

@media (max-width:900px){
  .sitebar{ height:var(--bar-h-sm); gap:12px; padding:0 14px; }
  .sitebar .brand .lat{ font-size:15px; }
  .sitebar .brand .cn{ display:none; }
  .sitebar nav{ margin-left:0; }
  .sitebar nav a{ padding:0 10px; font-size:12.5px; letter-spacing:.06em; gap:0; }
  .sitebar nav a::before{ display:none; }
  .sitebar .go{ padding:9px 13px; font-size:10.5px; letter-spacing:.1em; }
  .sitebar .aside{ gap:9px; }
  .theme-btn{ width:26px; height:26px; }
}
@media (max-width:560px){
  /* 五格塞不下就把动作按钮收起来：首页本身就有导入区 */
  .sitebar .go{ display:none; }
  .sitebar nav a{ padding:0 8px; font-size:12px; letter-spacing:.02em; }
}

/* ── 共用小件 ───────────────────────────────────────────────── */
.k{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.3em; color:var(--faint);
  margin:0 0 .9em; text-transform:uppercase;
}
.rule{ height:1px; background:var(--hair); border:0; margin:0; }

/* 颗粒：参考图里那些纸面/网点感。不叠混合模式，免得被祖先隔离后发白 */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
.grain--light{ opacity:.16; }
/* 黑底模式：颗粒本身是黑的，落在黑底上看不见 —— 反相成白噪点，浓度压低 */
:root[data-theme="dark"] .grain{ filter:invert(1); opacity:.055; }

/* 编号 / 拉丁小标 */
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num{ font-family:var(--didot); font-variant-numeric:lining-nums; }

/* 只给读屏的标签 */
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}


/* ── 装饰层（2026-10-28 十五轮）─────────────────────────────
   参考里的黑白插画拿来当「纸纹」，压得很低，只做气氛，不抢字。
   一律 pointer-events:none；暗底自动翻黑为白，不要另配一套图。 */
.deco{
  position:absolute; z-index:0; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.1; filter:grayscale(1) contrast(1.02);
  /* 四边羽化（2026-10-28 十六轮）：
     图是矩形的，纸没有边。四边各留一条渐隐带，让图淡进纸里，
     再也不会出现一条直的「断点」。--fg 就是这条带占图宽/高的比例，
     窄长条和方图各自调；要更柔就调大。 */
  --fg:16%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fg), #000 calc(100% - var(--fg)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fg), #000 calc(100% - var(--fg)), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fg), #000 calc(100% - var(--fg)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fg), #000 calc(100% - var(--fg)), transparent 100%);
  mask-composite:intersect;
}
:root[data-theme="dark"] .deco{
  opacity:.16;
  filter:grayscale(1) invert(1) contrast(1.05);
}