/* Projects page: photo grid filtered by space, with a lightbox. */
.ntj-hero { padding: clamp(56px, 7vw, 104px) 0 clamp(28px, 3vw, 40px); background: radial-gradient(ellipse 30% 90% at 82% 0%, rgba(var(--nt-glow), .20), rgba(15,14,13,0) 75%), var(--nt-bg); }
.ntj-hero__title { font-family: var(--nt-serif); font-weight: 300; font-size: calc(clamp(42px, 5.6vw, 80px) * var(--nt-fs-s, 1) * var(--nt-fs-head, 1)); line-height: 1.05; letter-spacing: -0.01em; }
.ntj-hero__text { margin-top: 18px !important; font-size: calc(clamp(16px, 1.3vw, 18px) * var(--nt-fs-s, 1) * var(--nt-fs-body, 1)); color: var(--nt-text-2); max-width: 620px; }
.nt-h-overlay .ntj-hero { padding-top: calc(var(--nt-h-total, 88px) + clamp(56px, 7vw, 104px)); }

.ntj-body { padding: 0 0 var(--nt-section); }
.ntj-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.nt-page .ntj-filter {
	height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid #3A3733; background: transparent; color: var(--nt-text-2);
	font: inherit; font-size: calc(14px * var(--nt-fs-s, 1) * var(--nt-fs-body, 1)); white-space: nowrap; cursor: pointer; box-shadow: none;
	display: inline-flex; align-items: center; gap: 8px; transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.nt-page .ntj-filter span { font-size: .85em; color: var(--nt-faint); }
.nt-page .ntj-filter:hover { border-color: var(--nt-line-3); color: var(--nt-text); background: transparent; }
.nt-page .ntj-filter[aria-pressed="true"] { background: var(--nt-text); border-color: var(--nt-text); color: var(--nt-ink); }
.nt-page .ntj-filter[aria-pressed="true"] span { color: var(--nt-ink-2); }
.nt-page .ntj-filter:focus-visible { outline: 2px solid var(--nt-accent); outline-offset: 2px; }

/* Masonry-style grid: photos keep their own proportions */
.ntj-grid { columns: 3 320px; column-gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none; }
.ntj-item { break-inside: avoid; margin: 0 0 16px; }
.ntj-item[hidden] { display: none; }
.ntj-item a { display: block; position: relative; overflow: hidden; border-radius: 4px; background: var(--nt-media); }
.ntj-item img { display: block; width: 100%; height: auto !important; transition: transform .6s ease, opacity .3s ease; }
.ntj-item a:hover img { transform: scale(1.03); }
.ntj-item a:focus-visible { outline: 2px solid var(--nt-accent); outline-offset: 3px; }
.ntj-empty { color: var(--nt-muted); padding: 40px 0; }

/* Lightbox */
.ntj-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,7,6,.95); display: flex; align-items: center; justify-content: center; padding: 64px 72px; }
.ntj-lightbox[hidden] { display: none; }
.ntj-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.nt-page .ntj-lightbox__btn {
	position: absolute; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(241,236,227,.25); background: rgba(15,14,13,.5);
	color: var(--nt-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
.nt-page .ntj-lightbox__btn:hover, .nt-page .ntj-lightbox__btn:focus-visible { border-color: var(--nt-accent); color: var(--nt-accent); background: rgba(15,14,13,.7); }
.ntj-lightbox__close { top: 16px; right: 16px; }
.ntj-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.ntj-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.ntj-lightbox__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: calc(13px * var(--nt-fs-s, 1) * var(--nt-fs-body, 1)); color: var(--nt-muted); letter-spacing: 1px; }
body.ntj-open { overflow: hidden; }

@media (max-width: 1023px) {
	.ntj-grid { columns: 2 260px; }
}
@media (max-width: 639px) {
	.ntj-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--nt-gutter) * -1) 20px; padding: 0 var(--nt-gutter) 2px; scrollbar-width: none; }
	.ntj-filters::-webkit-scrollbar { display: none; }
	.ntj-grid { columns: 1; }
	.ntj-item { margin-bottom: 12px; }
	.ntj-lightbox { padding: 64px 12px; }
	.nt-page .ntj-lightbox__prev, .nt-page .ntj-lightbox__next { top: auto; bottom: 12px; transform: none; }
	.nt-page .ntj-lightbox__prev { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ntj-item img { transition: none; }
}