:root{--bg:#faf8f5;--fg:#222;--mute:#777}
@media(prefers-color-scheme:dark){:root{--bg:#161514;--fg:#eee;--mute:#999}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Georgia,serif;line-height:1.6}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.5rem 1.25rem;max-width:1200px;margin:auto}
h1{font-weight:400;letter-spacing:.1em;margin:0;font-size:1.8rem}
nav a{color:var(--fg);text-decoration:none;margin-left:1.25rem;font-size:.95rem;letter-spacing:.05em}
nav a:hover{text-decoration:underline}
main,footer{max-width:1200px;margin:auto;padding:0 1.25rem}
.grid{columns:3 260px;column-gap:1.25rem}
.work{break-inside:avoid;margin:0 0 1.5rem;cursor:zoom-in}
.work img{width:100%;display:block;height:auto}
.work p{margin:.4rem 0 0;font-size:.9rem}
.work small{display:block;color:var(--mute)}
section{padding:2rem 0}
#about,#contact{max-width:640px}
h2{font-weight:400;letter-spacing:.08em}
footer{color:var(--mute);padding-top:2rem;padding-bottom:2rem;font-size:.85rem}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:9}
#lb[hidden]{display:none}
#lb figure{margin:0;text-align:center;color:#eee;padding:1rem}
#lb img{max-width:95vw;max-height:85vh}
#x{position:absolute;top:.5rem;right:1rem;background:none;border:0;color:#fff;font-size:2.5rem;cursor:pointer}