:root{
  --bg: #000000;
  --text: #ffffff;
  --muted: #9aa0a6;
  --accent: #1db954;
  --container-width: 1000px;
  --font-stack: "Playfair Display", Georgia, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: var(--font-stack);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:2rem 1rem;
}

main.centered{
  min-height:calc(100vh - 48px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem 1rem;
}

.hero.concise{ text-align:center; max-width:720px; padding:1rem }
.hero.concise .tagline{ color:var(--muted); margin-top:.5rem; margin-bottom:1rem }
.hero.concise .meta{ margin-top:1rem }

/* Header / nav */
.site-header{border-bottom:1px solid rgba(255,255,255,0.04)}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{color:var(--text);text-decoration:none;font-weight:700;font-size:1.05rem}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links a:hover,.nav-links a:focus{color:var(--text);outline: none}

/* Hero */
.hero{padding:6rem 0 4rem}
.hero h1{font-size:clamp(2rem,4.5vw,3.6rem);margin:0 0 .5rem}
.accent{color:var(--accent)}
.tagline{color:var(--muted);margin:0 0 1.25rem}
.cta{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border:1px solid rgba(255,255,255,.08);color:var(--text);text-decoration:none;border-radius:6px}
.cta:hover,.cta:focus{background:rgba(255,255,255,0.02);box-shadow:0 4px 18px rgba(0,0,0,0.5)}
.cta svg{width:18px;height:18px;display:block;fill:currentColor}

/* Social icons beside contact/email */
.social-icons{display:inline-flex;align-items:center;gap:.5rem;margin-left:.75rem}
.social-icon{color:var(--text);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,0.04)}
.social-icon:hover,.social-icon:focus{background:rgba(255,255,255,0.04);outline:none}
.social-icon svg{width:18px;height:18px;fill:currentColor;display:block}


/* Sections */
section{padding:2rem 0}
h2{margin-top:0}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 .5rem}
.card p{margin:0;color:var(--muted)}
.card a{color:var(--accent);text-decoration:none}

.contact a{color:var(--accent)}

.site-footer{border-top:1px solid rgba(255,255,255,0.04);padding:1.5rem 0;color:var(--muted);font-size:.9rem}

a:focus{outline:3px solid rgba(29,185,84,0.15);outline-offset:3px}
button:focus{outline:3px solid rgba(29,185,84,0.15);outline-offset:3px}

/* Small screens */
@media (max-width:640px){
  .nav-links{display:none}
  .nav-toggle{display:inline-block;background:none;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:.35rem .6rem;border-radius:6px}
  .hero{padding-top:4rem;padding-bottom:2.25rem}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}