/* BUILD 14: homepage brand header, landscape hero, photo-card borders.
   All interior pages and remaining homepage components are unchanged. */

/* Yellow fill, black inner keyline, red outer outline, as on the supplied
   Roving Bricks logotype reference. Two real text layers, not jagged shadows. */
.rbh-masthead .rbh-brand-name {
  display:inline-grid;
  grid-template-columns:1fr;
  align-items:center;
  justify-items:center;
  min-width:0;
  color:#fff12b;
  font-family:var(--display);
  font-weight:900;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.014em;
  line-height:1;
  padding:0 0 0 88px;
  margin:0;
  filter:none;
  -webkit-text-stroke:0;
  font-size:clamp(46px,7vw,106px);
  white-space:nowrap;
}
.rbh-brand-name .rbh-brand-edge,
.rbh-brand-name .rbh-brand-ink {
  grid-area:1/1;
  display:block;
  font:inherit;
  letter-spacing:inherit;
  white-space:nowrap;
}
.rbh-brand-name .rbh-brand-edge {
  color:#ed202b;
  -webkit-text-fill-color:#ed202b;
  -webkit-text-stroke:8px #ed202b;
  paint-order:stroke fill;
}
.rbh-brand-name .rbh-brand-ink {
  color:#ffef26;
  -webkit-text-fill-color:#ffef26;
  -webkit-text-stroke:3px #050505;
  paint-order:stroke fill;
}
.rbh-masthead .rbh-brand-mark img {
  filter:drop-shadow(-2px 0 0 white) drop-shadow(2px 0 0 white)
    drop-shadow(0 -2px 0 white) drop-shadow(0 2px 0 white);
}

/* HERO ONLY: top and bottom truly horizontal, with angled sides.
   Remove the scale/shear that made the image a tall, narrow parallelogram. */
.rbh-page .rbh-hero-frame {
  transform:none!important;
  width:100%!important;
  height:235px!important;
  margin:0!important;
  padding:6px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:hidden!important;
}
.rbh-page .rbh-hero-frame>img {
  transform:none!important;
  width:100%!important;
  height:100%!important;
  clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)!important;
  border:0!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* All other homepage photos are now normal rectangles: a narrow yellow
   outside border, a black inner border, and no angled/skewed sides. */
.rbh-page .rbh-feature-image,
.rbh-page .rbh-rove-photo {
  transform:none!important;
  clip-path:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:2px solid #ffe400!important;
  padding:3px!important;
  background:#050505!important;
  border-radius:7px!important;
  box-shadow:0 2px 0 #121212!important;
  width:calc(100% - 10px)!important;
  margin:0 5px 12px!important;
}
.rbh-page .rbh-feature-image>img,
.rbh-page .rbh-rove-photo>img {
  transform:none!important;
  clip-path:none!important;
  border:0!important;
  border-radius:2px!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

@media (max-width:920px) {
  .rbh-masthead-inner {min-height:89px; padding:9px 0 12px;}
  .rbh-masthead .rbh-brand-name {
    font-size:clamp(32px,8.8vw,69px);
    padding-left:59px;
    letter-spacing:.008em;
  }
  .rbh-brand-name .rbh-brand-edge {-webkit-text-stroke-width:5px;}
  .rbh-brand-name .rbh-brand-ink {-webkit-text-stroke-width:1.8px;}
  .rbh-brand-mark {width:57px;}
  .rbh-page .rbh-hero-inner {
    width:calc(100% - 20px);
    height:180px!important;
    min-height:180px!important;
    grid-template-columns:49% 51%;
    align-items:center;
    padding:0!important;
  }
  .rbh-hero::before {top:45px!important;height:90px!important;bottom:auto!important;}
  .rbh-page .rbh-hero-text {
    min-height:90px!important;
    height:90px!important;
    align-self:start!important;
    margin:45px 0 0!important;
    padding:0!important;
    display:flex!important;
    justify-content:center;
    align-items:center;
  }
  .rbh-page .rbh-hero-frame {
    height:138px!important;
    width:calc(100% + 8px)!important;
    margin:0 0 0 -8px!important;
    padding:5px!important;
  }
  .rbh-page .rbh-feature-image {height:122px!important;}
  .rbh-page .rbh-rove-photo {height:142px!important;}
}
@media (min-width:701px) and (max-width:920px) {
  .rbh-page .rbh-hero-inner {height:260px!important;min-height:260px!important;}
  .rbh-hero::before {top:60px!important;height:140px!important;}
  .rbh-page .rbh-hero-text {height:140px!important;min-height:140px!important;margin-top:60px!important;}
  .rbh-page .rbh-hero-frame {height:210px!important;}
  .rbh-page .rbh-feature-image {height:175px!important;}
  .rbh-page .rbh-rove-photo {height:210px!important;}
}
@media (max-width:370px) {
  .rbh-masthead-inner {min-height:83px;}
  .rbh-brand-mark {width:51px;}
  .rbh-masthead .rbh-brand-name {font-size:clamp(28px,8.6vw,32px);padding-left:54px;}
  .rbh-page .rbh-hero-inner {height:166px!important;min-height:166px!important;}
  .rbh-hero::before {top:41px!important;height:84px!important;}
  .rbh-page .rbh-hero-text {height:84px!important;min-height:84px!important;margin-top:41px!important;}
  .rbh-page .rbh-hero-frame {height:128px!important;}
  .rbh-page .rbh-feature-image {height:112px!important;}
  .rbh-page .rbh-rove-photo {height:134px!important;}
}

/* Give the business name the broad, dominant treatment of the reference.
   The logo and wordmark share the same horizontal header without overlapping. */
@media (min-width:921px) {
  .rbh-masthead-inner {
    min-height:174px;
    width:calc(100% - 36px);
    max-width:1500px;
    justify-content:flex-end;
    padding:8px 0 13px;
  }
  .rbh-brand-mark{width:140px;left:0;}
  .rbh-masthead .rbh-brand-name{
    width:calc(100% - 175px);
    padding-left:0;
    margin-left:175px;
    font-size:clamp(65px,11.4vw,162px);
  }
}
@media (max-width:920px) {
  .rbh-masthead-inner {justify-content:flex-end;width:calc(100% - 22px);}
  .rbh-brand-mark {width:64px;left:0;}
  .rbh-masthead .rbh-brand-name {
    width:calc(100% - 74px);
    padding-left:0;
    margin-left:74px;
    font-size:clamp(35px,10vw,84px);
  }
}
@media (max-width:370px) {
  .rbh-brand-mark {width:55px;}
  .rbh-masthead .rbh-brand-name {
    width:calc(100% - 65px);
    margin-left:65px;
    font-size:clamp(32px,10vw,36px);
  }
}