:root{ --bg:#0d0d0d; --fg:#f2f2f2; --muted:#a9a9a9; --grid-gap:10px; }
*{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg);
font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
.wrap{ width:min(1200px,92%); margin:0 auto; } header{ display:flex; justify-content:space-between; align-items:center;
padding:22px 0; border-bottom:1px solid #1c1c1c; } a{ color:inherit; } .brand{ font-weight:700; text-decoration:none; }
nav a{ text-decoration:none; margin-left:18px; opacity:.9; } nav a:hover{ opacity:1; }
footer{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; color:var(--muted);
border-top:1px solid #1c1c1c; margin-top:60px; } h1{ font-size:clamp(28px,6vw,64px); margin:.8rem 0 .2rem; }
h2{ margin:1.4rem 0 .6rem; } p.muted{ color:var(--muted); } .hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px;
align-items:end; padding:36px 0; } .hero img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:grayscale(100%) contrast(1.15); }
.grid{ columns:4 260px; column-gap:var(--grid-gap); } .grid .item{ display:inline-block; width:100%; margin:0 0 var(--grid-gap); }
.grid img{ width:100%; display:block; filter:grayscale(100%); transition:transform .1s ease, filter .2s ease; }
.grid img:hover{ transform:scale(1.01); filter:grayscale(90%); }
.project-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:22px; }
.card{ display:block; text-decoration:none; color:inherit; border:1px solid #222; border-radius:10px; overflow:hidden; }
.card img{ width:100%; height:200px; object-fit:cover; filter:grayscale(100%); } .card .meta{ padding:12px; }
.card .meta h3{ margin:.2rem 0 .1rem; font-size:18px; } .card .meta p{ margin:0; color:var(--muted); font-size:14px; }
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:grid; place-items:center; z-index:999; padding:24px; }
.lightbox img{ max-width:min(90vw,1400px); max-height:80vh; } .lightbox p{ color:var(--muted); margin-top:8px; text-align:center; }
hr.sep{ border:0; border-top:1px solid #1c1c1c; margin:28px 0; }