:root {
  --canvas: #ffffff;
  --ink: #070707;
  --ink-muted: rgba(7, 7, 7, 0.52);
  --gold: #c4a46a;
  --gold-soft: #b08d52;
  --font-serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-sans: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header-height: 6.25rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  min-height: 100svh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 0.5rem);
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.hero {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--header-height));
  overflow: hidden;
  background: var(--canvas);
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

body.is-locked {
  overflow: hidden;
}

@media (max-width: 1023px) {
  :root {
    --header-height: 4.5rem;
  }
}