:root {
  color-scheme: dark;
  --black: #000000;
  --white: #f7f7f5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.landing-page {
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.monogram {
  display: block;
  left: 50%;
  mix-blend-mode: screen;
  position: absolute;
  top: 28.5%;
  transform: translateX(-50%);
  width: 4.1vw;
}

.email {
  color: inherit;
  font-size: 1.02vw;
  font-weight: 400;
  letter-spacing: 0.025em;
  position: absolute;
  right: 4.8%;
  text-decoration: none;
  top: 7.4%;
  transition: opacity 160ms ease;
}

.email:hover,
.email:focus-visible {
  opacity: 0.62;
}

.wordmark {
  display: block;
  left: 0;
  position: absolute;
  top: 42.5%;
  width: 100%;
}

.tagline {
  bottom: 5.8%;
  left: 4.05%;
  position: absolute;
  width: 16.7%;
}

.tagline p {
  font-size: 1.02vw;
  letter-spacing: 0.01em;
  margin: 1rem 0 0;
}

.tagline-rule {
  background: var(--white);
  height: 1px;
  width: 100%;
}

@media (max-width: 640px) {
  .monogram {
    top: 27%;
    width: 10%;
  }

  .email {
    font-size: 2.7vw;
    right: 7%;
  }

  .wordmark {
    top: 42.5%;
    width: 170%;
  }

  .tagline {
    bottom: 6%;
    left: 7%;
    width: 34%;
  }

  .tagline p {
    font-size: 2.7vw;
  }
}