/* names list (home and names.html) and the full-screen project photo viewer */
.nlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.nlist li{display:flex;align-items:center;min-height:60px;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);font:500 clamp(15px,1.2vw,17px)/1.25 'Hanken Grotesk',sans-serif;letter-spacing:-.015em;color:var(--ink)}
/* only names that open a photo react to hover: the text stays put, an underline grows in under it */
.nlist li.has-img{padding:0}
.nb{display:flex;align-items:center;width:100%;min-height:60px;margin:0;padding:14px 16px 14px 0;background:none;border:0;border-radius:0;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
.nb span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.nb:hover span,.nb:focus-visible span{background-size:100% 1px}
.nb:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
@media (max-width:900px){.nlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.nb span{transition:none}}

/* viewer: takes over the whole screen; name, portfolio link and close stay in a fixed bar, photos stack and scroll */
html:has(dialog[open]){overflow:hidden}
.pv{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#0a0a0a;color:#fff;overflow:auto;overscroll-behavior:contain}
.pv::backdrop{background:#0a0a0a}
.pvbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px 28px;min-height:64px;padding:10px 72px 10px var(--pad);background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pvbar b{font:500 clamp(18px,1.8vw,24px)/1.15 'Hanken Grotesk',sans-serif;letter-spacing:-.025em}
.pvbar a{margin-left:auto;color:#fff;font-size:15px;white-space:nowrap;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.6)}.pvbar a:hover{color:#fff;border-color:#fff}
.pvx{position:fixed;top:10px;right:12px;z-index:3;width:44px;height:44px;border:0;background:none;color:#fff;font:300 34px/1 'Hanken Grotesk',sans-serif;cursor:pointer}
.pvx:hover{color:rgba(255,255,255,.7)}
.pvimgs{display:flex;flex-direction:column;gap:2px}
.pvimgs img{display:block;width:100%;height:calc(100svh - 64px);object-fit:cover;background:#14171a}
.pvimgs img+img{height:auto;max-height:none;object-fit:contain}
.pv :focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:600px){.pvbar{flex-wrap:wrap;padding-right:60px}.pvbar a{margin-left:0}.pvimgs img{height:auto;object-fit:contain}}