/* Gallery page: film-strip reel, filter chips, masonry wall, lightbox. Builds on nagi.css tokens. */
.nav { position: sticky; }
.nav nav a[aria-current="page"] { color: var(--accent); background: rgb(36 92 255 / 0.1); }
.btn--sm { height: 2.5rem; padding: 0 1.1rem; font-size: 0.9rem; }

.g-head { display: grid; gap: 1rem; padding-bottom: 2.5rem; }
.g-head h1 { font-size: clamp(3rem, 9vw, 8rem); font-weight: 900; line-height: 0.95; }
.g-head p { max-width: 38rem; font-size: 1.1rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ reel */
.reel { padding: 0 0 4rem; display: grid; gap: 1rem; overflow: hidden; }
.reel__row { display: flex; gap: 1rem; width: max-content; will-change: transform; }
.reel__row img { height: clamp(9rem, 18vw, 15rem); width: auto; border-radius: 14px; box-shadow: 0 18px 36px -24px rgb(20 40 90 / 0.6); }

/* ------------------------------------------------------------------ filters */
.g-wall { padding-top: 0; }
.g-filters { position: sticky; top: 80px; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem; margin-bottom: 2rem; border-radius: 999px; width: fit-content; background: rgb(246 248 251 / 0.85); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line), 0 16px 34px -26px rgb(20 40 90 / 0.5); }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; font: 600 0.92rem var(--body); color: var(--ink-2); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease); }
.chip.is-on { background: var(--accent); color: #fff; }
.chip:active { transform: scale(0.96); }
.chip--icon { box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) { .chip:not(.is-on):hover { background: rgb(36 92 255 / 0.08); color: var(--ink); } }
@media (max-width: 700px) { .g-filters { border-radius: 18px; top: 72px; } }

/* ------------------------------------------------------------------ masonry */
.g-grid { columns: 5 240px; column-gap: 1rem; }
.g-item { display: block; width: 100%; margin: 0 0 1rem; padding: 0; border: 0; background: none; break-inside: avoid; cursor: zoom-in; border-radius: 14px; overflow: hidden; position: relative; transform-style: preserve-3d; }
.g-item img { width: 100%; height: auto; display: block; transition: transform 700ms var(--ease), filter 400ms ease; }
.g-item--cut { background: radial-gradient(circle at 50% 70%, var(--haze), #fff 70%); box-shadow: inset 0 0 0 1px var(--line); }
.g-item--cut img { padding: 1rem 1rem 0; }
.g-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); pointer-events: none; }
.g-item.is-hidden { display: none; }
@media (hover: hover) and (pointer: fine) {
    .g-grid:hover .g-item img { filter: saturate(0.7) brightness(0.96); }
    .g-grid .g-item:hover img { transform: scale(1.06); filter: none; }
}
.g-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.g-end { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.g-end p { color: var(--ink-2); }

/* ------------------------------------------------------------------ lightbox */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.lb::backdrop { background: rgb(12 16 26 / 0.9); backdrop-filter: blur(10px); }
.lb[open] { display: grid; place-items: center; }
.lb__img { max-width: min(92vw, 1500px); max-height: 86dvh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8); }
.lb__btn { position: absolute; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: #fff; font-size: 1.4rem; cursor: pointer; transition: background-color 200ms ease, transform 160ms var(--ease); }
.lb__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .lb__btn:hover { background: rgb(255 255 255 / 0.24); } }
.lb__close { top: 1.25rem; right: 1.25rem; }
.lb__prev { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lb__next { right: 1.25rem; top: 50%; translate: 0 -50%; }
.lb__count { position: absolute; bottom: 1.25rem; left: 50%; translate: -50% 0; color: rgb(255 255 255 / 0.75); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .g-item img { transition: none; } }