/* 法律页与支持页的共用样式。首页不用这份（首页的样子归设计线，另有方案）。
   2026-10-13 起照 app「设置 → Privacy policy / Terms of use」那几页一比一排（网站线，用户 10-13 定三条）：
   数值出处＝Modules/ReviewFeature/Sources/ReviewFeature/Materials/ScreenTokens.swift 的 `SettingType` 与 `ScreenPalette`、
   ScreenMaterials.swift 的 `SentenceType.legalBody` / `.pageTitle`、页面结构＝Screens/Setting/SettingSubpages.swift 的 `LegalPage`。
   零外站脚本、零外站字体（app 承诺 no tracking，网站也不装第三方东西）：字体全在 /fonts/，同源自托管。
   字体与颗粒图怎么来的：site/tools/web-fonts.py、site/tools/grain.py。 */

/* ── 字体 ──────────────────────────────────────────────
   苹果设备用系统自带的 Charter（正文）与 New York（大标题，CSS 里叫 ui-serif）；
   非苹果设备没有这两个，退到网站自带的 XCharter（Bitstream 捐给 X Consortium 的 Charter 的扩展版，许可见 /fonts/LICENSE-XCharter.txt）。
   中文照 app 退到思源宋体（只含这几页用到的字，OFL）。unicode-range 管着：英文页不会去下中文字，苹果设备不会去下 XCharter。 */
@font-face {
  font-family: "XCharter";
  src: url("/fonts/XCharter-Roman-gessov.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Gessov Serif SC";
  src: url("/fonts/NotoSerifSC-Regular-web.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+201C-201D, U+2190-21FF, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}
@font-face {
  font-family: "Gessov Serif SC";
  src: url("/fonts/NotoSerifSC-Medium-web.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+201C-201D, U+2190-21FF, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

:root {
  color-scheme: light dark;
  --serif: Charter, "XCharter", "Gessov Serif SC", serif;
  --display: ui-serif, "New York", Charter, "XCharter", "Gessov Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;

  /* 颜色（ScreenPalette.light）：白石膏 #CEC6B4、墨 #191712；退灰一律是墨乘不透明度（SettingType.dim / head / line）。 */
  --base: #CEC6B4;
  --ink: #191712;
  --dim: rgb(25 23 18 / 0.82);
  --head: rgb(25 23 18 / 0.74);
  --line: rgb(25 23 18 / 0.12);
  --grain: url("/grain-light.png");
  /* 对角雾五团（FogSpec：画布比屏幕四边各大 14%，浓度停靠点 0/22/42/60/76/90% → 1/.88/.60/.30/.10/0；
     蓝雾浓度 × fogGain 1.45、封顶 0.94）。CSS 背景是先写的在上，所以倒着写：第五团在最上。 */
  --fog:
    radial-gradient(58.88% 46.08% at -3.76% 111.44%, rgba(242,236,220,0.34) 0%, rgba(242,236,220,0.299) 22%, rgba(242,236,220,0.204) 42%, rgba(242,236,220,0.102) 60%, rgba(242,236,220,0.034) 76%, rgba(242,236,220,0) 90%),
    radial-gradient(64% 58.88% at 103.76% 3.92%, rgba(242,236,220,0.5) 0%, rgba(242,236,220,0.44) 22%, rgba(242,236,220,0.3) 42%, rgba(242,236,220,0.15) 60%, rgba(242,236,220,0.05) 76%, rgba(242,236,220,0) 90%),
    radial-gradient(84.48% 66.56% at 83.28% 103.76%, rgba(84,107,126,0.725) 0%, rgba(84,107,126,0.638) 22%, rgba(84,107,126,0.435) 42%, rgba(84,107,126,0.217) 60%, rgba(84,107,126,0.072) 76%, rgba(84,107,126,0) 90%),
    radial-gradient(71.68% 66.56% at 44.88% 52.56%, rgba(84,107,126,0.435) 0%, rgba(84,107,126,0.383) 22%, rgba(84,107,126,0.261) 42%, rgba(84,107,126,0.131) 60%, rgba(84,107,126,0.044) 76%, rgba(84,107,126,0) 90%),
    radial-gradient(99.84% 79.36% at -1.2% -3.76%, rgba(84,107,126,0.94) 0%, rgba(84,107,126,0.827) 22%, rgba(84,107,126,0.564) 42%, rgba(84,107,126,0.282) 60%, rgba(84,107,126,0.094) 76%, rgba(84,107,126,0) 90%);

  /* 字号行距（SettingType）。--lead＝一段正文的行高超出字体自然行高的那一截的一半：
     app 里段与段、节名与正文之间的距离从字身量起，CSS 从行框量起，差的就是这一截，下面的间距都把它扣掉。
     Charter 自然行高 1.2202 em（苹果 Charter 的 hhea；XCharter 子集改成一样）。 */
  --body-size: 16px;  --body-lh: 1.5;   --lead: 2.24px;   /* (16×1.5 − 16×1.2202) / 2 */
  --title-size: 31px; --title-lh: 1.19;                    /* New York 31：行高 1.08 小于它的自然行高 1.19，SwiftUI 只能加不能减，实际是 1.19 */
  --small-lh: 1.19;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ScreenPalette.dark：黑石膏 #0A0A0A、墨 #E9E9E6；淡字 66%、节名 58%、横线 10%；蓝雾 × 0.9。 */
    --base: #0A0A0A;
    --ink: #E9E9E6;
    --dim: rgb(233 233 230 / 0.66);
    --head: rgb(233 233 230 / 0.58);
    --line: rgb(233 233 230 / 0.10);
    --grain: url("/grain-dark.png");
    --fog:
      radial-gradient(58.88% 46.08% at -3.76% 111.44%, rgba(46,44,38,0.34) 0%, rgba(46,44,38,0.299) 22%, rgba(46,44,38,0.204) 42%, rgba(46,44,38,0.102) 60%, rgba(46,44,38,0.034) 76%, rgba(46,44,38,0) 90%),
      radial-gradient(64% 58.88% at 103.76% 3.92%, rgba(46,44,38,0.5) 0%, rgba(46,44,38,0.44) 22%, rgba(46,44,38,0.3) 42%, rgba(46,44,38,0.15) 60%, rgba(46,44,38,0.05) 76%, rgba(46,44,38,0) 90%),
      radial-gradient(84.48% 66.56% at 83.28% 103.76%, rgba(48,74,94,0.45) 0%, rgba(48,74,94,0.396) 22%, rgba(48,74,94,0.27) 42%, rgba(48,74,94,0.135) 60%, rgba(48,74,94,0.045) 76%, rgba(48,74,94,0) 90%),
      radial-gradient(71.68% 66.56% at 44.88% 52.56%, rgba(48,74,94,0.27) 0%, rgba(48,74,94,0.238) 22%, rgba(48,74,94,0.162) 42%, rgba(48,74,94,0.081) 60%, rgba(48,74,94,0.027) 76%, rgba(48,74,94,0) 90%),
      radial-gradient(99.84% 79.36% at -1.2% -3.76%, rgba(48,74,94,0.594) 0%, rgba(48,74,94,0.523) 22%, rgba(48,74,94,0.356) 42%, rgba(48,74,94,0.178) 60%, rgba(48,74,94,0.059) 76%, rgba(48,74,94,0) 90%);
  }
}

/* 中文页（SentenceType）：正文宋体 15 / 1.7；大标题 26，行高取思源宋体中粗的自然行高 1.437（比给的 1.35 高，SwiftUI 取高的）。 */
:root:lang(zh) {
  /* 中文页的双引号“”交给宋体（10-16 全站中文改用“”，主线定）：宋体排第一，它的 unicode-range 只认中文、全角标点和“”两个字，
     所以西文字母照旧落到 Charter；英文页的字体顺序不变，不会为引号去下中文字。 */
  --serif: "Gessov Serif SC", Charter, "XCharter", serif;
  --display: "Gessov Serif SC", ui-serif, "New York", Charter, "XCharter", serif;
  --body-size: 15px;  --body-lh: 1.7;   --lead: 1.97px;   /* (15×1.7 − 15×1.437) / 2 */
  --title-size: 26px; --title-lh: 1.437;
  --small-lh: 1.4;
}

/* ── 底：石膏色 + 对角雾 + 颗粒，钉在屏幕上不跟着滚（app 里底不动、字在上面滚） ── */
html {
  background: var(--base);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 颗粒：一粒 0.5px（app 的 grainCellPx 0.5pt），128 像素的图按 64px 铺。 */
  background: var(--grain) 0 0 / 64px 64px repeat, var(--fog), var(--base);
}
/* 上下各 120px 淡进石膏底色，只在 iPhone / iPad 的浏览器上（用户 10-28 选甲）：新版 Safari 把顶上状态栏、底下地址栏后面
   涂成 html 的底色（只能一种纯色），雾在边上淡进同一个颜色就没有硬接缝。电脑上不加，样子不变。盖在 body::before 的雾上、字的下面。 */
@supports (-webkit-touch-callout: none) {
  html::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(var(--base), rgb(0 0 0 / 0) 120px), linear-gradient(to top, var(--base), rgb(0 0 0 / 0) 120px); }
}

/* ── 版心：手机上左右 34（SettingType.subPad），电脑上正文栏最宽 640、居中 ── */
body {
  margin: 0;
  padding: 72px 34px 64px;
  font-family: var(--serif);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
@media (min-width: 768px) {
  body { padding-top: 120px; padding-bottom: 96px; }
}
main, footer { max-width: 640px; margin: 0 auto; }

/* 大标题（SubpageTitle）：New York 31 中粗，字距 −0.01em，下面离日期 14。 */
h1 {
  font-family: var(--display);
  font-size: var(--title-size);
  font-weight: 500;
  line-height: var(--title-lh);
  letter-spacing: -0.31px;
  margin: 0 0 14px;
}

/* 日期（SettingSmall，dateSize 12.5，淡字），下面离第一节 30（dateBelow）。 */
.updated {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: var(--small-lh);
  color: var(--dim);
  margin: 0 0 30px;
}
/* 中文版那句「以英文版为准」：app 里紧跟在日期下面（日期离它 16、它离第一节 30），同一种小字。 */
.note {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: var(--small-lh);
  color: var(--dim);
  margin: -14px 0 30px;
}

/* 节名（SettingHead）：SF 11 全大写、字距 0.12em、墨 74% / 58%；后面一条 1px 淡横线拉到版心右边，与字间 10。
   节与节 34（sectionGap），节名离正文 16（kickBelow）。 */
h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.19;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
  margin: calc(34px - var(--lead)) 0 calc(16px - var(--lead));
}
h2::after {
  content: "";
  flex: 1 1 24px;
  height: 1px;
  background: var(--line);
}
.updated + h2, .note + h2 { margin-top: 0; }
/* 中文节名（设计 `21` §3.2、§9.1 第 4 条）：苹方 12、字距 .08em，不转大写——里面的西文原样（`免费与 Full`、`gessov 不是什么`）。 */
:lang(zh) h2 { font-size: 12px; letter-spacing: 0.08em; text-transform: none; }

/* 正文（LegalParagraph）：Charter 16 / 1.5，段与段 12（paraGap）。app 里清单就是一段一段，不带圆点。 */
p, li { margin: 0 0 calc(12px - 2 * var(--lead)); overflow-wrap: break-word; }
ul { margin: 0; padding: 0; list-style: none; }

/* 链接：墨色、下划线离字 4（SettingType.underlineOffset）。 */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* 末尾署名那几行：照 app 末尾「Also at gessov.com/…」那行的样子（SettingSmall 12.5、淡字），离正文 30。 */
.contact {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
  margin-top: calc(30px - var(--lead));
}

/* 页脚：app 里没有（app 里有返回键）；网页要能互相跳，用同一种小字。 */
footer {
  margin-top: 56px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
}
footer p { margin: 0 0 6px; }
footer a { position: relative; }
footer a::after { content: ""; position: absolute; inset: -12px -4px; }

/* ── 2026-10-13 加的层次（用户：写得更详细、分段多、层次丰富）。仍守 app 的语言：只用字号、字距、留白分层，不加图标、色块。 ──
   导语＝app 联系页那种 New York 大字；数字条目＝趣刊 `?` 页「钥匙与稀有卡」那种 LedgerRow（大数字 + 小号大写名 + 一句）。 */
.lede {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  margin: 0 0 calc(30px - var(--lead));
}
.kick {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.19;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
  margin: 0 0 12px;
}
nav.toc { margin: 28px 0 44px; }
.lede + nav.toc { margin-top: 0; }
nav.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
}
@media (min-width: 640px) { nav.toc ol { columns: 2; column-gap: 32px; } }
nav.toc li {
  counter-increment: toc;
  display: flex;
  gap: 10px;
  margin: 0 0 6px;
  break-inside: avoid;
}
nav.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--head);
  min-width: 1.5em;
}
nav.toc a { text-decoration: none; position: relative; }
/* 点击区往外扩（10-16 全站体检：目录和页脚的链接只有一行小字高，手机上不好点）。用伪元素扩，排版一点不动。 */
nav.toc a::after { content: ""; position: absolute; inset: -4px -6px; }
nav.toc a:hover { text-decoration: underline; }
h2[id], h3[id] { scroll-margin-top: 28px; }

/* 小标题 h3 的样子见文件末尾（10-13 第二轮改过）。 */

ul.points li { position: relative; padding-left: 1.1em; }
ul.points li::before { content: "\2013"; position: absolute; left: 0; color: var(--head); }
ul.points { margin-bottom: calc(12px - 2 * var(--lead)); }

.ledger { margin: 4px 0 calc(20px - var(--lead)); border-top: 1px solid var(--line); }
.ledger .row {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  gap: 0 16px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
}
.ledger .num {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
}
.ledger .name {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head);
  margin: 2px 0 4px;
}
.ledger .text { margin: 0; }
:lang(zh) .ledger .name, :lang(zh) .kick { font-size: 12px; letter-spacing: 0.08em; text-transform: none; }

.fine {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}

/* ── 10-13 用户第二轮：「带横线的板块之间太挤」「小标题（如『你的设置』）比带横线的节名还重」 ──
   ① 节与节拉开：手机 60、电脑 72（原 34），节名离正文 20（原 16）；节内小标题之间收到 24，让「节」比「小标题」分得开。
   ② 小标题降一档：苹方 / SF 15 半粗（和衬线正文分开、但比 New York 18 轻得多）。用户在四种里选了这种（10-13，另三种：正文字加粗 / New York 16.5 常规 / 小号淡字）。 */
h2 { margin-top: calc(60px - var(--lead)); margin-bottom: calc(20px - var(--lead)); }
@media (min-width: 768px) { h2 { margin-top: calc(72px - var(--lead)); } }
.updated + h2, .note + h2 { margin-top: 0; }

h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  margin: calc(24px - var(--lead)) 0 calc(6px - var(--lead));
}
h2 + h3 { margin-top: 0; }