Flip heading vertical, no break and stay in place!

Hey TT4

I am using the RSVP pattern as a generic hero theme of my TT4 site with some css effects added to it.

I am adding the RSVP to my store and using “Archive Title” block as heading instead of the native heading for a dynamic transition of text/descriptor.

The heading block has a flip 90 deg function and the Archive Title does not. So I added a css class to the block and threw a few lines in my child theme.

/******** Rotate Text - Rotated Headings ********/
.rotate-counter-clock-90 {
    transform: rotate(-90deg);
	/*white-space: nowrap;*/
}

That works nicely but the title/heading is all over the place:

1. The title breaks the word for some reason I do not understand instead of just extending the height of the block. Left column is a Stack block set to horizontal.
2. Adding the white-space nowrap to my css does the trick of keeping things in one line, but now the heading goes on vacation all over the page. A shorter word goes here, and a longer word goes here.

I tried adjusting spacing, left center right align, top bottom align etc. I am confused. Here is a backend view.

Any help is appreciated. Thx

The page I need help with: [log in to see the link]