/* 跟 app 同一张纸：黑底，上面摊一张泛黄的旧纸，褐色的墨，衬线。

   **不跟随系统深浅色。** 这跟原先那版白底黑字正相反，理由也正是那一版缺的：
   这一页画的不是一个界面，是一件东西。一张旧纸在灯下和在暗处是同一张纸，
   它不会因为访客的系统偏好切成浅色就变白。跟随了反而露馅 —— 纸会泛白，
   黑底会变灰底，而商店页、app 里、这里，看见的本该是同一张纸。

   色值直接抄自 Palette.swift 那一组，一个都不另配。 */
:root {
  color-scheme: dark;
  --night: #000;
  --paper: #e9dbb4;
  --paper-edge: #d4c398;
  --ink: #2e2419;
  --ink-2: #60513d;
  --ink-3: #87775f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  /* ui-serif 在 Apple 平台上就是 New York —— app 里用的那一款。
     其它平台退到 Georgia，它的字重和字宽最接近。 */
  font: 17px/1.62 ui-serif, "New York", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

/* 纸外面那圈黑上只有导航。它不在纸上 —— 桌面上的东西不该印在信纸里。 */
nav {
  max-width: 46rem;
  margin: 0 auto;
  padding: 26px 22px 0;
  display: flex;
  align-items: baseline;
  gap: 22px;
  font-size: 15px;
}
nav .mark {
  font-weight: 700;
  font-size: 19px;
  margin-right: auto;
  color: var(--paper);
}
nav a { color: rgba(233, 219, 180, 0.52); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--paper); }

/* 正文就是那张纸。
   圆角很小：切得太圆就成了卡片，纸就是纸，边是近乎直的。 */
main {
  position: relative;
  max-width: 46rem;
  margin: 26px auto 90px;
  padding: 64px 52px 72px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 4px;
}

/* 泛黄不匀。三片位置不同的暗区叠在一起，谁也看不出规律 ——
   规律才是假的那一眼。跟 PaperSheet.swift 里是同一套。 */
main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(60% 34% at 12% 4%, rgba(212, 195, 152, 0.62), transparent 70%),
    radial-gradient(52% 30% at 92% 62%, rgba(212, 195, 152, 0.5), transparent 70%),
    radial-gradient(70% 26% at 52% 101%, rgba(212, 195, 152, 0.42), transparent 70%);
}
/* 四边压暗，上深下浅 —— 跟 PaperSheet.swift 里那圈描边是同一件事：
   从褐渐到黄，是纸该有的样子。

   **没有投影。** 一开始这里有一道 0 8px 34px 的黑影，是照着 app 早期那版抄的；
   那一版后来整个删掉了 —— 一叠贴着的纸中间没有空隙，也就没有投影可言，
   有投影的是悬在半空的东西。何况这张纸铺在纯黑上，黑影压黑底本来也看不见。

   CSS 的 border 和 inset box-shadow 都不接受渐变，所以用这个办法：一块渐变
   铺满，再用两层 mask 相减，只留下 1.5px 的那一圈。 */
main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(
    to bottom,
    rgba(212, 195, 152, 0.9),
    rgba(212, 195, 152, 0.55)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
main > * { position: relative; }

h1 {
  font-size: 40px;
  line-height: 1.16;
  margin: 0 0 10px;
  color: var(--ink);
}
.lede {
  font-size: 19px;
  color: var(--ink-2);
  margin: 0 0 48px;
}

h2 {
  font-size: 21px;
  margin: 48px 0 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(96, 81, 61, 0.22);
  color: var(--ink);
}
h2:first-of-type { border-top: 0; padding-top: 0; }

p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding-left: 1.15em; }
li { margin-bottom: 7px; }

a { color: var(--ink); text-underline-offset: 3px; }

strong { font-weight: 680; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  /* 代码块在纸上是一块压进去的深色 —— 比纸暗，但仍是纸的色系。
     直接用灰的话，灰在黄纸上是脏的。 */
  background: rgba(212, 195, 152, 0.7);
  padding: 1px 5px;
  border-radius: 4px;
}

.stamp {
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid rgba(96, 81, 61, 0.22);
  color: var(--ink-3);
  font-size: 13px;
}

/* 「什么都不收集」那张表：与其写一段辩解，不如把每一项列出来打叉。 */
.ledger { margin: 0 0 16px; }
.ledger div {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(96, 81, 61, 0.2);
  font-size: 16px;
}
.ledger div:first-child { border-top: 1px solid rgba(96, 81, 61, 0.2); }
.ledger span:first-child { flex: 1; color: var(--ink-2); }
.ledger span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 窄屏上纸要占满，两边留白收掉 —— 手机上一张浮在中间的小纸片没有意义，
   而正文宽度才是这一页真正要给的东西。 */
@media (max-width: 600px) {
  main {
    margin: 18px 12px 60px;
    padding: 40px 26px 52px;
  }
  h1 { font-size: 32px; }
  .lede { font-size: 18px; margin-bottom: 36px; }
}