/* First-screen typography: large type with obvious vertical rhythm. */

/* Desktop / tablet */
@media (min-width:761px){
  html body main#top .ref-hero-title{
    width:max-content!important;
    max-width:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:clamp(12px,1.15vw,20px)!important;
    line-height:1!important;
  }
  html body main#top .ref-hero-title span{
    display:block!important;
    font-size:clamp(74px,7.25vw,118px)!important;
    line-height:1!important;
    letter-spacing:-.065em!important;
  }
  html body main#top .ref-hero-title em{
    display:block!important;
    margin:0!important;
    font-size:clamp(58px,6vw,96px)!important;
    line-height:1!important;
    letter-spacing:-.052em!important;
  }

  html body main#top .ref-hero-desc{
    width:min(36vw,570px)!important;
    max-width:570px!important;
    margin-top:clamp(28px,3.1vh,40px)!important;
    color:#edf3f0!important;
    font:500 clamp(18px,1.3vw,22px)/1.82 Arial,sans-serif!important;
    letter-spacing:0!important;
  }

  html body main#top .ref-hero-venue{
    width:min(36vw,575px)!important;
    max-width:575px!important;
    margin-top:clamp(24px,2.7vh,34px)!important;
    gap:14px!important;
    color:#eef4f1!important;
    font:500 clamp(15px,1.08vw,18px)/1.78 Arial,sans-serif!important;
  }
  html body main#top .ref-hero-venue b{
    display:block!important;
    margin-bottom:8px!important;
    font-size:1.04em!important;
    line-height:1.5!important;
  }

  html body main#top .ref-hero-date{
    margin-bottom:clamp(22px,2.5vh,32px)!important;
  }
  html body main#top .ref-hero-date strong{
    font-size:clamp(34px,3.25vw,52px)!important;
    line-height:1!important;
  }
  html body main#top .ref-hero-date span{
    margin-top:8px!important;
    font-size:clamp(11px,.96vw,15px)!important;
    line-height:1.4!important;
    letter-spacing:.06em!important;
  }

  html body main#top .ref-hero-actions{
    margin-top:clamp(26px,3vh,38px)!important;
    gap:14px!important;
  }
  html body main#top .ref-hero-btn{
    min-height:56px!important;
    height:56px!important;
    font-size:clamp(12px,.96vw,15px)!important;
    line-height:1.25!important;
    letter-spacing:.035em!important;
  }
}

/* Short laptop screens: keep visible spacing without pushing CTAs outside the hero. */
@media (min-width:761px) and (max-height:700px){
  html body main#top .ref-hero-left{
    padding-top:12px!important;
    padding-bottom:12px!important;
  }
  html body main#top .ref-hero-date{
    margin-bottom:12px!important;
  }
  html body main#top .ref-hero-title{
    gap:8px!important;
  }
  html body main#top .ref-hero-title span{
    font-size:clamp(60px,7vw,78px)!important;
  }
  html body main#top .ref-hero-title em{
    font-size:clamp(47px,5.75vw,63px)!important;
  }
  html body main#top .ref-hero-desc{
    margin-top:16px!important;
    width:min(38vw,470px)!important;
    font-size:clamp(15px,1.45vw,17px)!important;
    line-height:1.65!important;
  }
  html body main#top .ref-hero-venue{
    margin-top:13px!important;
    width:min(39vw,480px)!important;
    font-size:clamp(13px,1.2vw,15px)!important;
    line-height:1.6!important;
  }
  html body main#top .ref-hero-venue b{
    margin-bottom:5px!important;
    line-height:1.45!important;
  }
  html body main#top .ref-hero-actions{
    margin-top:16px!important;
  }
  html body main#top .ref-hero-btn{
    min-height:46px!important;
    height:46px!important;
    font-size:11px!important;
  }
}

/* Phones */
@media (max-width:760px){
  html body main#top .ref-hero-left{
    padding-top:30px!important;
    padding-bottom:40px!important;
  }

  html body main#top .ref-hero-star{
    margin-bottom:18px!important;
    font-size:19px!important;
  }

  html body main#top .ref-hero-date{
    width:220px!important;
    margin-bottom:32px!important;
    padding:11px 14px!important;
  }
  html body main#top .ref-hero-date strong{
    font-size:38px!important;
    line-height:1!important;
  }
  html body main#top .ref-hero-date span{
    margin-top:8px!important;
    font-size:11.5px!important;
    line-height:1.4!important;
  }

  html body main#top .ref-hero-title{
    width:100%!important;
    max-width:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
    line-height:1!important;
    overflow:visible!important;
  }
  html body main#top .ref-hero-title span{
    display:block!important;
    font-size:clamp(64px,19vw,82px)!important;
    line-height:1!important;
    letter-spacing:-.07em!important;
    white-space:nowrap!important;
  }
  html body main#top .ref-hero-title em{
    display:block!important;
    margin:0!important;
    font-size:clamp(47px,13.9vw,61px)!important;
    line-height:1!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
  }

  html body main#top .ref-hero-desc{
    margin-top:34px!important;
    width:100%!important;
    max-width:none!important;
    color:#f0f5f2!important;
    font-size:18px!important;
    line-height:1.85!important;
    letter-spacing:0!important;
  }

  html body main#top .ref-hero-venue{
    margin-top:28px!important;
    width:100%!important;
    max-width:none!important;
    gap:12px!important;
    color:#f1f5f3!important;
    font-size:15.5px!important;
    line-height:1.8!important;
  }
  html body main#top .ref-hero-venue b{
    display:block!important;
    margin-bottom:8px!important;
    font-size:16px!important;
    line-height:1.5!important;
  }

  html body main#top .ref-hero-actions{
    margin-top:34px!important;
    gap:14px!important;
  }
  html body main#top .ref-hero-btn,
  html body main#top .ref-hero-btn.primary,
  html body main#top .ref-hero-btn.secondary{
    min-height:62px!important;
    height:62px!important;
  }
  html body main#top .ref-hero-btn::before{
    font-size:13px!important;
    line-height:1.25!important;
    letter-spacing:.075em!important;
  }
}

@media (max-width:390px){
  html body main#top .ref-hero-title{gap:12px!important}
  html body main#top .ref-hero-title span{font-size:clamp(58px,18.2vw,70px)!important}
  html body main#top .ref-hero-title em{font-size:clamp(43px,13.1vw,52px)!important}
  html body main#top .ref-hero-desc{font-size:17.5px!important;line-height:1.82!important}
  html body main#top .ref-hero-venue{font-size:15px!important;line-height:1.76!important}
}