Antimatter Site Title on Mobile Devices

My site's title is a little on the long side. It's fine in the desktop view, but on mobile devices the title wraps below the header area into the main body. The hamburger icon also gets shifted as a result.

What's the right CSS class or id I need to be modifying to shrink ONLY the mobile site title?

If you inspect it with the web developer tools, you can see there are 2 sizes. One when page first loads, and another when it's scrolled.

The one when it loads, is the standard size, so you will have to add a media query in the scss/template/_header.scss file, around line 54 for the #header #logo h3 element:

@include breakpoint(mobile-only) {
    font-size: 20px;
}

Then you will need to add a similar media query for the #header.scrolled #logo h3 element around line 21

Afterwards you will need to recompile the scss. See the docs for info on how to do this