:root {
  color-scheme: dark;
  --green: #0c1a14;
  --green-shadow: #07110d;
  --ivory: #f1ead8;
  --ivory-muted: rgba(241, 234, 216, 0.86);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--green);
  color: var(--ivory);
  font-family: Georgia, "Times New Roman", serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.landing {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(36px, 7vh, 84px) 24px;
}

.lockup {
  width: min(100%, 980px);
  max-width: calc(100vw - 48px);
  min-width: 0;
  display: grid;
  justify-items: center;
  transform: translateY(-2.5vh);
}

.lockup img {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.horse-mark {
  width: min(82vw, 570px);
  height: auto;
  margin-bottom: clamp(42px, 7vh, 74px);
}

.wordmark {
  width: min(86vw, 900px);
  height: auto;
  margin-bottom: clamp(54px, 8vh, 88px);
}

.blurb {
  max-width: 470px;
  margin: 0;
  color: var(--ivory-muted);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 520px) {
  .landing {
    padding-inline: 22px;
  }

  .lockup {
    transform: translateY(-1.5vh);
  }

  .horse-mark {
    width: calc(100vw - 44px);
    max-width: 420px;
    margin-bottom: 42px;
  }

  .wordmark {
    width: calc(100vw - 44px);
    max-width: 460px;
    margin-bottom: 44px;
  }

  .blurb {
    max-width: 330px;
    font-size: 15px;
  }
}