/* North Fork Studio (fictional). Flaws on purpose: image wall with no names, places, types or captions;
   tiny corner nav; lightbox with no information; no clear way to start a project. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Arial, sans-serif; background: #111; color: #ddd; }
a { color: inherit; text-decoration: none; }

header { position: fixed; top: 0; right: 0; z-index: 10; padding: 16px 20px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; display: flex; gap: 18px; mix-blend-mode: difference; color: #fff; }
header a:first-child { opacity: .6; }

.wall { column-count: 4; column-gap: 4px; padding: 4px; }
.wall img { width: 100%; display: block; margin-bottom: 4px; cursor: zoom-in; transition: opacity .3s; }
.wall img:hover { opacity: .55; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); display: none; align-items: center; justify-content: center; z-index: 30; cursor: zoom-out; }
.lightbox.on { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; }

.page { min-height: 100vh; padding: 140px 8vw 60px; max-width: 780px; margin-left: auto; margin-right: auto; }
.page p { font-size: 13px; color: #999; line-height: 1.8; margin-bottom: 18px; }
.page a { color: #777; border-bottom: 1px solid #333; }

@media (max-width: 900px) { .wall { column-count: 2; } }