@layer block {
    .story-page {
        text-align: center;

        & .story-page__topic {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color-accent);
        }

        & .story-page__words {
            font-family: var(--font-display);
            /* The product is six words; on this page they are the page. */
            font-size: var(--text-display-story);
            font-weight: var(--weight-display);
            line-height: var(--leading-display);
            letter-spacing: -0.02em;
            color: var(--color-ink);
            text-wrap: balance;
        }

        & .story-page__card {
            display: block;
            width: 100%;
            height: auto;
            margin-inline: auto;
            border-radius: var(--radius-md);
            /* Reserved by the width/height attributes, but the placeholder is
               visible while the card rasterizes on a first-ever request. */
            background: var(--color-surface-container);
        }

        /* The share box caps its own width and relies on its container to place
           it. On the share page a centering flex column does that; here the page
           is an ordinary flow, so it has to be said. */
        & .share-box {
            margin-inline: auto;
        }
    }
}