@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --paper: #d6d0ff;
  --ink: #1a1442;
  --muted: #4e4785;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1442;
    --ink: #d6d0ff;
    --muted: #9c94d9;
  }
}

* {
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(1rem, 4vw, 3rem);
  overflow: hidden;
}

p {
  max-width: 28ch;
  color: var(--muted);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-variation-settings: "opsz" 14;
  line-height: 1.4;
}

h1 {
  display: flex;
  flex-direction: column;
  font-size: clamp(5rem, min(32vw, 40vh), 30rem);
  font-weight: 800;
  font-stretch: 75%;
  font-variation-settings: "opsz" 96;
  line-height: 0.8;
  letter-spacing: -0.005em;
  margin-left: -0.05em;
  margin-bottom: -0.12em;
  animation: settle 1.4s cubic-bezier(0.2, 0.7, 0.1, 1) both;
}

@keyframes settle {
  from {
    font-weight: 200;
    font-stretch: 100%;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1 {
    animation: none;
  }
}