:root{--bg:#0e0e0e;--ink:#ececec;--mute:#8a8a8a;--pad:clamp(1rem,4vw,3rem)}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:var(--pad);z-index:5}
.nav .links{display:flex;gap:1.75rem}
.nav a:hover{opacity:.6}
.nav .here{border-bottom:1px solid currentColor}
.hero{position:relative;height:100vh;height:100svh;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);background:#000 url(images/hero.jpg) 50% 45%/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%)}
.hero h1{position:relative;margin:0;font-weight:700;font-size:clamp(3.5rem,11vw,10rem);line-height:.85;letter-spacing:-.05em}
.hero a.go{position:relative;margin-top:1.25rem;color:#cfcfcf;border-bottom:1px solid currentColor;align-self:flex-start}
.page{padding:clamp(5rem,12vw,7rem) var(--pad) 4rem}
.title{margin:0 0 2rem;font-weight:700;font-size:clamp(2.5rem,9vw,6rem);line-height:.95;letter-spacing:-.04em}
.msg{color:var(--mute);max-width:60ch}
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#1a1a1a}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.tile:hover img{transform:scale(1.03)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 50%)}
.tile span{position:absolute;left:1rem;bottom:.9rem;z-index:1;font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.gallery{--h:300px;display:flex;flex-wrap:wrap;gap:10px}
.gallery::after{content:"";flex-grow:1000000}
.gallery button{--r:1.5;flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--h));margin:0;padding:0;border:0;background:none;cursor:zoom-in}
.gallery img{display:block;width:100%;height:auto;background:#1a1a1a}
@media (max-width:600px){.gallery{--h:180px;gap:6px}}
#box{position:fixed;inset:0;background:rgba(8,8,8,.96);display:none;align-items:center;justify-content:center;padding:3rem 1rem 4rem;z-index:10}
#box.open{display:flex}
#box img{max-width:100%;max-height:100%;object-fit:contain;min-height:0}
#cap{position:absolute;bottom:1.25rem;left:0;right:0;text-align:center;font-size:.95rem;color:var(--mute)}
#box .arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:none;color:inherit;font-size:2.5rem;padding:1rem;cursor:pointer}
#prev{left:0}#next{right:0}
#close{position:absolute;top:.5rem;right:.75rem;border:0;background:none;color:inherit;font-size:2rem;padding:.5rem 1rem;cursor:pointer}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}}