/* Simple, clean styles for a professional minimal site */
:root{
  --max-width: 980px;
  --accent: #0b79d0;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f7f7fb;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.5;color:#111;background:var(--bg);margin:0}
.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{border-bottom:1px solid #e6e6ee;background:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand h1{margin:0;font-size:1.1rem}
.role{margin:0;color:var(--muted);font-size:0.9rem}
.main-nav a{margin-left:18px;color:var(--muted);text-decoration:none}
.main-nav a.active, .main-nav a:hover{color:var(--accent)}
.hero{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start;padding:36px 0}
.hero h2{margin:0 0 8px 0}
.lede{color:var(--muted);max-width:60ch}
.hero-meta{background:var(--card);padding:14px;border-radius:8px}
.contact-list{list-style:none;padding:0;margin:0;color:var(--muted)}
.contact-list li{margin-bottom:6px}
.btn{display:inline-block;padding:10px 14px;background:var(--accent);color:#fff;border-radius:6px;text-decoration:none;margin-right:8px}
.btn.ghost{background:transparent;border:1px solid #d0d8e6;color:var(--accent)}
.resume h3, .projects-preview h3{margin-top:28px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:12px}
.card{background:#fff;border:1px solid #eef0f6;padding:16px;border-radius:8px}
.card h4{margin:0 0 8px}
.tags{color:var(--muted);font-size:0.9rem}
.links a{color:var(--accent);text-decoration:none}
.site-footer{border-top:1px solid #eef0f6;padding:18px 0;margin-top:36px;color:var(--muted)}

@media (max-width:720px){
  .hero{grid-template-columns:1fr;}
  .header-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .main-nav a{margin-left:0;margin-right:12px}
  .two-col{grid-template-columns:1fr}
}

/* Contact form styles */
.contact-form{max-width:640px;background:transparent;padding:6px;border-radius:6px}
.contact-form .form-row{display:block;margin-bottom:12px}
.contact-form label{display:block;font-weight:600;margin-bottom:6px}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{width:100%;padding:10px;border:1px solid #e6e9f0;border-radius:6px;font-size:1rem}
.contact-form textarea{resize:vertical}
.contact-form .btn{padding:10px 16px}