:root {
  --navy: #030F24; --blue: #0D3B70; --teal: #9BEDFD; --yellow: #E6C427;
  --ink: #0d1b2a; --muted: #5b6b7d; --line: #e6ecf3; --bg: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.65 Georgia, "Times New Roman", serif; color: var(--ink); background: var(--bg); }
a { color: var(--blue); }

.top { background: var(--navy); padding: 16px 20px; }
.brand { color: #fff; font: 800 20px/1 -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .3px; text-decoration: none; }
.brand::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 2px; background: var(--teal); }

.wrap { max-width: 720px; margin: 0 auto; padding: 28px 18px 48px; }
h1 { font: 800 30px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0 0 20px; color: var(--navy); }

.item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.item h2 { font: 700 22px/1.25 -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0 0 6px; }
.item h2 a { text-decoration: none; color: var(--navy); }
.item h2 a:hover { color: var(--blue); }
.lead { margin: 6px 0; }
.meta { color: var(--muted); font: 13px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }

.full h1 { margin-bottom: 8px; }
.full .lead { font-size: 19px; font-weight: 600; color: #223; }
.full .body { margin: 18px 0; }
.full .body h2, .full .body h3 { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--navy); }
.back { font: 13px -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; }
.source { margin-top: 24px; padding-top: 14px; border-top: 2px solid var(--yellow);
  font: 14px -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--muted); }

.empty { color: var(--muted); text-align: center; padding: 50px 0; }
.foot { max-width: 720px; margin: 0 auto; padding: 24px 18px; color: var(--muted);
  font: 13px -apple-system, "Segoe UI", Roboto, sans-serif; border-top: 1px solid var(--line); }