/* Root / variables */
:root{
  --maxw:700px;
  --bg: #fff;
  --text: #111;
  --muted: #666;
  --accent: #111;
  --card: #f8f8fa;
  --radius: 10px;
  --gap: 1rem;
}

/* Basic reset & typography */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:40px auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  max-width:var(--maxw);
  padding:0 1rem;
}

/* Skip link */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 0;
  top: 8px;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index:1000;
}

/* Header */
.site-header{background:#fff; margin-bottom:18px}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.brand{font-weight:700;font-size:1.1rem}
#nav-toggle{display:none;background:transparent;border:0;font-size:1.2rem}

/* Nav */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem}
.nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:6px}
.nav a:hover, .nav a:focus{color:var(--accent);outline:none}

/* Hero */
.hero h1{font-size:2rem;margin:0}
.tagline{color:var(--muted);margin-top:6px;font-weight:500}
.lead{margin-top:12px;color:var(--text)}

/* buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* sections */
.section{margin-top:1.4rem}
.section h2{font-size:1.15rem;margin-bottom:0.6rem}
.project-grid{display:grid;gap:var(--gap)}

/* Form */
.contact-form{display:grid;gap:8px;max-width:520px}
input,textarea{padding:8px;border:1px solid #e8e8ee;border-radius:6px}

/* footer */
.site-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #eee;color:var(--muted);text-align:center}

/* Responsive: show nav toggle on small screens */
@media (max-width:700px){
  #nav-toggle{display:block}
  .nav{display:none}
  .nav.open{display:block; position: absolute; right: 1rem; top: 64px; background:#fff; padding:8px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.08)}
  .nav ul{flex-direction:column; gap:0.25rem}
}