/* hps/gallery */
.home-gallery, .aud-gallery { padding-block: var(--sec); }
.aud-gallery { padding-top: 0; }
.masonry { columns: 3; column-gap: 12px; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mosaic a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-photo); background: var(--canvas); }
.mosaic a.is-tall { grid-row: span 2; aspect-ratio: auto; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mosaic a:hover img { transform: scale(1.025); }
@media (max-width: 760px) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* Justified rows: equal height, flush edges, every photo shown whole. */
.justified { --h: clamp(150px, 26vw, 360px); display: flex; flex-wrap: wrap; gap: 12px; }
.justified a { flex: var(--ar) 1 calc(var(--ar) * var(--h)); aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--r-photo); background: var(--canvas); }
.justified img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.justified a:hover img { transform: scale(1.025); }
@media (max-width: 760px) { .justified { gap: 8px; }
}
.masonry a { display: block; margin-bottom: 12px; break-inside: avoid; background: var(--canvas); border-radius: var(--r-photo); overflow: hidden; }
.masonry img { width: 100%; transition: opacity .15s; }
.masonry a:hover img { opacity: .92; }
@media (max-width: 760px) { .masonry { columns: 2; column-gap: 8px; } .masonry a { margin-bottom: 8px; }
}
.portfolio { padding-block: 8px var(--sec); }
.tabs { position: sticky; top: var(--head-h); z-index: 20; display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter); background: rgb(253 249 241 / .97); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-weight: 700; transition: border-color .15s, background-color .15s, color .15s; }
.tabs button:hover { border-color: var(--night); }
.tabs button small { font-size: .92rem; font-weight: 500; color: var(--ink-soft); }
.tabs button[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.tabs button[aria-pressed="true"] small { color: #d8dde6; }
.tabs + .masonry { margin-top: 12px; }
.more-wrap { display: flex; justify-content: center; margin-top: 28px; }