#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#preloader[data-skip="1"] {
  display: none !important;
}

.preloader-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #0f1115;
  /* Starts invisible on purpose: the draw-in animation hides each line via
     stroke-dasharray/dashoffset, but that's computed in JS (needs
     getTotalLength(), which needs the element rendered first) — without
     this, raw CSS/HTML paints the lines fully drawn for one frame before
     JS gets a chance to hide+animate them, a visible flash on load. JS
     brings this back to 0.13 in the same synchronous pass that sets up
     the dasharray hiding, so the two changes land in the same frame. */
  opacity: 0;
  pointer-events: none;
}

.preloader-wordmark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 50%;
}

.preloader-line {
  display: flex;
  color: #000;
  line-height: 1;
}

.preloader-line1 {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: clamp(39px, 8.25vw, 96px);
  letter-spacing: 0;
}

.preloader-line2 {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.96vw, 23px);
  letter-spacing: 0.134em;
  margin-top: 0.3em;
}

.preloader-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
}