/* An outlined lockup keeps the drawing and spacing identical at every size. */
.site-header .brand{width:222px;min-height:48px;padding:0;gap:0;flex:none}
.site-header .brand-lockup{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:none}
.brand-glyph{transform-box:fill-box;transform-origin:50% 46%;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.brand-letters{fill:currentColor}
@media(hover:hover){.brand:hover .brand-glyph{transform:rotate(-7deg) translateY(-1px)}}
.brand:focus-visible .brand-glyph{transform:rotate(-7deg)}
.site-header .brand:active{transform:scale(.985)}
.brand:active .brand-glyph{transform:rotate(-3deg) scale(.96)}
body.is-playing .site-header .brand{width:188px;min-height:42px}
@media(max-width:700px){.site-header .brand{width:169px;min-height:44px}body.is-playing .site-header .brand{width:151px;min-height:42px}}
@media(max-width:360px){.site-header .brand{width:153px}body.is-playing .site-header .brand{width:145px}}
@media(prefers-reduced-motion:reduce){.brand-glyph{transition:none}.brand:hover .brand-glyph,.brand:focus-visible .brand-glyph,.brand:active .brand-glyph,.site-header .brand:active{transform:none}}