@layer
    editorial.base,
    editorial.typography,
    editorial.lists,
    editorial.code,
    editorial.footnotes,
    editorial.rythm,
    editorial.components;

@layer editorial.animation {
    article {
        animation: fadeInUp 0.6s ease forwards;
        opacity: 0;
        animation-delay: 0.3s;
    }
}

@layer editorial.layout {
    article h1:first-child {
        font-size: 17px;
        font-weight: 400;
        margin-block: 188px;
    }

    #date {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--border);
        height: 36px;
    }
}

@layer editorial.base {
    article img {
        width: 100%;
        border-radius: 8px;
    }

    article hr {
        border-top-width: 2px;
        border-top-style: solid;
        margin-inline: auto;
        width: 24px;
    }

    article a {
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 0.8px;
        cursor: pointer;
        transition: text-decoration-color 0.2s ease-in-out;
    }

    article blockquote {
        padding-left: 14px;
    }

    blockquote {
        position: relative;
    }
    blockquote::before {
        content: '“';
        position: absolute;
        top: 0;
        left: -6px;
    }

    article p code {
        font-size: 13px;
        background: rgba(255,255,255,0.15);
        border-radius: 4px;
    }
}

@layer editorial.typography {
    article {
        h1, h2, h3, h4, h5, h6 {
            font-size: 17px;
            font-weight: 500;
        }

        q { font-style: italic; }

        blockquote {
            margin: 0;
            padding: 0;
        }

        pre, code, a.footnote-ref, ol li::before {
            font-family: ui-monospace, monospace;
        }

        pre {
            line-height: 18px;

            * {
                font-size: 13px;
                font-weight: normal;
                font-style: normal;
            }

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
}


@layer editorial.lists {
    article {
        ol, ul {
            padding-inline-start: 1rem;
        }

        ol {
            list-style: none;
            counter-reset: list-counter;
        }

        ol li {
            counter-increment: list-counter;
            position: relative;
            padding-left: 0.8rem;
        }

        ol li::before {
            content: counter(list-counter) ". ";
            position: absolute;
            left: -1rem;
        }
    }
}

@layer editorial.code {
    article {
        pre {
            border-width: 1px;
            border-style: solid;
            border-radius: 8px;
            overflow-x: auto;
            padding: 12px 16px;
        }

        pre code {
            display: block;
            width: max-content;
            min-width: 100%;
        }

        pre dfn {
            display: block;
            position: relative;
            width: calc(100% + 32px);
            margin-left: -16px;
            display: inline-block;
        }

        pre dfn::after {
            content: '';
            position: absolute;
            inset: 0;
            border-left: 2px solid;
        }

        pre dfn * { position: relative }

        pre ins, pre del {
            text-decoration: none;
            position: relative;
        }

        pre del::after, pre ins::after {
            position: absolute;
            left: 0;
        }

        pre ins::after { content: '+' }
        pre del::after { content: '-' }

        a > code, li > code, p > code {
            padding: 2px 4px;
        }
    }
}

@layer editorial.footnotes {
    article {
        a[rel="footnote"] {
            text-decoration: none;
            color: rgba(255,255,255,0.5);
            font-weight: 400;
        }
    }

    [role="doc-endnotes"] {
        border-top: 1px solid var(--border);
        padding-top: 1rem;
    }
}

@layer editorial.rythm {
    footer {
        margin-top: 188px;
        margin-bottom: 64px;
    }
    #hero { margin-bottom: 188px }
    header { margin-bottom: 1rem }
    article {
        > * + * { margin-top: 1.5rem }
        > h2 + *,
        > h3 + *,
        > h4 + *,
        > h5 + *  { margin-top: 0.375rem      }


        hr              { margin-block: 4rem      }

        /*ol li,
        ol ol,
        ul li,
        ul ul  { margin-top: 1rem }*/
        ol, ul {
            padding-inline-start: 1rem
        }
    }
}

@layer editorial.components {

    #info { text-align: center; }
    #info a {
        display: block !important;
        margin: 0;
        font-size: 0.85rem;
        color: var(--meta);
        transition: color 0.2s ease;
    }
    #info a:hover {
        color: var(--text)
    }
    #info > .avatar {
        display: block;
        margin: auto;
        width: 35px;
        border-radius: 100%;
    }

    .carousel {
        width: 100dvw;
        margin-left: calc(-50vw + 50%);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .carousel::-webkit-scrollbar { display: none }
    .carousel pre { margin-top: 0px }
    .carousel > .content {
        display: flex;
        gap: 24px;
        padding-right: calc(300px * 4 + 24px * 3 + 24px);
        padding-left: max(1.5rem, calc((100vw - 70ch) / 2));
    }

    .carousel > .content > * { flex: 0 0 auto; }

    span.color {
        background-color: var(--bg);
        display: inline-block;
        width: 24px;
        height: 12px;
    }

    .dropcap {
        /*float: left;*/
        /*margin-right: 6px;*/
        /*font-size: 56px;*/
        /*font-family: Georgia;*/
        text-transform: uppercase;
        /*position: absolute;*/
    }
    /*.dropcap        { padding-top: 14px }*/
    /*p:has(.dropcap) { margin-top: 3rem }*/
}