:root {
  --bg: #E9ECEA; --surface: #FBFCFB; --ink: #16211E; --ink2: #3A4A45;
  --muted: #6B7A75; --rule: #CBD3CF; --accent: #1F7A90;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121816; --surface: #1A2220; --ink: #E7EDEA; --ink2: #BDC8C4;
    --muted: #8A9793; --rule: #2C3835; --accent: #57B3C6;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink2);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 46px 22px 80px; }
header { border-bottom: 2px solid var(--ink); padding-bottom: 18px; margin-bottom: 34px; }
.brand {
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
h1 { font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--ink); margin: 10px 0 6px; }
.date { font: 13px/1 system-ui, sans-serif; color: var(--muted); }
h2 {
  font: 700 12px/1.3 system-ui, sans-serif; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); margin: 38px 0 10px;
}
p, li { max-width: 64ch; }
ul { padding-left: 20px; }
li { margin-bottom: 7px; }
b { color: var(--ink); font-weight: 600; }
a { color: var(--accent); }
.note {
  background: var(--surface); border-left: 3px solid var(--accent);
  padding: 14px 18px; margin: 22px 0;
}
.note p { margin: 0; }
footer {
  margin-top: 54px; padding-top: 16px; border-top: 1px solid var(--rule);
  font: 13px/1.6 system-ui, sans-serif; color: var(--muted);
}