body,
html {
  font-family: "Instrument Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

nav {
  align-items: center;
  color: white;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-size: 1.125rem;
  --nav-scale: 1;
}

.nav-inner {
  padding-top: calc(0.5rem * var(--nav-scale));
  padding-bottom: calc(0.5rem * var(--nav-scale));
}

nav svg {
  margin-left: 1rem;
  height: calc(2rem * var(--nav-scale));
  width: calc(2rem * var(--nav-scale));
}

@media (min-width: 768px) {
  .nav-inner {
    padding-top: calc(1rem * var(--nav-scale));
    padding-bottom: calc(1rem * var(--nav-scale));
  }

  nav svg {
    margin-left: 0;
    height: calc(3rem * var(--nav-scale));
    width: calc(3rem * var(--nav-scale));
  }
}

@media (min-width: 1200px) {
  nav svg {
    margin-left: 0;
    height: calc(3.5rem * var(--nav-scale));
    width: calc(3.5rem * var(--nav-scale));
  }
}

@media (hover: hover) {
  nav li:hover {
    background: rgba(255, 255, 255, 0.125);
    box-shadow: 4px 4px 8px -8px rgba(0, 0, 0, 0.5);
    transition: all 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  #cta:hover {
    transition: all 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

/* hero entrance: words rise in, underline draws, then subtitle and CTA */
.hero-word,
.hero-fade {
  opacity: 0;
  transform: translateY(0.4em);
  animation: hero-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero-word {
  display: inline-block;
  animation-delay: calc(150ms + var(--i) * 90ms);
}

.hero-fade {
  animation-delay: var(--d);
}

.hero-underline {
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 0.3em;
  overflow: visible;
}

.hero-underline path {
  fill: none;
  stroke: #fb923c;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-draw 700ms ease-out var(--u, 900ms) forwards;
}

@media (max-width: 639px) {
  .hero-underline path {
    stroke-width: 9;
  }
}

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word,
  .hero-fade,
  .hero-underline path {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out,
    border-color 200ms;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}