/* Compact and expanded marks share the same baseline and centered anchor. */
.brand{align-items:baseline;gap:3px;line-height:1.5}
.brand>span{display:inline-flex;align-items:baseline}
.brand small{display:inline-block;flex:none;overflow:hidden;white-space:nowrap;font-family:inherit;font-size:18px;font-weight:400;letter-spacing:0;line-height:1.5;width:0;opacity:0;animation:brand-unfold 10s cubic-bezier(.4,0,.2,1) infinite;--expanded:1em}
.brand>span:first-child small{--expanded:2em}
.brand>span:nth-child(2):before{left:19px;right:auto;top:-2px}
@keyframes brand-unfold{0%,15%,92%,100%{width:0;opacity:0}30%,76%{width:var(--expanded);opacity:1}}
footer .brand small{font-size:14px}
@media(max-width:800px){
 header{display:grid;grid-template-columns:1fr;justify-items:center;height:auto;min-height:106px;padding:12px 18px 10px;gap:6px}
 header>.brand{grid-column:1;justify-self:center;margin:0}
 header>nav{justify-self:end;height:32px}
 header .login{padding:4px 12px;font-size:14px}
 footer{text-align:center}
 footer .brand{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.brand small{animation:none!important;width:var(--expanded);opacity:1}}