@layer block {
    .story-quote {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);

        /* A quote that leads somewhere still has to read as a quote, so the
           link brings no colour and no underline of its own — only a focus
           ring, which it must never lose. */
        & .story-quote__link {
            color: inherit;
            text-decoration: none;

            &:focus-visible {
                outline: 2px solid var(--color-accent);
                outline-offset: var(--space-1);
            }
        }

        & .story-quote__text {
            font-family: var(--font-display);
            font-size: var(--text-body-lg);
            font-weight: var(--weight-display);
            line-height: var(--leading-body-lg);
            color: var(--color-ink);
            letter-spacing: -0.01em;

            &::before {
                content: "„";
                color: var(--color-accent);
            }

            &::after {
                content: "“";
                color: var(--color-accent);
            }
        }

        & .story-quote__attribution {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color-text-muted);

            &::before {
                content: "— ";
            }
        }
    }
}