:root { color-scheme:light dark; --bg:light-dark(#f7f7f5,#101214); --surface:light-dark(#fff,#181b1e); --text:light-dark(#17191b,#f0f2f3); --muted:light-dark(#656a6f,#a5acb1); --line:light-dark(#dfe1e2,#30353a); --accent:light-dark(#1769aa,#64a9df); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-size:16px; line-height:1.55; }
a { color:inherit; text-underline-offset:.2em; }
.skip { position:absolute; left:-999px; top:0; } .skip:focus { left:1rem; top:1rem; padding:.6rem 1rem; background:var(--surface); z-index:50; }
.site-header,main,footer { width:min(1040px,calc(100% - 40px)); margin-inline:auto; }
.site-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.name { font-weight:750; text-decoration:none; letter-spacing:-.02em; }
nav { display:flex; gap:22px; } nav a { color:var(--muted); font-size:.9rem; text-decoration:none; } nav a:hover { color:var(--text); }
.intro { max-width:760px; padding:92px 0 84px; }
.label,.meta { color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:12px 0 20px; font-size:clamp(2.8rem,7vw,5.4rem); line-height:.98; letter-spacing:-.055em; }
.intro>p:last-child { max-width:650px; margin:0; color:var(--muted); font-size:1.18rem; }
.section { padding:55px 0 80px; border-top:1px solid var(--line); }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:26px; }
.section-title h2 { margin:0; font-size:1.6rem; letter-spacing:-.025em; } .section-title>a,.section-title>span { color:var(--muted); font-size:.88rem; }
.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.project { min-height:230px; display:flex; flex-direction:column; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.project.featured { border-top:3px solid var(--accent); }
.project h3 { margin:12px 0 8px; font-size:1.28rem; letter-spacing:-.025em; } .project h3 a { text-decoration:none; }
.project p { margin:0; color:var(--muted); }
.links { display:flex; gap:16px; margin-top:auto; padding-top:22px; } .links a { color:var(--accent); font-size:.88rem; font-weight:650; text-decoration:none; }
.works { border-top:1px solid var(--line); }
.works>a { display:grid; grid-template-columns:minmax(240px,.85fr) 1.15fr; gap:26px; padding:19px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.works>a:hover strong { color:var(--accent); } .works strong { letter-spacing:-.01em; } .works span { color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:20px; padding:30px 0 48px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
@media (max-width:700px) { .intro{padding:68px 0 60px}.projects{grid-template-columns:1fr}.works>a{grid-template-columns:1fr;gap:5px}.section-title{align-items:flex-start;flex-direction:column;gap:7px}.project{min-height:210px} }
@media (max-width:460px) { .site-header{align-items:flex-start;padding:20px 0}.site-header nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}.site-header,main,footer{width:min(100% - 28px,1040px)}footer{flex-direction:column} }