@include namespace('body') {
    @include store((
        --colors: (
            --emph-fg: prop(--colors --accent --color, $global: true),
            --emph-bg: prop(--colors --bg-hi, $global: true)
        )
    ));

    @include scope(namespace()) {
        font-size: 1 / 16 * 18em;

        > :first-child {
            margin-top: 0;
        }

        :link {
            color: prop(--colors --link --idle-body, $global: true);
        }

        :visited {
            color: prop(--colors --link --visited-body, $global: true);
        }

        h1,
        h2,
        h3,
        h4 {
            transform: translateX(-.06em);
        }

        h1 {
            @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale);
        }

        h2 {
            @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale);
        }

        h3 {
            @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);

            letter-spacing: .05em;
            text-transform: uppercase;
        }

        h4,
        h5,
        h6 {
            @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);

            letter-spacing: .1em;
            text-transform: uppercase;
        }

        h5,
        h6 {
            color:       currentColor;
            font-weight: 400;
        }

        @include element('title-inner') {
            background-image: linear-gradient(
                to top,
                transparent .15em,
                #{prop(--colors --emph-bg)} .15em,
                #{prop(--colors --emph-bg)} .6em,
                transparent .6em
            );
        }

        img {
            max-width: 100%;
        }

        @include media('<=sm') {
            font-size: 1 / 16 * 17em;
        }

        @include media('<=xs') {
            font-size: 1em;
        }
    }
}