/* Consistent spacing, readable controls, and keyboard access across the galleries. */
html { scroll-padding-top: 8rem; }
body { background: #fafaf8; }
:focus-visible { outline: 3px solid #b7782f; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 9999; padding: .75rem 1rem; background: white; color: #222; }
.skip-link:focus { top: 1rem; }
nav { backdrop-filter: blur(12px); }
.hero { padding-top: 6rem; background-attachment: scroll; }
.hero-content h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.hero-content p { letter-spacing: .12em; }
.gallery-header, .container { scroll-margin-top: 8rem; }
button.photo-item { border: 0; padding: 0; background: white; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.photo-item img { aspect-ratio: 3/2; object-fit: cover; }
.photo-item.hidden { display: none; }
.filter-btn { min-height: 44px; }
.carousel-indicators { flex-wrap: wrap; justify-content: center; max-width: 70%; }
.indicator { min-width: 24px; min-height: 24px; border: 6px solid transparent; background-clip: padding-box; }
.gallery-link:hover { background: #334155; box-shadow: 0 4px 12px #33415526; }
.lightbox-content { max-height: 85dvh; overflow-y: auto; }
.lightbox-content img { max-height: 65dvh; }
footer a { color: #fff; }
@media (max-width: 768px) {
    .hero { min-height: 300px; height: auto; padding: 8rem 1.25rem 2rem; }
    .hero-content h1 svg { height: 38px; }
    .hero-content p { font-size: .85rem; }
    .carousel-controls-mobile { gap: 12px; }
    .carousel-controls-mobile .carousel-indicators { gap: 0; flex: 1; max-width: 60%; }
    .carousel-controls-mobile .indicator { width: 24px; height: 24px; }
    .carousel-controls-mobile .carousel-nav { flex-shrink: 0; width: 44px; height: 44px; }
    .gallery-links { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Keep the visible dots small while retaining a 24px pointer target. */
.indicator, .carousel-controls-mobile .indicator { border: 0; border-radius: 0; background: radial-gradient(circle, #8c9298 0 4px, transparent 5px); }
.indicator.active, .carousel-controls-mobile .indicator.active { transform: none; background: radial-gradient(circle, #334155 0 5px, transparent 6px); }