.koenig-lexical {
    /* Content Styles
    /*
    /* We use only margin-top to set the vertical spacings. The styles below
    /* set up the margin for content pairs (e.g. paragraph preceded by a heading).
    /* -------------------------------------------------------------------- */
    .kg-prose {
        /* Reset margins */
        :where(
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            blockquote,
            aside
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.6rem 0 0;
            min-width: 100%;
            max-width: 100%;
        }


        /* Heading
        /* -------------------------------------------------------------------- */

        :where(
            h1,
            h2,
            h3,
            h4,
            h5,
            h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-family: "Inter", -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
            font-weight: 700;
            color: var(--black);
        }

        :where(
            h1 strong,
            h2 strong,
            h3 strong,
            h4 strong,
            h5 strong,
            h6 strong
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-weight: 800;
        }

        /* H1 should be almost the same size as the post title to suggest avoid using it */
        :where(h1):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-size: 4.4rem;
            line-height: 1.15em;
            letter-spacing: -0.015em;
        }

        :where(h2):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-size: 3.2rem;
            line-height: 1.2em;
            letter-spacing: -0.014em;
        }

        :where(h3):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-size: 2.5rem;
            line-height: 1.3em;
            letter-spacing: -0.013em;
        }

        /* H4 is almost the same size as H3 to discourage using it */
        :where(h4):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-size: 2.2rem;
            line-height: 1.35em;
            letter-spacing: -0.011em;
        }

        :where(h5):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-size: 2.0rem;
            line-height: 1.35em;
            font-weight: 700;
            letter-spacing: -0.011em;
        }

        :where(h6):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-size: 1.85rem;
            line-height: 1.4em;
            font-weight: 700;
            letter-spacing: -0.008em;
        }

        :where(
            p + h1,
            p + h2,
            p + h3,
            p + h4,
            p + h5,
            p + h6,

            blockquote + h1,
            blockquote + h2,
            blockquote + h3,
            blockquote + h4,
            blockquote + h5,
            blockquote + h6,

            aside + h1,
            aside + h2,
            aside + h3,
            aside + h4,
            aside + h5,
            aside + h6,

            ul + h1,
            ul + h2,
            ul + h3,
            ul + h4,
            ul + h5,
            ul + h6,

            ol + h1,
            ol + h2,
            ol + h3,
            ol + h4,
            ol + h5,
            ol + h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 4.8rem 0 0;
        }

        /* Heading 1 vertical rhythm */

        :where(
            h1 + h1
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.4rem 0 0;
        }

        :where(
            h2 + h1,
            h3 + h1
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.0rem 0 0;
        }

        :where(
            h4 + h1,
            h5 + h1
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.8rem 0 0;
        }

        :where(
            h6 + h1
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.6rem 0 0;
        }

        :where(
            div + h1
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 4.8rem 0 0;
        }


        /* Heading 2 */

        :where(
            h1 + h2
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.6rem 0 0;
        }

        :where(
            h2 + h2,
            h3 + h2,
            h4 + h2,
            .koenig-react__editor h5 + h2
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.8rem 0 0;
        }

        :where(
            h6 + h2
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.4rem 0 0;
        }

        :where(
            div + h2
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 4.8rem 0 0;
        }


        /* Heading 3 - 6 (share common styles) */

        :where(
            h1 + h3,
            h2 + h3,

            h1 + h4,
            h2 + h4,

            h1 + h5,
            h2 + h5,

            h1 + h6,
            h2 + h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.2rem 0 0;
        }

        :where(
            h3 + h4
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.8rem 0 0;
        }

        :where(
            h3 + h3,
            h4 + h3,
            h5 + h3,

            h4 + h4,
            h5 + h4,

            h3 + h5,
            h4 + h5,
            h5 + h5,

            h3 + h6,
            h4 + h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.8rem 0 0;
        }

        :where(
            h5 + h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.4rem 0 0;
        }

        :where(
            h6 + h3,
            h6 + h4,
            h6 + h5,
            h6 + h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.4rem 0 0;
        }

        :where(
            div + h3,
            div + h4,
            div + h5,
            div + h6
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 4.8rem 0 0;
        }

        /* Headings right after post title */
        :where(
            h1:first-child,
            h2:first-child,
            h3:first-child,
            h4:first-child,
            .koenig-react__editor h5:first-child,
            h6:first-child
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin-top: 0rem;
        }

        @media (max-width: 500px) {
            :where(h1):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 3.2rem;
            }

            :where(h2):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 2.8rem;
            }

            :where(h3):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 2.4rem;
            }

            :where(h4):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 2.3rem;
            }

            :where(h5):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 2.0rem;
            }

            :where(h6):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 1.9rem;
            }
        }


        /* Paragraph
        /* -------------------------------------------------------------------- */

        :where(
            p,
            blockquote,
            aside,
            ul,
            ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-family: georgia,Times,serif;
            font-weight: 400;
            line-height: 1.6em;
            font-size: 2.0rem;
        }

        :where(
            p strong,
            blockquote strong,
            aside strong,
            ul strong,
            ol strong
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-weight: 700;
        }

        :where(
            h1 + p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.0rem 0 0;
        }

        :where(
            h2 + p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.8rem 0 0;
        }

        :where(
            h3 + p,
            h4 + p,
            h5 + p,
            h6 + p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0.8rem 0 0;
        }

        :where(
            p + p,
            blockquote + p,
            aside + p,
            ul + p,
            ol + p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 3.2rem 0 0;
        }

        /*  Cards can be addressed by their wrapper div element */
        :where(
            div + p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 2.8rem 0 0;
        }

        /*  Cards can be addressed by their wrapper div element */
        :where(
            div + figure
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 2.8rem 0 0;
        }

        /* Paragraph right after title */
        :where(
            p:first-child
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin-top: 0rem;
        }

        @media (max-width: 500px) {
            :where(
                p,
                blockquote,
                aside,
                ul,
                ol
            ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 1.8rem;
            }
        }


        /* Lists
        /* -------------------------------------------------------------------- */

        :where(
            ul,
            ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.6rem 0 0;
            padding: 0;
            min-width: 100%;
            max-width: 100%;
        }

        :where(
            ul li
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            display: list-item;
            list-style-type: disc;
            margin: 1.0rem 0 0 2.4rem;
            padding: 0 0 0 0.6rem;
            line-height: 3.2rem;
        }

        :where(
            ul li:first-child
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0 0 0 2.4rem;
        }

        :where(
            ul ul li
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            list-style-type: circle;
        }

        :where(
            ul ul ul li
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            list-style-type: square;
        }

        :where(
            ol li
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            display: list-item;
            list-style-type: decimal;
            margin: 1.0rem 0 0 2.2rem;
            padding: 0 0 0 0.8rem;
            line-height: 3.2rem;
        }

        :where(
            ol li:first-child
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0 0 0 2.2rem;
        }

        :where(
            ol ol li
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            list-style-type: lower-alpha;
        }

        :where(
            ol ol ol li
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            list-style-type: lower-roman;
        }

        :where(
            p + ul,
            p + ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 3.0rem 0 0;
        }

        :where(
            ul + ul,
            ul + ol,
            ol + ul,
            ol + ol,
            blockquote + ul,
            blockquote + ol,
            aside + ul,
            aside + ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 3.0rem 0 0;
        }

        :where(
            h1 + ul,
            h1 + ol,
            h2 + ul,
            h2 + ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: .8rem 0 0;
        }

        :where(
            h3 + ul,
            h3 + ol,
            h4 + ul,
            h4 + ol,
            h5 + ul,
            h5 + ol,
            h6 + ul,
            h6 + ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.2rem 0 0;
        }

        :where(
            div + ul,
            div + ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 2.8rem 0 0;
        }

        :where(
            ul ul,
            ul ol,
            ol ul,
            ol ol
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 1.0rem 0 2rem;
        }

        /* Lists right after title */
        :where(
            ul:first-child,
            ol:first-child
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin-top: 0rem;
        }


        /* Links
        /* -------------------------------------------------------------------- */

        /* Uses accent color defined by React, else fallback to default color. */

        :where(
            a
        ):not(.dark a):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            color: var(--kg-accent-color, #ff0095);
            text-decoration: underline;
        }

        :where(
            .dark a
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-weight: 600;
            text-decoration: underline;
        }

        /* Blockquote
        /* -------------------------------------------------------------------- */

        :where(
            blockquote p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0;
        }

        :where(
            blockquote
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            border-left: 0.25rem solid var(--kg-accent-color, #ff0095);
            padding-left: 2.0rem;
            font-style: italic;
        }

        :where(
            h1 + blockquote,
            h2 + blockquote
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: .8rem 0 0;
        }

        :where(
            h3 + blockquote,
            h4 + blockquote,
            .koenig-react__editor h5 + blockquote,
            h6 + blockquote
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: .4rem 0 0;
        }

        :where(
            p + blockquote,
            blockquote + blockquote
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 3.2rem 0 0;
        }


        /* Cards can be selected by their wrapper div element */
        :where(
            div + blockquote
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 2.8rem 0 0;
        }


        /* Aside, Blockquote Alternative
        /* -------------------------------------------------------------------- */

        :where(
            aside p
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 0;
        }

        :where(
            aside
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 3.2rem 0 0;
            padding: 1rem 6rem 1.25rem;
            font-style: italic;
            text-align: center;
            font-size: 2.4rem;
            color: var(--grey-500);
        }

        :where(
            h1 + aside,
            h2 + aside
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: .8rem 0 0;
        }

        :where(
            h3 + aside,
            h4 + aside,
            h5 + aside,
            h6 + aside
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: .4rem 0 0;
        }

        :where(
            p + aside,
            blockquote + aside
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 3.2rem 0 0;
        }

        @media (max-width: 800px) {
            :where(
                aside
            ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                padding-left: 6rem;
                padding-right: 6rem;
            }
        }

        @media (max-width: 500px) {
            :where(
                aside
            ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                font-size: 2.2rem;
            }
        }

        /* cards can be selected by their wrapper div element */
        :where(
            div + aside
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            margin: 2.8rem 0 0;
        }

        /* Cards in general
        /* -------------------------------------------------------------------- */

        :where(
            > div
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            line-height: 0;
            min-width: 100%;
        }

        > :where(
            div + div
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            padding: 3.2rem 0 0;
        }

        > :where(
            div[data-kg-card-width="full"] + div[data-kg-card-width="full"]
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            padding: 0;
        }

        :where(
            p + div,
            blockquote + div,
            aside + div,
            ul + div,
            ol + div
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            padding: 3.2rem 0 0;
        }

        :where(
            h1 + div
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            padding: 2.8rem 0 0;
        }

        :where(
            h2 + div,
            h3 + div,
            h4 + div,
            h5 + div,
            h6 + div
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            padding: 1.6rem 0 0;
        }

        :where(
            hr
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            display: block;
            margin: 1.6rem 0;
            border: 0;
            border-top: 1px solid var(--grey-300);
        }

        /* Code
        /* -------------------------------------------------------------------- */

        :where(
            code
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
            background: var(--grey-100);
            border: 1px solid var(--grey-200);
            border-radius: 2px;
            color: var(--grey-900);
            font-size: .8em;
            line-height: 1em;
            padding: .4rem .4rem .2rem;
            vertical-align: middle;
            white-space: pre-wrap;
        }

        /* Code
        /* -------------------------------------------------------------------- */

        :where(
            pre
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
            background: var(--grey-100);
            border: 1px solid var(--grey-200);
            border-radius: 2px;
            color: var(--grey-900);
            line-height: 1.4em;
            padding: .8rem .8rem .4rem;
            vertical-align: middle;
            white-space: pre-wrap;
        }

        /* Images
        /* -------------------------------------------------------------------- */

        :where(
            img
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            display: inline;
        }
    }

    /* Dark mode
    /* -------------------------------------------------------------------- */

    .dark {
        :where(
                h1,
                h2,
                h3,
                h4,
                h5,
                h6
            ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                color: var(--white);
            }

        :where(
            code
        ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            background: var(--grey-900);
            border: 1px solid var(--grey-900);
            border-radius: 2px;
            color: var(--grey-300);
        }
    }
}

/* stylelint-disable at-rule-disallowed-list */

.koenig-lexical-caption {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                    @apply text-sm font-sans leading-[24px] tracking-wide;
        }
    }
}

.koenig-lexical-section-title {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                    @apply text-md uppercase font-sans leading-normal font-bold tracking-[-.01em];
        }
        :where(
                    strong
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply !font-extrabold;
        }
    }
}

.koenig-lexical-heading {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                    @apply font-sans !leading-[1.1] font-bold tracking-tight;
        }
        :where(
                    a,
                    a span
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply !text-current;
        }
    }
}

.koenig-lexical-heading.heading-xsmall {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-2xl;
        }
    }
}

.koenig-lexical-heading.heading-small {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-3xl sm:text-4xl;
        }
    }
}

.koenig-lexical-heading.heading-medium {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-3xl sm:text-4xl md:text-5xl;
        }
    }
}

.koenig-lexical-heading.heading-large {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl;
        }
    }
}

.koenig-lexical-subheading {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
                    @apply font-sans !leading-snug font-medium tracking-tight;
        }
        :where(
                    strong
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply font-bold;
        }
        :where(
                    a,
                    a span
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply !text-current;
        }
    }
}

.koenig-lexical-subheading.subheading-xsmall {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-[1.6rem] font-normal;
        }
    }
}

.koenig-lexical-subheading.subheading-small {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-lg sm:text-xl;
        }
    }
}

.koenig-lexical-subheading.subheading-medium {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-lg sm:text-xl md:text-[2.2rem];
        }
    }
}

.koenig-lexical-subheading.subheading-large {
    .kg-prose {
        :where(
                    p,
                    blockquote,
                    aside,
                    ul,
                    ol
                ):not(:where(.not-kg-prose, [class~='not-kg-prose'] *)) {
            @apply text-lg sm:text-xl md:text-[2.2rem] lg:text-2xl;
        }
    }
}

/* stylelint-enable at-rule-disallowed-list */


/* When the header or the callout have a background color of accent, we need to show all links in white */
.kg-header-accent, .kg-callout-accent {
    --kg-accent-color: #fff;
}
