:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #102438; color: #f6f3eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(42rem, calc(100% - 3rem)); padding: 3rem 0; }
.eyebrow { color: #9ed3c8; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; margin: .25rem 0 1rem; }
.intro { color: #c9d6df; font-size: 1.125rem; max-width: 38rem; }
h2 { margin-top: 3rem; font-size: 1.1rem; }
.project-card { display: grid; gap: .3rem; margin-top: .75rem; padding: 1.2rem; color: inherit; text-decoration: none; border: 1px solid #669aae; border-radius: .8rem; background: #17354f; }
.project-card:hover, .project-card:focus-visible { background: #204662; outline: 3px solid #9ed3c8; outline-offset: 3px; }
.project-card span { font-size: 1.3rem; font-weight: 800; }
.project-card small { color: #c9d6df; }