:root{
  --bg:#ffffff; --fg:#111111; --muted:#888888; --line:#e8e8e8;
  --gap:18px; --maxw:1400px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
a{color:inherit; text-decoration:none}

/* header */
.site-head{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 24px; border-bottom:1px solid var(--line);
}
.wordmark{font-weight:600; letter-spacing:.02em; font-size:17px}
.site-head nav a{margin-left:18px; color:var(--muted)}
.site-head nav a:hover,.site-head nav a.on{color:var(--fg)}

main{max-width:var(--maxw); margin:0 auto; padding:24px}
footer{color:var(--muted); text-align:center; padding:48px 24px; font-size:13px}

/* index grid */
.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.card{display:block}
.card .thumb{
  position:relative; display:block; width:100%; height:0;
  padding-bottom:66.66%;            /* uniform 3:2 tiles for every project */
  overflow:hidden; background:#f3f3f3;
}
.card .thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .5s ease, opacity .3s;
}
.card:hover .thumb img{transform:scale(1.04)}
.card-title{
  display:block; margin-top:8px; font-size:14px; color:var(--fg);
}
.card:hover .card-title{color:var(--muted)}

/* project page */
.project{max-width:1000px; margin:0 auto}
.proj-head{text-align:center; margin:8px 0 28px}
.proj-head h1{font-size:24px; font-weight:600; margin:0}
.proj-content{
  max-width:1000px; margin:0 auto; text-align:center;
  line-height:1.65; color:#222;
}
.proj-content figure{margin:0 0 var(--gap)}
.proj-content img{display:block; width:100%; height:auto}
.proj-content b{font-weight:600}
.proj-content a{text-decoration:underline}
.back{display:inline-block; margin:24px 0 8px; color:var(--muted)}
.back:hover{color:var(--fg)}

/* about */
.about{max-width:680px; margin:40px auto; text-align:center}
.about h1{font-weight:600; font-size:24px; margin-bottom:20px}
.bio{font-size:17px; line-height:1.7}

@media(max-width:600px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
  main{padding:14px}
  .site-head{padding:14px 16px}
}