@charset "UTF-8";
:root{color-scheme:light;--background:#f8faff;--ink:#142642;--blue:#1b4dd8;--secondary:#53657f;--rule:#dce4f0;--page-width:1060px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px}
body{margin:0;background:var(--background);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--blue);outline-offset:7px;border-radius:2px}
::selection{background:#d5e3ff;color:#142642}
.page{max-width:var(--page-width);padding:0 48px;margin:0 auto}
.skip-link{position:fixed;top:12px;left:12px;z-index:10;background:var(--ink);color:white;padding:14px 20px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.site-header{min-height:132px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.wordmark{font-size:27px;font-weight:800;letter-spacing:-1.6px;line-height:1.2;color:var(--blue);display:inline-block}
nav{display:flex;gap:30px;font-size:14px;line-height:1.5}
nav a{padding:12px 0;color:var(--secondary);transition:color .15s}
nav a:hover{color:var(--blue)}
p,h1,h2,h3{margin:0}
.intro{padding:78px 0 108px;max-width:850px}
.intro-name{font-size:18px;line-height:1.6;margin-bottom:24px;color:var(--secondary)}
h1{font-size:clamp(48px,6.7vw,76px);letter-spacing:-.055em;line-height:1.08;font-weight:600}
h1 span{color:var(--blue)}
.intro-copy{max-width:600px;margin-top:40px;font-size:19px;line-height:1.7;letter-spacing:-.015em}
.intro-copy p:first-child{color:var(--ink);margin-bottom:8px}
.intro-copy p:last-child{color:var(--secondary)}
.projects{padding-bottom:64px}
.projects>h2{font-size:17px;line-height:1.5;font-weight:400;color:var(--secondary);padding-bottom:24px}
.project{display:grid;grid-template-columns:1fr 1fr;gap:72px;border-top:1px solid var(--rule);padding:44px 0 48px}
.project:last-child{border-bottom:1px solid var(--rule)}
h3{font-size:clamp(27px,3.1vw,35px);font-weight:500;line-height:1.2;letter-spacing:-.04em}
.project-copy p{font-size:17px;line-height:1.8;color:var(--secondary);max-width:420px}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:4px 0 44px}
.site-footer .wordmark{font-size:23px}
.site-footer p{font-size:13px;line-height:1.5;color:var(--secondary)}
@media(max-width:700px){.page{padding:0 28px}.site-header{min-height:104px}.intro{padding:54px 0 76px}.intro-copy{font-size:18px;margin-top:30px}.project{gap:36px;padding:34px 0}.project-copy p{font-size:16px}.projects{padding-bottom:40px}.site-footer{padding-bottom:32px}}
@media(max-width:480px){.page{padding:0 24px}.site-header{min-height:94px;gap:20px}.wordmark{font-size:25px}nav{gap:20px;font-size:14px}.intro{padding:44px 0 64px}.intro-name{font-size:16px;margin-bottom:22px}h1{font-size:clamp(39px,10.4vw,50px);letter-spacing:-.055em}.intro-copy{font-size:17px;line-height:1.75;margin-top:28px}.project{grid-template-columns:1fr;gap:18px;padding:30px 0 34px}h3{font-size:29px}.project-copy p{max-width:none}.site-footer .wordmark{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

[hidden]{display:none!important}
.stream{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,1.5fr);gap:48px;align-items:center;margin:0 0 88px;padding-top:4px}
.stream-copy h2{font-size:27px;font-weight:500;letter-spacing:-.035em;line-height:1.25;margin-bottom:16px}
.stream-copy p{font-size:16px;line-height:1.75;color:var(--secondary);margin-bottom:20px}
.inline-link{color:var(--blue);text-decoration:underline;text-decoration-color:#afc2f2;text-underline-offset:5px;line-height:1.6}
.inline-link:hover{text-decoration-color:var(--blue)}
.stream-view{min-width:0}.twitch-player{width:100%;min-height:300px;aspect-ratio:16/9;background:#edf2fa;border-radius:8px;overflow:hidden}.twitch-player iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
.stream-fallback{padding:32px;border:1px solid var(--rule);border-radius:8px;font-size:16px;line-height:1.75;color:var(--secondary)}
.github-note{font-size:16px;line-height:1.75;color:var(--secondary);border-top:1px solid var(--rule);padding-top:24px}
@media(max-width:800px){.stream{grid-template-columns:1fr;gap:24px;margin-bottom:64px}.twitch-player{max-width:640px}}
@media(max-width:480px){.site-header{flex-wrap:wrap;gap:10px;padding:26px 0}nav{gap:16px}.stream{margin-bottom:54px}.stream-copy h2{font-size:26px}.stream-fallback{padding:24px}}

.twitch-viewport{width:100%;overflow-x:auto;border-radius:8px;background:#edf2fa}
.twitch-player{min-width:400px;height:max(300px,30vw);max-height:360px;aspect-ratio:auto;border-radius:0}
.twitch-player iframe{min-width:400px;height:100%;min-height:300px}
@media(max-width:800px){.twitch-player{height:360px;max-width:none}}
@media(max-width:480px){.twitch-player{height:300px}.stream-view{margin-inline:-12px}}

#github-link{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}.github-icon{width:20px;height:20px;flex:none}

.social-link,#github-link{display:inline-flex;align-items:center;justify-content:center;gap:0;width:44px;height:44px;padding:10px;color:var(--blue);border-radius:8px;text-decoration:none;vertical-align:middle;flex-shrink:0;transition:background-color .15s}
.social-link:hover,#github-link:hover{background:#e8efff}
.social-link svg{width:24px;height:24px;display:block;flex:none}
nav{align-items:center}nav .social-link{padding:10px}
.github-note{display:flex;align-items:center;justify-content:space-between;gap:20px}

.intro .hero-wordmark{display:block;font-size:clamp(64px,12vw,132px);font-weight:800;letter-spacing:-.069565em;line-height:1.1;color:var(--blue)}

.site-header{flex-wrap:wrap;column-gap:28px;row-gap:12px}.site-header nav{margin-left:auto}
.language-switch{display:flex;gap:2px;border-left:1px solid var(--rule);padding-left:16px}.language-switch button{font:inherit;font-size:13px;min-width:38px;min-height:44px;border:0;background:transparent;color:var(--secondary);border-radius:6px;cursor:pointer}.language-switch button[aria-pressed="true"]{color:var(--blue);background:#e8efff}
button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button.social-link{border:0;background:transparent;cursor:pointer}button.social-link:hover{background:#e8efff}
.contact-section{border-top:1px solid var(--rule);padding:30px 0 34px}.contact-section h2{font-size:17px;font-weight:400;color:var(--secondary)}.contact-icons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 22px;margin-top:18px}.copy-status{font-size:14px;line-height:1.6;color:var(--secondary);margin-top:10px;min-height:23px;text-align:center}
@media(max-width:600px){.site-header{padding-top:24px;padding-bottom:16px;gap:8px 18px}.site-header nav{gap:12px}.language-switch{margin-left:auto}}

.contact-icons .social-link{width:auto;min-width:44px;justify-content:flex-start;gap:10px;padding-right:14px}.contact-icons .social-link svg{flex:none}.contact-icon{width:24px;height:24px;display:block}.contact-handle{color:#9aa8ba;font-size:16px;line-height:1.4;font-weight:400;white-space:nowrap}.contact-icons button.social-link{color:var(--blue)}
