.brand{
  display:block;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:50%;
  overflow:hidden;
  white-space:nowrap;
  text-indent:-9999px;
  background:url('/media/clp-logo.webp') center/cover no-repeat;
  color:transparent;
}
.brand:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* Above-the-fold photography must be visible on first paint, without waiting for scroll/reveal logic. */
.hero > img,
.hero > .hero-content,
.hero > .hero-copy,
.hero .hero-content,
.hero .hero-copy{
  opacity:1!important;
  visibility:visible!important;
}
.hero > img{
  transform:none!important;
}
.hero.tone-light{
  background:linear-gradient(160deg,#22201c,#141311 55%,#0b0a09);
}
.hero.tone-dark{
  background:linear-gradient(160deg,#d9cebe,#c3b6a3 55%,#ab9d89);
}
.hero > img{
  transition:opacity .5s ease;
}

/* Same instant-placeholder treatment for the frame-sequence photo sections. */
.frame.tone-light{
  background:linear-gradient(160deg,#22201c,#141311 55%,#0b0a09);
}
.frame.tone-dark{
  background:linear-gradient(160deg,#d9cebe,#c3b6a3 55%,#ab9d89);
}
.frame > img{
  transition:opacity .5s ease;
}

/* Keep text off the viewport edge across every page that uses the shared wrapper. */
.wrap{
  width:min(calc(100% - 48px),1600px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:950px){
  .wrap{
    width:min(calc(100% - 40px),1600px)!important;
  }
}

@media(max-width:650px){
  .brand{
    width:46px;
    height:46px;
    flex-basis:46px;
  }
  .wrap{
    width:min(calc(100% - 40px),1600px)!important;
  }
}