@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

:root {
  --surface: #ffffff;
  --ink: #121212;
  --muted: #5c5c5c;
  --rule: #e2e2e2;
  --red: #dc0103;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121212;
    --ink: #f2f2f2;
    --muted: #a8a8a8;
    --rule: #333333;
  }
}
* { box-sizing: border-box; }
html { background: var(--surface); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 18px/1.6 "Source Serif 4", Georgia, serif;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 64px; }
header {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 0; border-bottom: 1px solid var(--rule); margin-bottom: 32px;
}
.mark {
  width: 40px; height: 40px; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 26px/1 "Source Serif 4", Georgia, serif; text-decoration: none;
}
.brand { font: 600 20px/1.2 "Source Serif 4", Georgia, serif; color: var(--ink); text-decoration: none; }
nav { margin-left: auto; font: 400 14px/1 "Libre Franklin", Arial, sans-serif; }
nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
nav a:hover { color: var(--red); }
h1 { font-size: 36px; line-height: 1.2; margin: 0 0 8px; }
h1::before { content: ""; display: block; width: 48px; height: 4px; background: var(--red); margin-bottom: 16px; }
h2 { font-size: 22px; margin: 32px 0 8px; }
.meta { font: 400 14px/1.4 "Libre Franklin", Arial, sans-serif; color: var(--muted); margin-bottom: 24px; }
a { color: var(--red); }
footer {
  border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 16px;
  font: 400 13px/1.5 "Libre Franklin", Arial, sans-serif; color: var(--muted);
}
@media (max-width: 480px) {
  nav a { margin-left: 10px; }
  h1 { font-size: 28px; }
}