How come you don't need width/height 100% too? Do you get them from some other CSS?

ampshared.css provides them

We don't really have any guarantee that ampshared is loaded if we inline this code in the HEAD of the document. We should add these statements.

That's a good point, I missed that https://github.com/ampproject/amphtml/blob/main/extensions/amp-story/1.0/amp-story.css#L76 also provides them, so we're good. I don't think there are other styles we need from there, but it opens up the conversation of whether we'd need ampshared.css on stories, or we can save up those extra bytes

We don't really have any guarantee that ampshared is loaded if we inline this code in the HEAD of the document. We should add these statements.

Why do you need this change?

Inactive pages get hidden with the style:

amp-story-page:not(:first-of-type):not([distance]):not([active]) {
    transform: translateY(1000vh)!important;
}

but we want to show the first page with CSS, so we need to say that we only want to hide the non-active pages when the story is loaded. This will make the first page visible, but all the other ones not. When the story loads, all the inactive pages will be hidden (due to this rule on line 235) but before the story is loaded, the CSS I showed above will only show the first page

As seen offline, let's revisit this and only rely on [distance] and [active] attr