/* The privacy policy and terms (privacy.html, terms.html): the site's colours and fonts, made for reading. */
:root {
  color-scheme: light;
  --ground: #f4f7f7;
  --surface: #ffffff;
  --ink: #0d1a20;
  --ink-2: #3b4c52;
  --muted: #62757a;
  --line: #d4dfdd;
  --brand: #0f766e;
  --brand-soft: #d5f3ee;
  --focus: #00a2e8;
  --display: "Anuphan", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #081114;
    --surface: #0f1b1f;
    --ink: #e6f0ee;
    --ink-2: #b6c8c4;
    --muted: #87a09c;
    --line: #20323a;
    --brand: #2bb3a4;
    --brand-soft: #0f302c;
    --focus: #5eead4;
  }
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; color: var(--ink); font: 400 17px/1.7 var(--body); -webkit-text-size-adjust: 100%; }
a { color: var(--brand); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
header.bar { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; padding: 18px 16px; }
header.bar .home { display: inline-flex; align-items: center; gap: 10px; font: 700 18px var(--display); color: var(--ink); text-decoration: none; }
header.bar .spacer { flex: 1; }
header.bar nav { display: flex; gap: 6px; }
header.bar nav a, header.bar button {
  font: 500 15px var(--body); color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; text-decoration: none; cursor: pointer;
}
header.bar nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
main { max-width: 820px; margin: 0 auto 64px; padding: 8px 16px 0; }
article { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 5vw, 44px); }
article[hidden] { display: none; }
h1 { font: 700 clamp(28px, 5vw, 38px)/1.2 var(--display); margin: 0 0 6px; }
h2 { font: 600 21px/1.35 var(--display); margin: 32px 0 8px; }
.updated { color: var(--muted); margin: 0 0 20px; }
.summary { background: var(--brand-soft); border-radius: 12px; padding: 14px 18px 14px 34px; margin: 0 0 8px; }
li { margin: 4px 0; }
p, ul { margin: 0 0 12px; }
dl.who { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
dl.who dt { color: var(--muted); }
dl.who dd { margin: 0; }
footer { max-width: 820px; margin: 0 auto 40px; padding: 0 16px; color: var(--muted); font-size: 14px; }