/* ==========================================================================
   Base & Typography
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #F4F3EF;
  color: #111111;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

.label-caps {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.display-number-giant {
  font-size: clamp(6rem, 14vw, 13rem);
  line-height: 0.82;
  font-weight: 300;
  letter-spacing: -0.06em;
}

.display-number-md {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.88;
  font-weight: 300;
  letter-spacing: -0.04em;
}

/* ==========================================================================
   Dot Patterns / Halftone Matrix
   ========================================================================== */

.dot-matrix {
  background-image: radial-gradient(#1a1a1a 1.25px, transparent 1.25px);
  background-size: 8px 8px;
}

.dot-matrix-fine {
  background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
  background-size: 6px 6px;
}