@media (max-width:700px){
  .masthead{min-height:auto;padding:16px;display:flex;flex-wrap:wrap;gap:14px}
  .brand{font-size:18px;flex:1}
  .masthead nav{order:2;width:calc(100% + 32px);margin-left:-16px;padding:0 16px;overflow:auto}
  .masthead nav a{padding:8px 10px}
  .roles{order:3;width:100%;gap:7px}
  .roles label{display:none}
  .roles select{flex:1;max-width:none;padding:6px 19px 6px 7px;font-size:11px}
  h1{overflow-wrap:anywhere}
}