:root { --ink: #1c2430; --muted: #5d6876; --line: #dce1e7; --accent: #2b5c9e; }
* { box-sizing: border-box; }
html { background: #fff; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.55 "Public Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 680px; margin: 0 auto; padding: 72px 20px 96px; }
h1 { font-size: 34px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.015em; }
header p { margin: 0 0 48px; color: var(--muted); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.projects li { border-bottom: 1px solid var(--line); padding: 22px 0; }
.projects a { text-decoration: none; color: inherit; display: block; }
.projects h2 { font-size: 20px; margin: 0 0 4px; color: var(--accent); }
.projects a:hover h2 { text-decoration: underline; }
.projects p { margin: 0; max-width: 60ch; }
.meta { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) { main { padding-top: 40px; } h1 { font-size: 28px; } }