/* The approved mailbox cow and its original lettering, with room to breathe. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:normal}
.brand-lockup{display:block;width:164px;max-width:100%;height:auto}
.brand-symbol{display:none;width:44px;height:44px;object-fit:contain}
.brand .env-tag{margin:0 0 0 4px;font-size:.62rem}
.login-panel .login-brand{margin-bottom:2.5rem}
.login-panel .login-brand h1{margin:0;width:100%;line-height:1}
.login-panel .login-brand .brand-lockup{width:340px}

/* Rounded letterforms echo the mascot; reading and data stay in Nunito. */
h1,h2,h3{font-family:var(--display);font-weight:600}
h2{font-size:1.3rem;line-height:1.25}
h3{font-size:1rem;line-height:1.3}
.sidebar nav a{font-weight:600}
.primary,.subtle{font-weight:700}
.topbar strong,.side-label{font-weight:700}

@media(min-width:821px){
  /* The taller lockup must not push account health or sign-out offscreen. */
  .app-shell:not(.nav-collapsed) .sidebar{overflow-y:auto;scrollbar-width:thin}
  .app-shell:not(.nav-collapsed) .sidebar>*{flex-shrink:0}
  .nav-collapsed .brand-lockup{display:none}
  .nav-collapsed .brand-symbol{display:block}
  .nav-collapsed .brand{align-items:center}
}
@media(max-width:900px){
  .login-panel .login-brand{margin:0}
  .login-panel .login-brand .brand-lockup{width:clamp(200px,40vw,280px)}
}
@media(max-width:820px){
  .side-top .brand{flex-direction:row;align-items:center;gap:10px;min-width:0}
  .side-top .brand-lockup{width:132px;flex-shrink:0}
  .side-top .env-tag{margin:0}
}