html {
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", system-ui, sans-serif;
  background: #17130f;
  color: #f4efe6;
}

h1, h2, h3, h4, .serif {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
}

[id] {
  scroll-margin-top: 5.75rem;
}

::selection {
  background: #c6a15a;
  color: #17130f;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  background: #c6a15a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.card-lift {
  transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
}

dialog.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(1100px, 94vw);
  width: 94vw;
}

dialog.lightbox::backdrop {
  background: rgba(12, 9, 7, 0.86);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card-lift,
  .nav-link::after {
    transition: none;
  }
}