@font-face{
  font-family:ManropeNav;
  src:url('../fonts/manrope-variable.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

.site-header nav{font-family:ManropeNav,var(--body);font-weight:600}
.ribbon div{transform:translate3d(calc(-1% + var(--ribbon-drift,0px)),0,0)}

@media(min-width:600px){
  .site-header nav{font-size:clamp(14px,calc(16 * var(--hero-unit)),18px)}
  .hero-wordmark{top:calc(88 * var(--hero-unit))}
  .hero-statement{font-size:calc(100 * var(--hero-unit));line-height:1.06}
}
@media(max-width:599px){
  .site-header nav{font-size:12px}
  /* Keep horizontal centering independent of the entrance animation's transform. */
  .hero-portrait{left:calc(50% - 275px);right:auto}
  .hero-wordmark{top:clamp(48px,18vw,80px)}
  .hero-statement{font-size:7.2vw;line-height:1.08}
  .hero-intro{top:490px}
}
@media(max-width:359px){
  .hero-portrait{left:calc(50% - 255px)}
}
@media(prefers-reduced-motion:reduce){
  .ribbon div{transform:translateX(-1%)}
}