:root {
  color-scheme: light;
  background: #fcfaf8;
  color: #302a2d;
  font-family: "Courier New", Courier, monospace;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.wordmark { text-align: center; transform: translateY(-4vh); }
h1 {
  position: relative;
  width: calc(7ch - 0.455em);
  margin: 0 auto;
  font-size: clamp(48px, 12vw, 100px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.065em;
  text-align: left;
}
.cursor { display: none; color: #d38caa; }
p {
  margin: 22px 0 0;
  color: #8c7e83;
  font-size: clamp(13px, 3.2vw, 17px);
  letter-spacing: 0.045em;
  line-height: 1.6;
}
.animating h1 { min-height: 1.2em; }
.animating .cursor { display: inline; }
.animating p { opacity: 0; transform: translateY(5px); }
.ready p { transition: opacity 900ms ease, transform 900ms ease; }
@media (prefers-reduced-motion: reduce) {
  .ready p { transition: none; }
}