.lab-site .photo-grid-page { max-width: var(--container-width); margin: 0 auto; padding: 56px var(--gutter) 72px; display: grid; grid-template-columns: 240px 1fr; grid-template-areas: 'title collage'; column-gap: 32px; }
.lab-site .photo-grid-page.is-title-centered { grid-template-columns: 1fr; grid-template-areas: 'title' 'collage'; row-gap: 16px; }
.lab-site .photo-grid-page.is-title-centered .page-head { text-align: center; }
.lab-site .photo-grid-page.is-title-centered .collage-wrap { width: 58%; margin: 0 auto; }
.lab-site .photo-grid-page.is-title-centered .page-title { font-size: 28px; }
.lab-site .page-head { grid-area: title; }
.lab-site .page-title { font-size: 34px; font-weight: 400; letter-spacing: .08em; }
.lab-site .page-dash { display: block; width: 28px; height: 1px; background: var(--color-text); margin: 16px 0; }
.lab-site .page-desc { display: flex; flex-direction: column; font-size: 12px; line-height: 1.9; color: var(--color-muted); }
.lab-site .collage-wrap { grid-area: collage; }
.lab-site .collage { position: relative; width: 100%; aspect-ratio: 660 / 485; }
.lab-site .decor { position: absolute; background: rgba(180,180,180,.25); }
.lab-site .photo-thumb { position: absolute; appearance: none; border: none; padding: 0; cursor: pointer; background: #d9d9d9; overflow: hidden; transition: opacity .3s ease; }
.lab-site .photo-thumb::before { content: ''; position: absolute; inset: 0; transition: transform .4s ease; }
.lab-site .photo-thumb:hover { opacity: .9; }
.lab-site .photo-thumb:hover::before { transform: scale(1.05); }
.lab-site .photo-thumb:nth-child(4n + 1)::before { background: linear-gradient(135deg,#8a8f96 0%,#c7cbd1 100%); }
.lab-site .photo-thumb:nth-child(4n + 2)::before { background: linear-gradient(135deg,#b6ab9a 0%,#e3dcd1 100%); }
.lab-site .photo-thumb:nth-child(4n + 3)::before { background: linear-gradient(135deg,#9a9186 0%,#cfc7ba 100%); }
.lab-site .photo-thumb:nth-child(4n + 4)::before { background: linear-gradient(135deg,#767c85 0%,#b8bec5 100%); }
.lab-site .photo-thumb.has-image::before { background-color: #ffffff; background-image: var(--lab-image); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lab-site .pagination { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.lab-site .page-numbers { display: flex; align-items: center; gap: 18px; }
.lab-site .ellipsis { color: var(--color-muted); font-size: 12px; }
.lab-site .page-nav, .lab-site .page-number { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font-base); color: var(--color-text); font-size: 12px; letter-spacing: .02em; }
.lab-site .page-number { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.lab-site .page-number.is-active { background: var(--color-text); color: #fff; }
.lab-site .page-nav { font-size: 16px; color: var(--color-muted); }
.lab-site .lightbox { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.85); z-index: 100; padding: 40px; }
.lab-site .lightbox.is-open { display: flex; }
.lab-site .lightbox-image { width: min(560px,90vw,85vh); max-width: 90vw; max-height: 85vh; aspect-ratio: 1 / 1; background-color: #333; background-position: center; background-repeat: no-repeat; background-size: contain; }
.lab-site .lightbox-close { position: absolute; top: 24px; right: 24px; appearance: none; background: none; border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width:768px) {
	.lab-site .photo-grid-page { padding: 32px var(--gutter-mobile) 48px; grid-template-columns: 1fr; grid-template-areas: 'title' 'collage'; row-gap: 24px; }
	.lab-site .page-title { font-size: 24px; }
	.lab-site .photo-grid-page.is-title-centered .page-title { font-size: 20px; }
	.lab-site .page-dash { margin: 12px 0; }
	.lab-site .pagination { gap: 14px; margin-top: 28px; }
	.lab-site .page-numbers { gap: 12px; }
	.lab-site .lightbox { padding: 20px; }
}