:root {
  --base-100: #fcfcfb;
  --base-content: #111111;
  --accent: #0e9b8a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--base-100);
  color: var(--base-content);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.hero__wordmark {
  margin: 0;
  font-family: 'Space Grotesk', 'Instrument Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 11vw, 7.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.hero__tagline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgb(17 17 17 / 0.6);
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--accent);
  flex-shrink: 0;
}

a {
  color: var(--base-content);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--accent);
}