white-space: nowrap;
Sì, visivamente l'effetto è lo stesso, lo avevo considerato anche io in un primo momento ma la dimensione dell'elemento <a> restava comunque più piccola del testo che effettivamente conteneva. Ora, non ho idea di quali conseguenze potrebbe generare ma, dato che si tratta di un link (per cui un'area sensibile agli eventi del mouse) mi è sembrato più corretto "adeguarne" la dimensione piuttosto che permettere l'overflow impedendone giusto il ritorno a capo. Poi vedi tu

Come potrei fare questo che dici?
Supponendo che al di sotto dei 400px si debba disporre su più righe, prova ad aggiungere una roba del genere:
codice:
@media screen and (max-width: 400px) {
  .site-title a {
    width: 110px;
    line-height: 1em;
    white-space: normal;
  }
}
Se serve metti qualche !important, oppure sistema questa parte opportunamente dopo le altre regole.