/* ==========================================================================
   The endless word column that scrolls behind the glass
   Each word sets its own typeface and a size multiplier (--s).
   ========================================================================== */

@font-face {
  font-family: "HVGE Rave";
  src: url("../fonts/HVGE-Rave-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "HVGE Screen";
  src: url("../fonts/HVGE-Screen-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "HVGE Tire";
  src: url("../fonts/HVGE-Tire-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  font-feature-settings: "dlig";
}

@font-face {
  font-family: "HVGE Worms";
  src: url("../fonts/HVGE-Worms-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "HVGE BAM";
  src: url("../fonts/HVGE-BAM-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "HVGE Fall";
  src: url("../fonts/HVGE-Fall-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}


.column {
  position: absolute;
  inset: 0 0 auto;
  will-change: transform;
  transform: translate3d(0, 110vh, 0);   /* off-screen until js/word-column.js takes over */
}

.column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.column li {
  padding: .04em 0;
  color: var(--ink);
  font-size: calc(var(--s, 1) * clamp(34px, 6.2vw, 96px));
  line-height: 1.02;
  white-space: nowrap;
  user-select: none;
}

.word--rave { font-family: "HVGE Rave", sans;           font-weight: 400; font-stretch: 100%; }
.word--scream { font-family: "HVGE Screen", sans;           font-weight: 400; --s: 1.35 }
.word--coil { font-family: "HVGE Tire", sans;           font-weight: 400; --s: 2.00 }
.word--worms { font-family: "HVGE Worms", sans;           font-weight: 400; --s: 1.00 }
.word--bam { font-family: "HVGE BAM", sans;           font-weight: 400; --s: 1 }
.word--fall { font-family: "HVGE Fall", sans;           font-weight: 400; --s: 1.40 }