Making subheader smaller on mobile + aligning site name with menu bar?

Site URL: https://www.charlestheori.com

Hi,

Two questions regarding text in the header of my site (charlestheori.com for reference).

1. I added a subheader to my site using the below code:

a#site-title:after {
    content: "nyc-based copywriter with no interest in writing a screenplay";
    display: block;
    font-size: 16px;
    color: black;
    font-family: franklin-gothic-urw;
}

It looks great on desktop, but on mobile it runs into the hamburger icon (see screenshot). 

Is there a way to the text smaller/wrap before it reaches the hamburger icon just on mobile?

2. I suppose since I added in the custom CSS to my header, the site name is now sits higher than the menu bar (see attached pic with red line for reference). Is there a way to make it the same x-position as the menu bar?

Thanks!

Q1. It looks like you solved this?

Q2. Add to Design > Custom CSS

.header-title-nav-wrapper {
    align-items: flex-end;
}