:root {
  --display: "Josefin Sans", Arial, sans-serif;
  --serif: "Oswald", "Arial Narrow", Arial, sans-serif;
  --sans: "Oswald", "Arial Narrow", Arial, sans-serif;
  --mono: "Oswald", "Arial Narrow", Arial, sans-serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--sans);
  text-transform: none;
}

p,
a,
span,
blockquote,
.eyebrow,
.vertical-label,
.nav-cta,
.nav nav a {
  text-transform: none;
}

h1,
h2,
h3,
.experience-card h3,
.explore-card span {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

h1 em,
h2 em,
h3 em {
  font-family: inherit;
  font-style: normal;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(57.6px, 7.2vw, 113.6px);
}

.intro,
.manifesto-copy,
.experience-card span:not(.explore-card span),
.gallery-note,
.visit-details {
  letter-spacing: 0.025em;
}

.brand {
  width: 142px;
  height: 76px;
  background: #f7f1dc;
}

.brand img {
  object-fit: contain;
}

footer .brand {
  width: 116px;
  height: 62px;
}

@media (max-width: 850px) {
  .nav .brand {
    width: 112px;
    height: 64px;
  }

  .hero h1 {
    font-size: clamp(54.4px, 16vw, 80px);
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 52px;
  }
}