/* Restore the eight original typographic identities directly from the approved
   lossless artwork. The title plane is stationary; the existing photo plane is
   still the only part that zooms. Keep native button names and actions intact. */
#view-surfaces .surf-material-card-title{
  position:relative;
  color:transparent;
  font-size:0
}
#view-surfaces .surf-material-card-title::before{
  content:"";
  position:absolute;
  width:92%;
  aspect-ratio:374 / 60;
  left:4%;
  top:50%;
  transform:translateY(-50%);
  background-image:url('/assets/bco_web_material_grid_exact_lossless_1536x717_20260911.webp');
  background-size:410.695187166% auto;
  background-position:var(--material-title-x) var(--material-title-y);
  background-repeat:no-repeat;
  pointer-events:none
}
/* Source windows: x=29/403/777/1151, y=0/380, size=374x60.
   Wider than the photographic crops so the longest lettering is not clipped. */
#view-surfaces .surf-material-hotspot--c1{--material-title-x:2.495697074%}
#view-surfaces .surf-material-hotspot--c2{--material-title-x:34.681583477%}
#view-surfaces .surf-material-hotspot--c3{--material-title-x:66.867469880%}
#view-surfaces .surf-material-hotspot--c4{--material-title-x:99.053356282%}
#view-surfaces .surf-material-hotspot--top{--material-title-y:0%}
#view-surfaces .surf-material-hotspot--bottom{--material-title-y:57.838660578%}
/* High-contrast modes may suppress background artwork. Keep the underlying
   title available there instead of relying on its original printed colors. */
@media(forced-colors:active){
  #view-surfaces .surf-material-card-title{color:CanvasText;font-size:clamp(8px,1.9vw,28px)}
  #view-surfaces .surf-material-card-title::before{display:none}
}