:root{
  --bg:#ffffff; --fg:#161616; --muted:#6b6b6b; --line:#e7e7e7; --maxw:1200px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header{max-width:var(--maxw);margin:0 auto;padding:52px 24px 20px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
header h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.01em}
.ig{flex:none;color:inherit;text-decoration:none;line-height:1}
.ig svg{width:24px;height:24px;display:block;fill:currentColor;transition:opacity .15s ease}
.ig:hover svg{opacity:.6}
.gallery{max-width:var(--maxw);margin:0 auto;padding:16px 24px 48px;
  display:flex;align-items:flex-start;gap:20px}
.gallery .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.work{display:block;margin:0 0 22px;text-decoration:none;color:inherit;cursor:zoom-in}
.work img{width:100%;height:auto;display:block;border-radius:4px;
  transition:opacity .15s ease}
.work:hover img{opacity:.88}
.cap{display:block;padding:8px 2px 0}
.cap .t{display:block;font-weight:600;font-size:14px}
.cap .m{display:block;color:var(--muted);font-size:12px;margin-top:2px}
footer{max-width:var(--maxw);margin:0 auto;padding:22px 24px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.lightbox{position:fixed;inset:0;background:rgba(18,18,18,.95);display:flex;align-items:center;
  justify-content:center;z-index:50}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:4px}
.lightbox figcaption{color:#eee;text-align:center;font-size:13px}
.lightbox figcaption .t{font-weight:600;margin-right:8px}
.lightbox figcaption .d{color:#aaa}
.lightbox .close{position:absolute;top:12px;right:18px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer}
.lightbox .nav{background:none;border:0;color:#fff;font-size:46px;line-height:1;cursor:pointer;
  padding:0 16px;opacity:.75}
.lightbox .nav:hover{opacity:1}
@media (max-width:600px){.lightbox .nav{font-size:30px;padding:0 6px}}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f0f0f;--fg:#f1f1f1;--muted:#9a9a9a;--line:#2a2a2a}
}