/* Satin brushed aluminium follows the original logo's exact alpha silhouette.
   The image beneath stays visible if masking or its asset fails to load. */
.site-header .brand{position:relative}
@supports ((mask-image:url('/assets/logo-1280.webp')) or (-webkit-mask-image:url('/assets/logo-1280.webp'))){
 .site-header .brand:has(>img[src="/assets/logo-640.webp"])::after,
 .site-header .brand:has(>img[src="/assets/logo-1280.webp"])::after{
  content:"";
  position:absolute;
  pointer-events:none;
  width:100%;
  aspect-ratio:640/71;
  left:0;
  top:50%;
  transform:translateY(-50%);
  background:
   repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 .5px,rgba(70,80,90,.14) .5px 1px,transparent 1px 2.5px),
   linear-gradient(112deg,transparent 0 16%,rgba(255,255,255,.48) 34%,transparent 49% 66%,rgba(255,255,255,.25) 82%,transparent 100%),
   linear-gradient(180deg,#d7dce0 0%,#f4f5f6 20%,#b7c0c8 47%,#d9dfe4 52%,#a2adb7 74%,#dce2e7 100%);
  -webkit-mask-image:url('/assets/logo-1280.webp');
  mask-image:url('/assets/logo-1280.webp');
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:alpha;
 }
}
@media(forced-colors:active){
 .site-header .brand::after{display:none}
}