:root{
  --bg:#0a0a0a;
  --muted:#9aa0a6;
  --text:#e6e6e6;
  --accent:#6ee7b7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 36px;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.brand{font-weight:600;letter-spacing:0.2px}
.nav-links a{
  color:var(--muted);
  text-decoration:none;
  margin-left:20px;
  font-size:0.95rem;
}
.nav-links a:hover{color:var(--text)}
.intro{padding:56px 36px 28px}
.intro p{max-width:72ch;font-size:1.05rem;color:var(--muted);margin:0}
.projects{padding:20px 36px 120px}
.project-list{list-style:none;margin:0;padding:0;max-width:920px}
.project-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 12px;cursor:pointer;position:relative;overflow:visible;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.project-row:hover .proj-name{color:var(--accent)}
.project-link{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;width:100%;justify-content:space-between}
.proj-name{font-size:1.02rem}
.proj-year{color:var(--muted);font-size:0.9rem;margin-left:12px}
.proj-tags{color:var(--muted);font-size:0.85rem;padding-left:14px}
.tag{background:rgba(255,255,255,0.02);padding:6px 10px;border-radius:12px;font-size:0.78rem}

/* Hover preview image */
#hoverPreview{
  position:fixed;top:0;left:0;transform:translate(-50%,-50%);pointer-events:none;
  width:300px;height:180px;object-fit:cover;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.6);
  opacity:0;transition:opacity 160ms ease, transform 160ms ease;z-index:1200;will-change:transform,opacity
}

/* Project template and about simple layout */
.container{max-width:920px;padding:28px 36px}
.project-hero{padding:28px 36px}
.project-meta{color:var(--muted);margin-top:8px}
.stacked-img{width:100%;display:block;margin:0;padding:0;border-radius:4px;margin-bottom:18px}

/* Utility */
a.button{display:inline-block;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.03);color:var(--text);text-decoration:none}

@media (max-width:640px){
  #hoverPreview{display:none}
  .nav{padding:18px}
  .intro{padding:28px 18px}
  .projects{padding:8px 18px 80px}
}