/* Animated wave sits beside the wordmark within its existing height. */
.studio-brand{width:310px;display:flex;gap:14px;align-items:center;height:28px;flex-shrink:0}.studio-brand>.brand-wordmark{width:218px;height:28px;object-fit:contain;display:block;flex:none}.brand-wave{display:block;position:relative;width:78px;height:28px;flex:none;mix-blend-mode:screen;overflow:hidden}.brand-wave>img,.brand-wave>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.brand-wave>video{opacity:0}.brand-wave.wave-ready>video{opacity:1}.brand-wave.wave-ready>img{opacity:0}html[data-motion=off] .brand-wave>video{display:none}html[data-motion=off] .brand-wave>img{opacity:1}
@media(min-width:761px) and (max-width:1100px){.studio-brand{width:268px;gap:10px}.studio-brand>.brand-wordmark{width:190px}.brand-wave{width:68px}.studio-header nav{gap:15px}.studio-header nav a{font-size:11px}.studio-nav-listen{padding:11px 14px}}
@media(max-width:760px){.studio-brand{width:276px;gap:12px;height:28px}.studio-brand>.brand-wordmark{width:196px;height:28px}.brand-wave{width:68px;height:28px}}
@media(prefers-reduced-motion:reduce){.brand-wave>video{display:none!important}.brand-wave>img{opacity:1!important}}