@font-face{
  font-family:'Unbounded';
  src:url('./media/unbounded-variable.ttf') format('truetype');
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

/* Home-only hierarchy: supporting copy is half the rhythm headline size. */
#home{--hero-type-height:1.2;--hero-rhythm-size:clamp(30px,4.8vw,82px)}
#home h1,#home .hero-copy.right,#home #hero-title{
  font-family:'Unbounded',Arial,sans-serif;
  font-weight:900;
  font-synthesis:none;
  letter-spacing:-.05em;
  opacity:.85;
}
#home h1{
  font-size:clamp(44px,5.8vw,100px);
  line-height:1.06;
  transform:scaleY(var(--hero-type-height));
  transform-origin:left top;
  margin-top:22px;
}
#home .hero-copy.right{
  font-size:calc(var(--hero-rhythm-size) * .5);
  line-height:1.2;
}
#home .hero-type{
  display:block;
  transform:scaleY(var(--hero-type-height));
  transform-origin:center;
}
#home .hero-copy.right .hero-type{transform-origin:right center}
#home #hero-title{
  font-size:var(--hero-rhythm-size);
  line-height:1.1;
  white-space:nowrap;
  margin:22px 0 25px;
}
#home .hero-bottom{left:7%;right:7%;bottom:85px}
@media(max-width:700px){
  #home{--hero-rhythm-size:clamp(24px,6.6vw,42px)}
  #home .hero-copy.left{top:22%}
  #home h1{font-size:clamp(40px,10.5vw,64px);line-height:1.08;margin-top:17px}
  #home .hero-copy.right{top:49%;line-height:1.28}
  #home #hero-title{margin:18px 0 22px}
  #home .hero-bottom{left:16px;right:16px;bottom:95px}
}
@media(max-height:550px) and (min-width:701px){
  #home{--hero-rhythm-size:clamp(28px,7.2vh,40px)}
  #home .hero-copy.left{top:20%}
  #home h1{font-size:clamp(35px,9vh,50px)}
  #home .hero-copy.right{top:40%}
  #home #hero-title{margin:16px 0 18px}
  #home .hero-bottom{bottom:45px}
  #home .film-control{bottom:20px}
}