/* BUILD 07: precisely layered silhouette shadow and centred yellow hero band.
   Keep the Build 06 navigation, imagery, activities and other routes untouched. */

/* The homepage hero itself stays black. The texture is an independent middle
   stripe sized against the actual mobile photo frame, never to the section bottom. */
.rbh-hero { background: #050505 !important; }
.rbh-hero::before {
  top: 46px;
  bottom: auto;
  height: 202px;
  left: 0;
  right: 0;
  background: #ffe000 url('/assets/yellow-texture.webp') center / 950px auto;
  z-index: 0;
  pointer-events: none;
}
.rbh-hero .rbh-hero-inner { position:relative; z-index:1; }

/* Every line has two separate paints: a solid-black letter silhouette below,
   then the original coloured lettering with its clean black stroke above. */
.rbh-hero h1 { filter:none !important; }
.rbh-hero h1 > .rbh-line {
  position: relative;
  isolation: isolate;
  display: block;
  width: max-content;
  max-width: none;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none !important;
  filter: none;
}
.rbh-hero h1 > .rbh-line::before {
  content: attr(data-text);
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  transform: translate(4px, 5px);
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: #050505;
  -webkit-text-fill-color: #050505;
  -webkit-text-stroke: 4px #050505;
  text-shadow: none !important;
  pointer-events: none;
}
.rbh-hero h1 .rbh-line > .rbh-ink {
  display: block;
  position: relative;
  z-index: 1;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px #050505;
  paint-order: stroke fill;
  text-shadow: none !important;
}
.rbh-hero h1 .rbh-line-red > .rbh-ink {
  color: #ed172b;
  -webkit-text-fill-color: #ed172b;
}

@media (max-width: 920px) {
  /* For a 190px-high photograph, the band runs from 32px to 158px,
     leaving approximately 1/6 of its height uncovered at each end. */
  .rbh-hero::before {
    top: 32px;
    bottom: auto;
    height: 127px;
    background-size: auto 280px;
  }
  .rbh-hero-text {
    align-self: start;
    padding-top: 29px;
  }
  .rbh-hero h1 > .rbh-line::before { transform: translate(3.5px, 4.5px); }
  .rbh-hero h1 .rbh-line > .rbh-ink { -webkit-text-stroke-width: 1.8px; }
}

@media (min-width:701px) and (max-width:920px) {
  /* 230px photograph on tablets. */
  .rbh-hero::before { top:38px; height:154px; }
  .rbh-hero-text { padding-top:32px; }
}

@media (max-width: 370px) {
  /* The smaller 176px photograph keeps the same 1/6 top/bottom proportions. */
  .rbh-hero::before { top: 29px; height: 117px; }
  .rbh-hero-text { padding-top: 26px; }
  .rbh-hero h1 > .rbh-line::before {
    transform: translate(3px, 4px);
    -webkit-text-stroke-width: 3px;
  }
  .rbh-hero h1 .rbh-line > .rbh-ink { -webkit-text-stroke-width: 1.6px; }
}