:root{--ink:#161616;--mute:#6f6f6f;--line:#e8e8e8;--wash:#f3f3f3;--bar:64px;--pad:28px;--gap:6px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:var(--bar);padding:0 var(--pad);background:#fff}
.mark{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:500;letter-spacing:.01em}
.mark svg{width:26px;height:26px;overflow:visible}
.bar nav{display:flex;gap:28px}
.bar nav a{padding:6px 0;color:var(--mute);border-bottom:1px solid transparent}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}

.hero{height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));min-height:340px;background:var(--wash);display:grid;place-items:center}
.hero img{width:100%;height:100%;object-fit:cover}
.empty{color:var(--mute);max-width:36ch;margin:0;padding:0 var(--pad)}
.empty code{font-family:ui-monospace,Menlo,monospace;font-size:.92em}

.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:56px var(--pad) 72px}
.panel img,.panel .blank{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--wash)}
.panel span{display:inline-block;margin-top:14px;font-size:17px;border-bottom:1px solid transparent}
.panel:hover span{border-bottom-color:var(--ink)}

.page-title{margin:0;padding:44px var(--pad) 28px;font-size:clamp(30px,4.4vw,52px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
.grid{padding:0 var(--pad) 96px;min-height:50vh}
.row{display:flex;gap:var(--gap);margin-bottom:var(--gap)}
.ph{display:block;flex:none;overflow:hidden;background:var(--wash);cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover}
.grid .empty{padding:0}

footer{display:flex;flex-wrap:wrap;gap:8px 28px;padding:28px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:14px}
footer a:hover{color:var(--ink)}

.lb{position:fixed;inset:0;z-index:50;background:#fff;display:grid;grid-template-columns:72px 1fr 72px;align-items:center}
.lb[hidden]{display:none}
.lb figure{margin:0;height:100%;display:grid;place-items:center;padding:56px 0 48px}
.lb img{max-width:100%;max-height:calc(100vh - 104px);max-height:calc(100svh - 104px);object-fit:contain;opacity:0;transition:opacity .2s}
.lb img.on{opacity:1}
.lb button{width:48px;height:48px;display:grid;place-items:center;justify-self:center;padding:0;background:none;border:0;color:var(--ink);cursor:pointer}
.lb button:hover{opacity:.6}
.lb-x{position:absolute;top:8px;right:12px}
.lb-count{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--mute);font-size:13px}

@media(max-width:720px){
  :root{--pad:16px}
  .bar nav{gap:18px}
  .panels{grid-template-columns:1fr;gap:36px;padding:32px var(--pad) 48px}
  .panel img,.panel .blank{aspect-ratio:3/2}
  .lb{grid-template-columns:1fr}
  .lb-nav{display:none!important}
  .lb figure{padding:56px 0 44px}
}
@media(prefers-reduced-motion:reduce){.lb img{transition:none}}