:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202125; background: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 17px; line-height: 1.6; }
main { width: min(760px, calc(100% - 48px)); margin: 0 auto; }
.intro { padding: clamp(64px, 12vh, 120px) 0 64px; }
.label { margin: 0 0 20px; color: #64666e; font-size: 14px; letter-spacing: .06em; }
h1 { margin: 0; font-size: clamp(36px, 6vw, 56px); line-height: 1.12; letter-spacing: -.045em; font-weight: 650; }
h1 span { color: #a86612; }
.bio { margin: 24px 0 12px; color: #555861; }
a { color: inherit; text-underline-offset: 4px; }
.contact { font-size: 16px; overflow-wrap: anywhere; }
h2 { margin: 0 0 16px; font-size: 15px; font-weight: 550; color: #64666e; }
.project { display: flex; align-items: center; gap: 24px; padding: 28px 0; border-top: 1px solid #dcdde0; border-bottom: 1px solid #dcdde0; text-decoration: none; }
.project img { flex: 0 0 72px; object-fit: contain; }
.project-copy { min-width: 0; flex: 1; }
h3 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 4px; font-weight: 600; }
.project p { margin: 0 0 8px; color: #555861; }
.platforms { font-size: 14px; color: #64666e; }
.arrow { font-size: 24px; color: #64666e; }
.project:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid #a86612; outline-offset: 7px; border-radius: 3px; }
footer { padding: 48px 0 32px; color: #64666e; font-size: 14px; }
@media (max-width: 480px) { .intro { padding-bottom: 48px; } .project { gap: 16px; } .project img { width: 52px; height: 52px; flex-basis: 52px; } .arrow { display: none; } }