/* Wordmark and the orange smile under it stay still and fully drawn. */
.brand-lockup{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:0;
  line-height:1;
  text-decoration:none;
  color:#fff;
}
.brand-word{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.72rem;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.brand-word > span{display:inline-block}
.brand-gap{width:.34em}
.brand-smile{
  display:block;
  width:108%;
  height:16px;
  margin:-1px -4% 0;
  overflow:visible;
}
.brand-smile-path{
  fill:none;
  stroke:#ff7800;
  stroke-width:2.4px;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.brand-lockup.on-light{color:#141414}
.app-header .brand-word{font-size:1.5rem}
.side-brand .brand-word{font-size:1.05rem}
.side-brand .brand-smile{height:13px}
@media (max-width:640px){
  .nav .brand-word{font-size:1.35rem}
  .nav .brand-smile{height:13px}
}
@media (max-width:380px){
  .app-header .brand-word{font-size:1.12rem}
  .app-header .brand-smile{height:11px}
}
@media (prefers-reduced-motion:no-preference){
  .brand-lockup{transition:transform .4s cubic-bezier(.16,.84,.32,1)}
  .brand-lockup:hover,.brand-lockup:focus-visible{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .brand-lockup,.brand-lockup:hover,.brand-lockup:focus-visible{transform:none}
}