@layer ui{
.gal{columns:3 260px;column-gap:.8rem}
.gal figure{position:relative;break-inside:avoid;margin-bottom:.8rem;border-radius:1rem;overflow:hidden;cursor:zoom-in}
.gal img{width:100%;transition:scale .4s}.gal figure:hover img{scale:1.04}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:2.2rem .9rem .8rem;background:linear-gradient(transparent,#000d);font-size:.84rem;line-height:1.25;font-weight:600;opacity:0;translate:0 .4rem;transition:.25s}.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;translate:0}@media(hover:none){.gal figcaption{opacity:1;translate:0}}
.gal .bub{position:absolute;right:.6rem;top:.6rem;background:var(--o);color:var(--k);font:500 .68rem var(--m);padding:.25rem .55rem;border-radius:99px;display:none}.gal .bub.on{display:block}
.credit{display:flex;gap:.7rem;align-items:center;margin-bottom:1.4rem;font:500 .78rem var(--m);text-transform:uppercase;letter-spacing:.04em;color:#bfae9d}.credit b{color:#fff}
dialog{border:0;padding:0;background:transparent;color:#fff;width:min(1100px,96vw);max-height:96dvh;margin:auto;overflow:auto}
dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}
.lbx{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem}@media(max-width:860px){.lbx{grid-template-columns:1fr}}
.lbx img{width:100%;border-radius:1rem;max-height:80dvh;object-fit:contain;background:#000}
.lbx .side{background:var(--k2);border-radius:1rem;padding:1rem;max-height:80dvh;overflow:auto}
.xbtn{position:sticky;top:0;float:right;z-index:3;background:var(--o);color:var(--k);border:0;width:2.6rem;aspect-ratio:1;border-radius:50%;font-size:1.3rem;cursor:pointer}
}