/* The header reserves the full lockup width throughout the logo animation. */
.brand[data-vp-logo]{display:inline-flex;align-items:center;gap:8px;position:relative;flex:0 1 auto;min-width:0;min-height:44px;isolation:isolate}
.brand[data-vp-logo] .vp-brand-mark{display:block;position:relative;flex:0 0 44px;width:44px;height:44px;overflow:hidden}
.vp-brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand[data-vp-logo] .vp-brand-word{display:block;min-width:0;white-space:nowrap;line-height:1.2;color:var(--ink,#1d1d1f);transform-origin:left center}
.brand[data-vp-logo] .vp-brand-word>span{color:var(--blue,#0071e3)}
.vp-brand-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.brand[data-brand-forming] .vp-brand-mark img,.brand[data-brand-forming] .vp-brand-word{opacity:0}
@media(max-width:680px){
  .brand[data-vp-logo]{min-height:40px;gap:6px;font-size:clamp(17px,5.5vw,22px)}
  .brand[data-vp-logo] .vp-brand-mark{flex-basis:40px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .vp-brand-canvas{display:none}
  .brand[data-vp-logo] .vp-brand-mark img,.brand[data-vp-logo] .vp-brand-word{opacity:1!important;transform:none!important}
}