:root { --focus-ring: 3px solid currentColor; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: .75rem 1.25rem; background: #111; color: #fff; font-weight: 600;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring); outline-offset: 3px;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; } .reveal-d4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.ratio-photo { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ratio-wide { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ratio-square { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-btn { cursor: pointer; }
.filter-hidden { display: none !important; }

.form-status[hidden] { display: none; }
.form-status { border-radius: .5rem; padding: 1rem 1.25rem; margin-top: 1rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }