/* Build 34. Keep original source images/art, compensate only where requested. */

/* Clients: no identical white cards or cropped logos; transparent assets have
   naturally different aspect ratios and travel across the charcoal panel. */
.rbh-page .rbh-clients .rbh-client-set .rbh-client-logo {
  flex:0 0 auto!important;
  width:auto!important;min-width:0!important;height:98px!important;min-height:0!important;
  padding:6px 18px!important;margin:0!important;
  background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.rbh-page .rbh-clients .rbh-client-set .rbh-client-logo img {
  display:block!important;width:auto!important;height:auto!important;
  max-width:240px!important;max-height:82px!important;
  object-fit:contain!important;object-position:center!important;
  border:0!important;background:transparent!important;
  filter:none!important;
}
.rbh-page .rbh-client-set {align-items:center!important;gap:8px!important;}
.rbh-page .rbh-client-track {align-items:center!important;}
@media(max-width:700px) {
 .rbh-page .rbh-clients .rbh-client-set .rbh-client-logo {height:90px!important;padding:6px 16px!important;}
 .rbh-page .rbh-clients .rbh-client-set .rbh-client-logo img {max-height:75px!important;max-width:205px!important;}
}

/* Shared banners: keep the existing ribbon dimensions, enlarge/embolden the
   lettering inside those dimensions, and emboss a low-contrast yellow greeble. */
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon {
  background-color:#ffe400!important;
  background-image:linear-gradient(rgba(255,231,0,.78),rgba(255,231,0,.78)),url('/assets/yellow-texture.webp')!important;
  background-repeat:repeat!important;
  background-size:auto,410px auto!important;
  background-position:center!important;
  font-weight:1000!important;
  -webkit-text-stroke:.65px #050505!important;
  box-sizing:border-box!important;
  align-content:center!important;
}
/* Preserve precisely the original 31.33px high mobile homepage banner. */
@media(max-width:700px) {
 .rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon {
   height:31.33px!important;line-height:1!important;font-size:21.7px!important;
   padding-top:0!important;padding-bottom:0!important;
   display:flex!important;align-items:center!important;
 }
 .rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon {
   height:33.89px!important;line-height:1!important;font-size:22.2px!important;
   padding-top:0!important;padding-bottom:0!important;
   display:flex!important;align-items:center!important;
 }
}
@media(min-width:701px) {
 .rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon {font-size:clamp(25px,2.8vw,37px)!important;}
 .rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon {font-size:clamp(27px,2.9vw,38px)!important;}
}
/* The brick's red right-hand edge and the yellow banner's left-hand edge
   always have an equal top and bottom gap (X=Y): a shared skew, no secondary
   transform, and flush local x coordinates. Keep the exact eight studs. */
.rbh-page .rbh-ribbon::before,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon::before {
  transform:none!important; background-image:url('/assets/ribbon-brick-vertical.png')!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Solid offset text silhouette. Fill the entire diagonal displacement with
   contiguous 1px shadows behind the existing black stroke, not sparse copies. */
.rbh-interior .rbh-play-page .rbh-hero h1 .rbh-play-line {
  -webkit-text-stroke:2.5px #050505!important;
  paint-order:stroke fill!important;
  text-shadow:1px 1px 0 #050505,2px 1px 0 #050505,3px 1px 0 #050505,4px 1px 0 #050505,1px 2px 0 #050505,2px 2px 0 #050505,3px 2px 0 #050505,4px 2px 0 #050505,5px 2px 0 #050505,1px 3px 0 #050505,2px 3px 0 #050505,3px 3px 0 #050505,4px 3px 0 #050505,5px 3px 0 #050505,6px 3px 0 #050505,1px 4px 0 #050505,2px 4px 0 #050505,3px 4px 0 #050505,4px 4px 0 #050505,5px 4px 0 #050505,6px 4px 0 #050505,7px 4px 0 #050505,2px 5px 0 #050505,3px 5px 0 #050505,4px 5px 0 #050505,5px 5px 0 #050505,6px 5px 0 #050505,7px 5px 0 #050505,8px 5px 0 #050505,3px 6px 0 #050505,4px 6px 0 #050505,5px 6px 0 #050505,6px 6px 0 #050505,7px 6px 0 #050505,8px 6px 0 #050505,4px 7px 0 #050505,5px 7px 0 #050505,6px 7px 0 #050505,7px 7px 0 #050505,8px 7px 0 #050505,5px 8px 0 #050505,6px 8px 0 #050505,7px 8px 0 #050505,8px 8px 0 #050505!important;
}
@media(max-width:700px) {
 .rbh-interior .rbh-play-page .rbh-hero h1 .rbh-play-line {-webkit-text-stroke:1.9px #050505!important;}
}

/* One white, continuous, gently rounded parallelogram on every frame. Both
   layers are kept within their own bounds; no repeated or broken SVG masking. */
.rbh-interior .rbh-play-page .rbh-hero-frame {
  position:relative!important;box-sizing:border-box!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:#fff!important;overflow:hidden!important;
  clip-path:polygon(10% 0%,96.5% 0%,99% 2%,91% 98%,88.5% 100%,3.5% 100%,1% 98%,9% 2%)!important;
  -webkit-clip-path:polygon(10% 0%,96.5% 0%,99% 2%,91% 98%,88.5% 100%,3.5% 100%,1% 98%,9% 2%)!important;
}
.rbh-interior .rbh-play-page .rbh-hero-frame .rbh-play-hero-open {
  display:block!important;position:absolute!important;
  inset:5px!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  border:0!important;outline:0!important;border-radius:0!important;
  clip-path:polygon(10% 0%,96.5% 0%,99% 2%,91% 98%,88.5% 100%,3.5% 100%,1% 98%,9% 2%)!important;
  -webkit-clip-path:polygon(10% 0%,96.5% 0%,99% 2%,91% 98%,88.5% 100%,3.5% 100%,1% 98%,9% 2%)!important;
}
.rbh-interior .rbh-play-page .rbh-hero-frame .rbh-play-hero-open img {
  width:100%!important;height:100%!important;display:block!important;
  border:0!important;border-radius:0!important;outline:0!important;
  clip-path:none!important;-webkit-clip-path:none!important;
  object-fit:cover!important;
}
/* Lightbox respects the photo's own composition. User can pinch, pan, double
   tap to zoom, swipe at 1x, and single tap to dismiss the whole overlay. */
.lightbox .lightbox-figure img {
  touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;will-change:transform;
  transform-origin:center center;
  cursor:zoom-in;
}
.lightbox .lightbox-figure img.is-zoomed {cursor:grab;}
.lightbox .lightbox-figure {overflow:visible!important;}
.lightbox .lightbox-caption {pointer-events:none;}
/* Two approved marks contain very dark source lettering. A hairline halo
   preserves their original pixels while keeping those letters legible on black. */
.rbh-page .rbh-clients .rbh-client-0 img,
.rbh-page .rbh-clients .rbh-client-5 img {
 filter:drop-shadow(0 0 1px rgba(255,255,255,.65))!important;
}
/* The legacy museum grid's percentage columns plus its gap produced a small
   horizontal scroll on tablets. Preserve the museum layout while constraining it. */
.museum-page .museum-hero-grid {
 grid-template-columns:minmax(0,41fr) minmax(0,59fr);
}
.museum-page .museum-photo {min-width:0;max-width:100%;box-sizing:border-box;}
@media(max-width:640px){.museum-page .museum-hero-grid{grid-template-columns:minmax(0,1fr);}}
