:root {
  --color-brand-bg: #fcfafc;
  --color-brand-ink: #2b1d38;
  --color-brand-accent: #d4af37;
  --color-brand-bronze: #a57c27;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--color-brand-bg);
  color: var(--color-brand-ink);
  -webkit-font-smoothing: antialiased;
}

.text-balance {
  text-wrap: balance;
}

::selection {
  background-color: var(--color-brand-accent);
  color: #fff;
}

iframe {
  border: 0;
}

#site-nav:not(.nav-scrolled) .nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

#site-nav.nav-scrolled .nav-link:hover {
  color: var(--color-brand-accent);
}

#mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.mobile-menu-open {
  overflow: hidden;
}

.nav-enter {
  animation: nav-enter 0.8s ease-out both;
}

.fade-in-up {
  animation: fade-up 0.8s ease-out both;
}

.fade-delay-1 {
  animation-delay: 0.2s;
}

.fade-delay-2 {
  animation-delay: 0.35s;
}

.fade-delay-3 {
  animation-delay: 0.8s;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes nav-enter {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.masonry-gallery {
  column-count: 1;
  column-width: 17rem;
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .masonry-gallery {
    column-gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .masonry-gallery {
    column-width: 19rem;
    column-gap: 1.5rem;
  }
}

.masonry-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
}