@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Instrument+Serif:italic&display=swap";:root{--bg:#fff;--text:#111;--accent:#ff4d00;--border:#e5e5e5;--font-main:"Space Grotesk", sans-serif;--font-serif:"Instrument Serif", serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font-main);-webkit-font-smoothing:antialiased;line-height:1.5}body:before{content:"";z-index:-1;opacity:.5;background-image:radial-gradient(#e5e5e5 1px,#0000 1px);background-size:30px 30px;width:100%;height:100%;position:fixed;top:0;left:0}section{max-width:900px;margin:0 auto;padding:120px 10%}.section-title{text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:2rem;font-size:1rem;font-weight:700}nav{z-index:1000;background:#ffffffe6;justify-content:space-between;align-items:center;width:100%;padding:30px 10%;display:flex;position:fixed;top:0}.logo{letter-spacing:-.5px;font-size:1.2rem;font-weight:700}.nav-links{gap:40px;display:flex}.nav-links a{color:var(--text);font-size:.9rem;font-weight:500;text-decoration:none;position:relative}.nav-links a:after{content:"";background-color:var(--accent);width:0;height:1px;transition:width .3s;position:absolute;bottom:-2px;left:0}.nav-links a:hover:after{width:100%}.hero h1{font-family:var(--font-serif);letter-spacing:-2px;margin-bottom:40px;font-size:clamp(4rem,12vw,8rem);font-weight:400;line-height:.85}.hero p{color:#444;max-width:500px;font-size:1.4rem}.project-list{flex-direction:column;gap:60px;display:flex}.project-item{grid-template-columns:1fr 1fr;align-items:center;gap:40px;display:grid}.project-img{border:1px solid var(--border);filter:grayscale();width:100%;transition:all .4s}.project-item:hover .project-img{filter:grayscale(0%);border-color:var(--accent)}.project-info h3{font-family:var(--font-serif);margin-bottom:10px;font-size:2.5rem;font-weight:400}.skills-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.skill-box{border:1px solid var(--border);padding:20px;font-weight:500}.skill-box span{color:var(--accent);margin-bottom:5px;font-size:.8rem;display:block}.btn-main{background:var(--text);color:#fff;padding:15px 30px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-block}.btn-main:hover{background:var(--accent)}@media (width<=768px){.nav-links{display:none}.project-item{grid-template-columns:1fr}.hero h1{font-size:4rem}section{padding:80px 5%}}