Ok this took some time, but I think this will work…
First I would remove this –
.header-image .site-title > a {
margin-top: -12px;
}
Then add something like this to your CSS –
.front-page .site-header {
padding: 10px 0;
}
.site-container .site-header.light {
padding: 10px 0 0;
}
.header-image .light .site-title > a {
height: 60px;
}
p.site-title {
margin-bottom: 0;
}
You can either add that code to your CSS, or you can adjust those already existing sections in your CSS. It would probably be easier to just add these to your CSS. You can add !important if one of them doesn’t work, but hopefully everything should work as is without needing to do that.
You can add or reduce padding if you want to as well.
Let me know if this works.
.
