I started with Harlowe, a while ago. Like you, I started doing JavaScript and CSS to control the layout.
It’s been awhile since I used Harlowe so I don’t know if things have changed since 3.3.3 in a significant way, but you are correct in that the <tw-passage> is removed and appended within <tw-story>.
I took a route where I injected my own HTML into the DOM, then moved the <tw-story> tag into my HTML. I’m not saying this will solve your problem, but it may jog something in your mind as to how to solve your issue. I think you and I belong to a mere handful of authors that push Harlowe where it’s not supposed to go. 
→ https://intfiction.org/t/harlowe-thinking-outside-the-box/61328/14
The one thing that raises a red flag in my mind is that you are using JavaScript code to affect the rendering size. Can CSS alone not solve this issue?
EDIT: I also noticed that you have some missing {} brackets in your CSS.