/* Custom lettering for the two hero title lines. */
@font-face{
  font-family:'Stellar Display';
  src:url('../fonts/stellar-display/stellar-display-regular.ttf?v=13') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Stellar Display';
  src:url('../fonts/stellar-display/stellar-display-black.ttf?v=11') format('truetype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

.hero h1{
  font-family:'Stellar Display',var(--font);
  font-weight:400;
  font-synthesis:none;
  font-kerning:normal;
  letter-spacing:.055em;
  line-height:1.25;
  text-transform:uppercase;
  text-wrap:balance;
  overflow-wrap:break-word;
}

.hero h1{
  max-width:1100px;
  font-size:clamp(2rem,5vw,4.2rem);
  letter-spacing:.065em;
  line-height:1.22;
}

.hero h1 .l1,.hero h1 .g{font-weight:900}

.hero-title-dot{
  display:inline-block;
  width:.15em;
  height:.15em;
  margin-inline:.09em .03em;
  vertical-align:.03em;
  background:var(--title-tint);
  animation:hero-title-dot-spin 20s linear infinite;
}

.hero h1 .g .hero-title-dot{
  background:var(--grad-flow);
  background-size:300% 100%;
}

@keyframes hero-title-dot-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@media(max-width:600px){
  .hero h1{font-size:clamp(1.65rem,6.8vw,2.5rem);letter-spacing:.045em}
  .hero-title-word{white-space:nowrap}
}