/* Shared by every public page. Role sizes use rem so text preferences are respected. */
:root {
  color-scheme: light;
  --ink: #111;
  --body: #333;
  --secondary: #666;
  --quiet: #767676;
  --icon: #8c8c8c;
  --bracket: #bfbfbf;
  --underline: rgb(0 0 0 / 15%);
  --line: #dedede;
  --paper: #f6f7f8;

  /* Chinese-first serif titles; native sans for continuous reading and navigation. */
  --serif: "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", SimSun, ui-serif, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;

  --text-page: 1.75rem;
  --text-section: 1.375rem;
  --text-title: 1.125rem;
  --text-body: 1rem;
  --text-summary: .9375rem;
  --text-meta: .875rem;
  --text-small: .8125rem;
  --text-xs: .75rem;
}

html { font-size: 100%; letter-spacing: normal; word-spacing: normal; }
body { font: 400 var(--text-body)/1.8 var(--sans); color: var(--body); }
:where(h1, h2, h3, h4) { color: var(--ink); overflow-wrap: break-word; }
:where(h1) { font: 400 var(--text-page)/1.4 var(--serif); }
:where(h2) { font: 400 var(--text-section)/1.5 var(--serif); }
:where(h3) { font: 400 var(--text-title)/1.5 var(--serif); }
:where(h4) { font: 600 var(--text-body)/1.7 var(--sans); }
strong, b { font-weight: 600; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--underline);
  text-underline-offset: 2.5px;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}