@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
:root { --bg: #fcfcfb; --text: #1d1d1b; --muted: #7a7a76; --rule: #c5c2bd; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not(.home):not([data-theme="light"]) { --bg: #161615; --text: #ecebe7; --muted: #9a9892; --rule: #4a4844; color-scheme: dark; }
}
:root:not(.home)[data-theme="dark"] { --bg: #161615; --text: #ecebe7; --muted: #9a9892; --rule: #4a4844; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.7 Inter, -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
main { max-width: 720px; margin: 0 auto; padding: 5rem 2rem 6rem; }
.home main { padding-top: 8.5rem; }
.topbar { display: flex; justify-content: flex-end; margin-bottom: 2rem; }
.theme-toggle { font: inherit; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.2rem 0.7rem; cursor: pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text); border-color: var(--text); }
.headshot { display: block; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-bottom: 2rem; }
h1 { font: 600 2.2rem/1.2 'Source Serif 4', Georgia, serif; letter-spacing: -0.015em; margin: 0 0 1.5rem; }
.bio { margin: 0 0 2rem; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--rule); }
a:hover, a:focus-visible { text-decoration-color: var(--text); }
.links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.9rem; }
.samples { padding-left: 1.2rem; }
@media (max-width: 680px) { body { font-size: 17px; } main { padding: 3rem 1.5rem 4rem; } .home main { padding-top: 6.5rem; } .headshot { width: 128px; height: 128px; } h1 { font-size: 2rem; } }