/* masklabo · tokens
   暖白纸感 + 近黑墨色。唯一的彩色是陶土 --clay，只用于材料相关标注。

   气质取向：参照 Le Labo 那一类站的克制——字号偏小、行距偏松、标签字距拉宽、
   分隔线细到 1px 且透明度低。不靠大字和粗黑体撑版面，靠留白与层级。
   字体全部 SIL OFL 开源，见 scripts/subset_fonts.py。 */

@font-face {
  font-family: "Masklabo Grotesk";
  src: url("/assets/fonts/masklabo-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* 只覆盖拉丁：中文由下面的 Masklabo SC 接。用 unicode-range 划界比
     靠字体栈回落更可控——同一段混排文字里，西文和中文各走各的字面。 */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20A0-20BF,
    U+2100-214F, U+2190-21FF, U+2200-22FF, U+25A0-25FF;
}

@font-face {
  font-family: "Masklabo Grotesk";
  src: url("/assets/fonts/masklabo-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20A0-20BF,
    U+2100-214F, U+2190-21FF, U+2200-22FF, U+25A0-25FF;
}

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

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

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

:root {
  /* ink scale —— 带一点暖偏的墨，纯黑压在暖白上会显得脏 */
  --paper: #f6f4ee;
  --paper-2: #efece3;
  --paper-3: #e6e2d6;
  --ink: #16150f;
  --ink-soft: #24231b;
  --ink-mid: #3d3b31;
  --muted: #6b6862;
  --faint: #9a968c;

  /* lines */
  --line: rgba(22, 21, 15, 0.12);
  --line-2: rgba(22, 21, 15, 0.24);
  --rule: #16150f;

  /* material */
  --clay: #b9a88f;

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

  /* type */
  --font-sans: "Masklabo Grotesk", "Masklabo SC", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Hiragino Sans GB", sans-serif;
  --font-type: "Masklabo Type", "Courier Prime", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(28px, 3.6vw, 46px);
  --fs-h2: clamp(19px, 1.9vw, 24px);
  --fs-h3: 16px;
  --fs-lead: 15px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-label: 10.5px;
  --fs-micro: 10px;

  --lh-cn: 1.95;
  --lh-body: 1.85;

  /* 标签字距：Le Labo 那种拉宽的小大写。0.16em 在 10.5px 上刚好，
     再宽就散成装饰，再窄就还是普通小字 */
  --ls-label: 0.16em;

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

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

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