:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px;
  color: #f4f1eb;
  background: #090d10;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #090d10;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(5, 9, 12, 0.9) 0%,
      rgba(5, 9, 12, 0.7) 38%,
      rgba(5, 9, 12, 0.36) 68%,
      rgba(5, 9, 12, 0.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 9, 12, 0.18) 0%,
      rgba(5, 9, 12, 0.18) 45%,
      rgba(5, 9, 12, 0.76) 100%
    ),
    url("assets/mountain-bg-v1.png") center / cover no-repeat fixed;
}

body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(
    circle at 72% 28%,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0) 34%
  );
}

.page {
  display: grid;
  min-height: 100svh;
  padding: clamp(1.5rem, 3vw, 3.75rem);
  align-items: center;
}

.intro {
  width: min(100%, 43rem);
  padding-block: clamp(2.25rem, 5vh, 4rem) clamp(2.75rem, 6vh, 4.75rem);
}

.wordmark {
  margin: 0 0 clamp(2rem, 5vh, 3.8rem);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3rem, 6.9vw, 6.9rem);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}

.supporting {
  max-width: 34rem;
  margin: clamp(1.25rem, 2.6vw, 1.9rem) 0 0;
  color: rgba(244, 241, 235, 0.82);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.45;
}

a {
  display: inline-block;
  margin-top: clamp(1.7rem, 3.3vw, 2.6rem);
  color: #f4f1eb;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.4;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

a:hover,
a:focus-visible {
  color: #ffffff;
}

a:focus-visible {
  outline: 2px solid rgba(244, 241, 235, 0.78);
  outline-offset: 0.35rem;
}

footer {
  position: fixed;
  right: clamp(1.25rem, 5vw, 5rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  color: rgba(244, 241, 235, 0.66);
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (max-width: 700px) {
  body {
    background:
      linear-gradient(
        180deg,
        rgba(5, 9, 12, 0.48) 0%,
        rgba(5, 9, 12, 0.74) 42%,
        rgba(5, 9, 12, 0.9) 100%
      ),
      url("assets/mountain-bg-v1.png") 52% center / cover no-repeat;
  }

  .page {
    min-height: 100svh;
    padding: 1.35rem;
    align-items: end;
  }

  .intro {
    width: min(100%, 24rem);
    padding-block: 5rem 6.4rem;
  }

  .wordmark {
    margin-bottom: 3rem;
  }

  h1 {
    max-width: 10ch;
    font-size: clamp(3.1rem, 14vw, 5rem);
  }

  .supporting {
    max-width: 23rem;
  }

  a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  footer {
    right: auto;
    left: 1.35rem;
    bottom: 1.25rem;
  }
}