/* Pin the home-page artwork to its own viewport layer; the logo and menu scroll normally. */
@media (max-width:760px){
  #home-site-header,
  #home-site-header.is-scrolled{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%;
    margin:0 0 -72px!important;
    z-index:1100!important;
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body:has(.popular-showcase) #home-site-header .brand{
    position:relative!important;
    z-index:auto!important;
    top:auto!important;
    left:auto!important;
    margin-left:-3px!important;
    transform:none!important;
  }

  body:has(.popular-showcase) .home-header-artwork{
    display:block!important;
    position:fixed!important;
    z-index:1099!important;
    top:0!important;
    right:0!important;
    left:0!important;
    width:100%;
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    margin:0!important;
    background:transparent!important;
    pointer-events:none;
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  body:has(.popular-showcase) .home-header-artwork img{
    display:block;
    position:absolute!important;
    z-index:1;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    width:min(78vw,290px);
    height:72px;
    transform:translate3d(-50%,-50%,0);
    -webkit-transform:translate3d(-50%,-50%,0);
    object-fit:cover;
    object-position:center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Let the first tour photos continue under the transparent header. */
  body:has(.popular-showcase) .popular-showcase{
    padding-top:0!important;
    background:transparent!important;
  }

  body:has(.popular-showcase) .popular-showcase .popular-panel,
  body:has(.popular-showcase) .popular-showcase .popular-panels:hover .popular-panel,
  body:has(.popular-showcase) .popular-showcase .popular-panels:hover .popular-panel:hover,
  body:has(.popular-showcase) .popular-showcase .popular-panel:focus-within{
    min-height:50svh!important;
  }

  body:has(.popular-showcase) .popular-showcase__wordmark--mobile-top{
    display:block!important;
    z-index:2;
    width:100%;
    top:calc(15svh + 42px);
    font-size:clamp(28px,7vw,56px);
    letter-spacing:.04em;
  }
}