/* nokaimau.cc 共享基础层：字体、色板、页眉页脚、通用排版 */

/* ── 字体 ────────────────────────────────────────────────────────────
   自托管，不走 Google Fonts CDN（国内不稳定）。
   全部按站内实际用字裁过，见 tools/build-fonts.py。
   角色分工：
     思源宋体   全部中文
     Bodoni Moda  拉丁展示位与统计数字，只在 ≥28px 用（发丝横画撑不住小字号）
     Lora       拉丁正文、作品英文名（真斜体）
     系统无衬线  全大写小标签，0 字节
*/
@font-face{
  font-family:"Noto Serif SC Sub";
  src:url("/fonts/noto-serif-sc.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda Sub";
  src:url("/fonts/bodoni-moda.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora Sub";
  src:url("/fonts/lora.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora Sub";
  src:url("/fonts/lora-italic.woff2") format("woff2");
  font-weight:400 700; font-style:italic; font-display:swap;
}

:root{
  --paper:#f4f6fb; --ink:#0b1535; --muted:#5f6880; --line:#d8deec;
  --rust:#002fa7; --night:#061b5b; --gold:#8fb4ff;
  --dark-fg:#f4f7ff; --dark-2:#bdc9e8; --dark-3:#8292bc;
  /* 需要随主题翻面的几个值，抽出来单独给一档 */
  --surface:#e9edf7;          /* 图片未加载时的占位底 */
  --mat:#f4f1ea;              /* 卡纸色；与生成图里烘焙的卡纸一致，两个主题都不变 */
  --faint:#7d879f;
  --glow:#002fa71a;
  --sh-s:0 12px 30px #10245a14;
  --sh-m:0 14px 34px #10245a1a,0 0 0 1px #002fa714;
  --sh-l:0 22px 52px #10245a26,0 0 0 1px #002fa71f;
  --sel-bg:#002fa7; --sel-fg:#fff;
  --cjk:"Noto Serif SC Sub","Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --display:"Bodoni Moda Sub",var(--cjk);      /* 大标题与统计数字 */
  --text:"Lora Sub",var(--cjk);                /* 正文与作品英文名 */
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --shell:min(1160px,calc(100% - 48px));
}
/* ── 暗色模式：跟随系统设置 ──────────────────────────────────────────
   这里重定义的是 token，不是逐条改规则。两个关键点：
   1) 品牌蓝在暗底上提亮，保持链接与焦点状态的可读性。
   2) --night（展厅面板）在亮色模式下比页面暗，暗色模式下必须比页面亮，
      否则面板会和背景糊在一起，整块结构消失。
   卡纸色 --mat 两个主题都不变：作品图里的米色卡纸是烘焙进图片的，
   占位底跟着变深会在图片加载完成的瞬间闪一下。 */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#070b16; --ink:#edf2ff; --muted:#a2abc1; --line:#1e2a49;
    --rust:#7da2ff; --night:#0b245e; --gold:#8fb4ff;
    --dark-fg:#f4f7ff; --dark-2:#bdc9e8; --dark-3:#8292bc;
    --surface:#111a30;
    --faint:#77829a;
    --glow:#1247cf33;
    --sh-s:0 12px 30px #00000059;
    --sh-m:0 14px 34px #00000066,0 0 0 1px #ffffff12;
    --sh-l:0 22px 52px #00000080,0 0 0 1px #ffffff1f;
    --sel-bg:#163e9b; --sel-fg:#f4f7ff;
  }
  /* 暗底上米色卡纸偏亮，压一点点避免刺眼 */
  .frame img,.cover img{filter:brightness(.94)}
}

*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
html,body{margin:0;min-height:100%;color:var(--ink)}
body{font-family:var(--text);font-size:16px;-webkit-font-smoothing:antialiased;
     overflow-x:hidden;text-spacing-trim:space-first}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:2px}

/* 全角标点：字身框占满 1em，但墨迹只在左侧。
   实测思源宋体：、墨迹 0.24em/右留白 0.72em，，墨迹 0.14em/右留白 0.78em，
   。墨迹 0.28em/右留白 0.68em——左边本来就只有 0.04-0.09em。
   所以只能收右边；两边一起收会把前一个字压进标点里。 */
.pc{margin-inline-end:-.5em}
.pc-e{margin-inline-end:-.62em}   /* 行末标点：让墨迹基本贴齐右边缘 */
.pc-o{margin-inline-start:-.5em}  /* （「《 这类留白在左侧的开引号 */

.shell{width:var(--shell);margin:auto}
.page{position:relative;z-index:2}

header{height:82px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans);font-size:12px;letter-spacing:.11em}
.brand{font-weight:800}
.brand i{font-style:normal;color:var(--rust)}
nav{display:flex;gap:26px;color:var(--muted)}
nav a{padding:6px 0;transition:color .2s}
nav a:hover,nav a[aria-current="page"]{color:var(--rust)}

.kicker{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rust);margin-bottom:26px}

h1,h2{font-family:var(--display);font-weight:600;margin:0;letter-spacing:0}
h1{font-size:clamp(28px,9vw,112px);line-height:1.16;text-wrap:balance}
/* 中文没有词间空格，balance 会从词中间断行；用 nb 锁住成组的短语 */
.nb{white-space:nowrap}
h2{font-size:clamp(36px,5.2vw,64px);line-height:1.14}

.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px}
.section-head p{max-width:26em;margin:0;color:var(--muted);font-size:14px;
  line-height:1.8;text-wrap:balance}

.more{display:inline-flex;gap:13px;align-items:center;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.1em;color:var(--rust);transition:gap .25s}
.more:hover{gap:19px}

footer{display:flex;justify-content:space-between;gap:20px;padding:30px 0 44px;
  border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;color:var(--muted)}
footer a:hover{color:var(--rust)}

/* 灯箱：作品页与歌曲页共用 */
.lightbox{position:fixed;inset:0;z-index:100;background:rgb(3 10 30 / .96);display:none;
  place-items:center;padding:clamp(16px,4vw,44px);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox[open],.lightbox.open{display:grid}
.lightbox img{max-width:min(92vw,860px);max-height:88vh;border-radius:6px;
  box-shadow:0 30px 90px #000;width:auto;height:auto}
.lb-close{position:absolute;right:clamp(14px,3vw,28px);top:clamp(14px,3vw,24px);
  width:46px;height:46px;border:1px solid #ffffff40;border-radius:50%;
  background:#ffffff12;color:#fff;font-size:22px;line-height:1;cursor:pointer;
  transition:background .2s}
.lb-close:hover{background:#ffffff28}
.lb-cap{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,26px);text-align:center;
  color:#bdc9e8;font-family:var(--sans);font-size:12px;letter-spacing:.1em}

/* 硬换行只在宽屏生效；窄屏交给 text-wrap:balance，避免末行掉一两个字 */
@media(max-width:760px){
  br.wide{display:none}
  :root{--shell:min(1160px,calc(100% - 34px))}
  header{height:70px;font-size:11px}
  nav{gap:17px}
  footer{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Bodoni 默认不是等宽等高数字，统计行不锁会出现 3,302 与 1,108 参差。
   字重用 700 不用 600：Didone 的细画在 26-40px 会显得发虚，标题够大所以维持 600。 */
.num{font-family:var(--display);font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}