@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root, html[data-bs-theme="light"] {
    --gallery-ink: #20262e;
    --gallery-muted: #66717d;
    --gallery-paper: #f7f4ee;
    --gallery-surface: #fffdf8;
    --gallery-accent: #e85d4b;
    --gallery-mint: #b9ded3;
    --gallery-yellow: #f4cf70;
    --gallery-line: rgba(32, 38, 46, .13);
    --gallery-shadow: 6px 7px 0 rgba(32, 38, 46, .12);
}

html[data-bs-theme="dark"] {
    --gallery-ink: #f4f0e8;
    --gallery-muted: #b6b7b1;
    --gallery-paper: #171b1b;
    --gallery-surface: #212727;
    --gallery-accent: #ff917e;
    --gallery-mint: #83bdb0;
    --gallery-yellow: #eacb71;
    --gallery-line: rgba(244, 240, 232, .16);
    --gallery-shadow: 6px 7px 0 rgba(0, 0, 0, .3);
}

body {
    color: var(--gallery-ink);
    background-color: var(--gallery-paper);
    background-image: linear-gradient(var(--gallery-line) 1px, transparent 1px), linear-gradient(90deg, var(--gallery-line) 1px, transparent 1px);
    background-size: 36px 36px;
    font-family: 'DM Sans', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 8% 8%, rgba(185, 222, 211, .42), transparent 25%), radial-gradient(circle at 90% 75%, rgba(244, 207, 112, .18), transparent 24%);
}

.gallery-page { padding: clamp(1rem, 4vw, 3rem) 0 5rem; }
.gallery-shell { width: min(1180px, calc(100% - 2rem)); }
.gallery-header { align-items: flex-end; padding: 1rem 0 2rem; border-bottom: 0; }
.gallery-kicker { color: var(--gallery-accent); font: 700 .76rem 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.gallery-title { color: var(--gallery-ink) !important; font: 700 clamp(3.5rem, 10vw, 7.5rem)/.88 'Space Grotesk', sans-serif; letter-spacing: -.07em; }
.gallery-title::before { display: none !important; content: none !important; }
.gallery-subtitle { color: var(--gallery-muted); font: 1.05rem/1.6 'DM Sans', sans-serif; }
.gallery-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.gallery-back, .gallery-theme-toggle { min-height: 44px; padding: .65rem 1rem; border: 2px solid var(--gallery-ink); border-radius: 999px; color: var(--gallery-ink); background: var(--gallery-surface); box-shadow: 3px 4px 0 var(--gallery-ink); font: 700 .85rem 'DM Sans', sans-serif; text-decoration: none; }
.gallery-back:hover, .gallery-back:focus-visible, .gallery-theme-toggle:hover, .gallery-theme-toggle:focus-visible { color: var(--gallery-ink); background: var(--gallery-mint); border-color: var(--gallery-ink); transform: translate(-2px, -2px); outline: none; }
.gallery-theme-toggle { cursor: pointer; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; padding-top: 0; }
.gallery-item { grid-column: span 4; margin: 0; overflow: hidden; border: 2px solid var(--gallery-ink); border-radius: 1.25rem; background: var(--gallery-surface); box-shadow: var(--gallery-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.gallery-item:nth-child(4n + 1), .gallery-item:nth-child(4n + 4) { grid-column: span 6; }
.gallery-thumb { border-radius: 1.05rem; background: var(--gallery-surface); }
.gallery-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease, filter .25s ease; }
.gallery-item:nth-child(2n) .gallery-thumb img { aspect-ratio: 3 / 4; }
.gallery-item:hover, .gallery-item:focus-within { transform: translate(-3px, -4px); box-shadow: 10px 12px 0 rgba(32, 38, 46, .15); }
.gallery-thumb:hover img, .gallery-thumb:focus-visible img { transform: scale(1.035); filter: saturate(1.08); }
.gallery-caption { display: none; }
.gallery-thumb:focus-visible { outline: 3px solid var(--gallery-accent); outline-offset: -5px; }

.lightbox { background: rgba(23, 27, 27, .88); }
.lightbox-shell { border: 2px solid var(--gallery-ink); border-radius: 1.25rem; background: var(--gallery-paper); box-shadow: 10px 12px 0 rgba(0, 0, 0, .28); }
.lightbox-topbar { min-height: 64px; padding: .5rem .7rem .5rem 1.1rem; border-bottom: 2px solid var(--gallery-ink); background: var(--gallery-surface); }
.lightbox-label { margin: 0; color: var(--gallery-ink); font: 700 1rem 'Space Grotesk', sans-serif; }
.lightbox-close, .lightbox-nav { border: 2px solid var(--gallery-ink); border-radius: 999px; background: var(--gallery-yellow); color: var(--gallery-ink); font-family: 'DM Sans', sans-serif; font-weight: 700; }
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--gallery-ink); background: var(--gallery-accent); color: #fff; }
.lightbox-stage { padding: clamp(.75rem, 3vw, 2rem); }
.lightbox-image { max-width: 88vw; max-height: calc(88vh - 70px); border: 2px solid var(--gallery-ink); border-radius: .8rem; background: var(--gallery-surface); }
.lightbox-counter { display: none; }

@media (max-width: 700px) {
    .gallery-header { align-items: flex-start; flex-direction: column; }
    .gallery-actions { width: 100%; justify-content: flex-start; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .gallery-item, .gallery-item:nth-child(4n + 1), .gallery-item:nth-child(4n + 4) { grid-column: span 1; }
    .gallery-item:nth-child(2n) .gallery-thumb img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}