@font-face {
  font-family: Beast;
  src: url('./assets/Beast-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Center the Latin ink, including the descender in "by". */
  ascent-override: 70%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;
  background: #f5f5f3;
  color: #191b1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #191b1c;
    color: #f5f5f3;
  }
}

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

main {
  display: grid;
  place-items: center;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 24px;
}

.phrase, .measure {
  font: 400 var(--font-size, clamp(12px, 6vw, 72px))/1 Beast, serif;
  font-synthesis: none;
  white-space: nowrap;
}

.phrase[data-animated] {
  position: relative;
  width: 100%;
  height: 1.4em;
}

.phrase[data-animated] .word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(var(--x, 0px));
}

.measure {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  --font-size: 72px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}