*{box-sizing:border-box}
/* Light color palette */
:root{
  --bg: #f8fafc; /* very light gray */
  --card: #ffffff; /* white cards */
  --muted: #475569; /* slate-600 */
  --accent: #2563eb; /* blue-600 */
  --glass: rgba(2,6,23,0.03);
  --border: rgba(15,23,42,0.06);
  --text: #0f1724; /* dark text */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.site-header{
  background: var(--card);
  border-bottom:1px solid var(--border);
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
  padding: 0.25rem 0; /* tighter header */
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;color:var(--accent);text-decoration:none;font-size:1.25rem}
.nav a{color:var(--muted);text-decoration:none;margin-left:1rem}

.hero{padding:1.25rem 0 0.5rem} /* reduce top spacing so hero sits closer to header */
.hero + .section{margin-top:0}
.hero-inner{display:flex;gap:1.5rem;align-items:center}
.avatar{width:96px;height:96px;border-radius:12px;border:1px solid var(--border);background:var(--glass);padding:8px}
h1{margin:0;font-size:1.9rem}
.lead{color:var(--muted);margin-top:0.4rem}
.cta{margin-top:1rem}
.btn{display:inline-block;padding:0.55rem 0.9rem;border-radius:8px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),#4f46e5);color:white}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--muted);margin-left:0.6rem}

/* Social icons */
.social{display:flex;gap:0.6rem;margin-top:1rem}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.02);color:var(--muted);text-decoration:none}
.social-link svg{width:18px;height:18px}
.social-link:hover{transform:translateY(-3px);color:var(--accent)}

/* small meta text used for dates/tech stacks */
.meta{color:var(--muted);font-size:0.92rem}

/* Horizontal scrolling rows for cards */
.horizontal-row{display:flex;flex-direction:row;gap:1.5rem;align-items:flex-start;overflow-x:auto;padding-bottom:1rem;padding-left:0}
.horizontal-row .card{min-width:320px;flex:0 0 320px}

/* Horizontal list variant (for future projects) */
.horizontal-list{display:flex;gap:1.5rem;align-items:flex-start;overflow-x:auto;padding-bottom:1rem;list-style:none;padding-left:0;margin:0}
.horizontal-list .card{min-width:320px;flex:0 0 320px;list-style:none;margin:0;padding:0}

.section{margin:2.25rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:12px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.card h3{margin-top:0}
.link{color:var(--accent);text-decoration:none}
.more{margin-top:1rem}

.chips{list-style:none;padding:0;margin:0;display:flex;gap:.6rem;flex-wrap:wrap}
.chips li{background:rgba(2,6,23,0.04);padding:.45rem .7rem;border-radius:999px;color:var(--muted)}

.site-footer{border-top:1px solid var(--border);padding:1rem 0;margin-top:3rem;text-align:center;color:var(--muted)}

@media (max-width:700px){
  .hero-inner{flex-direction:row;align-items:center}
  .container{padding:1rem}
}