:root {
    --page-max: 100%;
    --gap: 16px;
    --bg: #0b0c10;
    --card: #f0f0f0;
    --text: #e7eaf0;
    --muted: #9aa3b2;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Masonry layout using CSS multi-columns */
.masonry{
    -webkit-column-break-inside: avoid;
    margin: 0 0 var(--gap);
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: clip;
    background: var(--card);
    box-shadow: var(--shadow);
    transform: translateZ(0);
}
.masonry-item img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto;
    transition: transform .25s ease, filter .25s ease;
}
.masonry-item:hover img{ transform: scale(1.02); }
.caption{
    position: absolute;
    left: 10px; bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #f5f7fb;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .2px;
    user-select: none;
    backdrop-filter: blur(4px);
}
/* Lightbox */
.lightbox{
    position: fixed; inset: 0; z-index: 50;
    display: none; /* toggled via [data-open] */
    place-items: center;
    background: rgba(0,0,0,.75);
}
.lightbox[data-open="true"]{ display: grid; }
.lightbox__inner {
    width: min(92vw, 1200px);
    height: 90vh;                /* was max-height; now a fixed box */
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__img {
    display: block;
    width: 100%;                 /* fill container */
    height: 100%;                /* fill container */
    object-fit: contain;         /* scale down, no crop */
}   
.lightbox__close, .lightbox__nav{
    position: absolute; top: 10px;
    background: rgba(0,0,0,.55);
    color: white; border: none; cursor: pointer;
    padding: 8px 10px; border-radius: 10px;
    font-size: 14px;
}
.lightbox__close{ right: 10px; }
.lightbox__nav{ top: 50%; transform: translateY(-50%); }
.lightbox__prev{ left: 10px; }
.lightbox__next{ right: 10px; }
.visually-hidden{ position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path: inset(50%); }
.title{
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 700;
    letter-spacing: 0.2px;
    margin: 0 0 4px;
}
.subtitle{
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 14px;
}


/* Masonry layout using CSS multi-columns */
.masonry{
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 8px 16px 48px;
    column-gap: var(--gap);
    column-fill: balance;
}
/* Responsive column counts */
@media (min-width: 768px){ .masonry{ column-count: 2; } }
@media (min-width: 1100px){ .masonry{ column-count: 3; } }
@media (min-width: 1300px){ .masonry{ column-count: 4; } }
.masonry-item{
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 var(--gap);
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: clip;
    background: var(--card);
    box-shadow: var(--shadow);
    transform: translateZ(0);
}
.masonry-item img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto;
    transition: transform .25s ease, filter .25s ease;
}
.masonry-item:hover img{ transform: scale(1.02); }
.caption{
    position: absolute;
    left: 10px; bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #f5f7fb;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .2px;
    user-select: none;
}