/* masklabo · tokens
   严格单色。唯一非灰是牛皮纸 #C8B79A，且只用于材质相关标注。 */

/* 自托管子集：Noto Sans SC（SIL OFL 1.1）、JetBrains Mono（SIL OFL 1.1），
   均由 scripts/subset_fonts.py 按 dist 实际用字切出。
   不再用 PingFang SC / 微软雅黑 这类随系统授权变化的字体做正文。 */
@font-face {
  font-family: "Masklabo Sans";
  src: url("/assets/fonts/noto-sans-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Masklabo Sans";
  src: url("/assets/fonts/noto-sans-sc-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Masklabo Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Masklabo Mono";
  src: url("/assets/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ink scale */
  --paper: #ffffff;
  --paper-2: #f7f7f5;
  --ink: #000000;
  --ink-soft: #1a1a1a;
  --ink-mid: #333333;
  --muted: #595959;
  --faint: #8c8c8c;

  /* lines */
  --line: rgba(0, 0, 0, 0.14);
  --line-2: rgba(0, 0, 0, 0.28);
  --rule: #111111;

  /* material */
  --kraft: #c8b79a;

  /* geometry */
  --radius: 0;
  --shadow: none;
  --gutter: 24px;
  --wrap-max: 1200px;
  --pad-x: 48px;

  /* type */
  --font-cn: "Masklabo Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans GB", sans-serif;
  --font-mono: "Masklabo Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(30px, 4.2vw, 52px);
  --fs-h2: clamp(20px, 2.1vw, 26px);
  --fs-h3: 17px;
  --fs-lead: 15px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-label: 11px;
  --fs-micro: 10px;

  --lh-cn: 1.95;
  --lh-body: 1.8;

  /* rhythm */
  --s-section: clamp(72px, 8.5vw, 124px);
  --s-block: 44px;
  --s-row: 18px;
}

@media (max-width: 767px) {
  :root {
    --pad-x: 20px;
    --s-section: 56px;
    --gutter: 16px;
    /* 10px 中文在手机上不是"小字"，是"糊字"：苹方/思源在这一档
       笔画会粘。11px 是还能读的下限，再小就只剩装饰作用。 */
    --fs-micro: 11px;
    --fs-small: 13px;
    --lh-body: 1.85;
  }
}

/* 400px 以下（SE、旧机型、分屏）：一屏里塞不下 5 列，横排的常数行改成两条 */
@media (max-width: 400px) {
  :root {
    --pad-x: 16px;
    --fs-h1: 26px;
  }
}