@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif&display=swap');
:root{color-scheme:light;--paper:#f5f3ed;--ink:#242b29;--muted:#5e6761;--line:#d4d8ce;--accent:#315d4e;--input:#faf9f5;--button-ink:#fff;--sans:'DM Sans',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif}
:root[data-theme=dark]{color-scheme:dark;--paper:#1c2420;--ink:#eeeede;--muted:#b1baae;--line:#414c43;--accent:#b7d6ae;--input:#233027;--button-ink:#1c2420}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,input,textarea{font:inherit}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.wrap{width:min(1080px,calc(100% - 96px));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;min-height:105px;border-bottom:1px solid var(--line)}.identity{font:italic 36px/1 Georgia,serif;letter-spacing:-3px}.identity span{color:var(--accent)}nav{display:flex;align-items:center;gap:32px;font-size:14px}nav a{padding:12px 0}.theme{border:1px solid var(--line);color:var(--ink);background:transparent;border-radius:30px;padding:8px 13px;min-height:44px;font-size:12px;cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font:400 clamp(54px,7vw,88px)/1.1 var(--serif);letter-spacing:-1.5px;margin-bottom:24px}h2{font:400 46px/1.15 var(--serif);margin-bottom:40px}h3{font-size:21px;font-weight:500;margin-bottom:12px;line-height:1.4}p{color:var(--muted)}.introduction{padding-block:100px 105px}.introduction>p{max-width:680px;margin-bottom:22px}.introduction .lead{font-size:20px;color:var(--ink);max-width:none;margin-bottom:18px}.introduction .text-link{margin-top:12px}.text-link{display:inline-flex;gap:20px;align-items:center;font-size:14px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--line)}.work{padding-block:65px 80px;border-top:1px solid var(--line)}.project-heading{display:flex;align-items:center;justify-content:space-between;gap:60px;margin-bottom:30px}.project-heading p{max-width:610px;margin-bottom:0}.project-heading>a{white-space:nowrap}.app-preview{display:block;border-radius:14px;overflow:hidden;border:1px solid #c4c0b8;background:#e7e4df}.app-preview:focus-visible{outline-offset:5px}.app-viewport{width:100%;height:490px;overflow:hidden;pointer-events:none}.app-viewport iframe{border:0;display:block;width:100%;height:100%;pointer-events:none;color-scheme:light}.caption{font-size:12px;margin:12px 0 0;color:var(--muted)}.experience{max-width:720px;margin-block:60px 30px}.experience p{margin-bottom:0}.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:100px;padding-block:75px 90px;border-top:1px solid var(--line)}.contact h2{margin-bottom:24px}.contact>div>p{max-width:300px}form label{font-size:13px;display:block;margin-bottom:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}input,textarea{display:block;width:100%;color:var(--ink);background:var(--input);border:1px solid var(--line);border-radius:3px;padding:12px;margin-top:8px;font-size:16px;outline-offset:2px}input:focus,textarea:focus{outline:2px solid var(--accent)}textarea{resize:vertical;min-height:135px}.button{border:0;padding:13px 20px;min-height:48px;border-radius:3px;background:var(--accent);color:var(--button-ink);display:inline-flex;align-items:center;gap:30px;font-size:14px;cursor:pointer}#form-status{font-size:14px;margin-top:16px}.footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-block:28px;font-size:12px;color:var(--muted)}.skip{position:absolute;top:-100px;left:16px;padding:12px;background:var(--paper);z-index:5}.skip:focus{top:12px}.project-page{padding-block:70px 100px}.project-page h1{margin-top:35px}.project-page>p{max-width:680px}.project-page .app-preview{margin-top:40px}.project-page .app-preview:not(a){pointer-events:none}.project-page h2{margin-top:60px}.project-page .text-link{margin-top:24px}
@media(max-width:800px){.wrap{width:calc(100% - 48px)}.introduction{padding-block:65px 75px}.project-heading{align-items:flex-start;gap:24px;flex-direction:column}.contact{gap:40px;grid-template-columns:1fr 1.2fr}.app-viewport{height:390px}.app-viewport iframe{width:1000px;height:520px;transform:scale(.75);transform-origin:top left}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.header{min-height:90px}nav{gap:20px;font-size:13px}h1{font-size:57px}.introduction .lead{font-size:18px}.introduction>p{font-size:15px}h2{font-size:38px;margin-bottom:30px}.work{padding-block:45px 55px}.project-heading p,.experience p,.contact p{font-size:15px}.app-viewport{height:260px}.app-viewport iframe{width:1000px;height:650px;transform:scale(.5)}.app-preview{border-radius:10px}.caption{font-size:12px!important}.experience{margin-top:45px}.contact{grid-template-columns:1fr;gap:28px;padding-block:50px 60px}.contact>div>p{max-width:none}.form-row{grid-template-columns:1fr;gap:0}.footer{font-size:11px}.project-page{padding-block:45px 70px}}
@media(max-width:380px){nav{gap:13px}.app-viewport iframe{transform:scale(.42)}.app-viewport{height:230px}h1{font-size:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.intro-links{display:flex;align-items:center;flex-wrap:wrap;gap:18px 32px;margin-top:32px}.introduction .intro-links .text-link{margin-top:0}.social-links{display:flex;align-items:center;gap:24px}.social-links a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--accent);font-size:14px}.social-links svg{width:22px;height:22px;fill:currentColor;flex:none}.social-links a:hover span{text-decoration:underline;text-underline-offset:5px}.work .experience{margin:0 0 55px;max-width:720px}
