@layer reset {

    *,*::before,*::after {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        background: none;
        box-sizing: border-box;
        color: inherit;
        font-family: inherit;
        font-feature-settings: "calt", "clig", "kerm", "liga";
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        margin: 0;
        outline: none;
        padding: 0;
        transition-delay: 0ms;
        transition-duration: 150ms;
        transition-property: none;
        transition-timing-function: ease-out;
        text-decoration: none;
        touch-action: manipulation;
    }

    details, summary::-webkit-details-marker {
        display: none;
    }

    summary {
        list-style: none;
    }
}

@layer basic {

    :root {
        --archive-dates: 700 1rem/1.85 var(--font-family-serif);
        --archive-labels: 400 0.75rem/1.65 var(--font-family-serif);
        --aside-title: 700 1rem/1.85 var(--font-family-serif);
        --aside-text: 400 0.86rem/1.85 var(--font-family-serif);
        --background: #fff;
        --background-code: #f9f9f9;
        --background-media: #f9f9f9;
        --base-text: 400 1rem/1.85 var(--font-family-serif);
        --caption: 400 0.86rem/1.85 var(--font-family-serif);
        --code: 400 0.86rem/1.85 var(--font-family-monospace);
        --font-family-serif: Georgia, "Times New Roman", Times, serif;
        --font-family-sans-serif: Arial, Helvetica, sans-serif;
        --font-family-monospace: "Courier New", Courier, monospace;
        --font-size: clamp(14px, 0.45vi + 12.42px, 26px);
        --font-style: normal;
        --font-weight: 400;
        --highlighter: #ece6ff;
        --highlighter-alt: #c9b8ff;
        --h1-title: 700 1.6rem/1.5 var(--font-family-serif);
        --h2-title: 700 1.3rem/1.6 var(--font-family-serif);
        --h3-title: 700 1.15rem/1.7 var(--font-family-serif);
        --lines: #eee;
        --line-height: clamp(26px, 0.72vi + 22.75px, 48px);
        --lists: #888;
        --marks: #bbb;
        --media-column: 28rlh;
        --shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
        --smaller-text: 400 0.790rem/0.790rlh var(--font-family-serif);
        --small-text: 400 0.889rem/0.889rlh var(--font-family-serif);
        --text-column: 20rlh;
        --text-column-wider: 22rlh;
        --table-head: 400 0.86rem/2.25 var(--font-family-sans-serif);
        --table-body: 400 0.86rem/2.25 var(--font-family-serif);
        --text: #474747;
        --text-lighter: #999;
        background: var(--background);
        color: var(--text);
        font-family: var(--font-family-serif);
        font-size: var(--font-size);
        font-weight: var(--font-weight);
        line-height: var(--line-height);
    }

    body {
        background: var(--background);
        font-size: var(--font-size);
        line-height: var(--line-height);
        padding: 5rlh 1rlh 1rlh;
    }

    ::selection {
        background: var(--highlighter);
    }
}

@layer content {

    main {

        h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, pre, details {
            margin-left: auto;
            margin-right: auto;
            max-width: var(--text-column);
        }

        blockquote {
            max-width: var(--text-column-wider);
        }

        blockquote, pre {
            padding: 1rlh;
        }

        p, ol, ul, pre{
            margin-bottom: 0.5rlh;
        }

        :where(p, ol, ul, pre):last-child {
            margin-bottom: unset;
        }

        h1, h2, h3, h4, h5, h6 {
            text-align: center;
        }

        h1 {
            font: var(--h1-title);
            margin-bottom: 1.5em;
        }

        h2 {
            font: var(--h2-title);
            margin-bottom: 1em;
            margin-top: 3em;
        }

        h3, h4, h5, h6 {
            font: var(--h3-title);
            margin-bottom: 1em;
            margin-top: 2em;
        }

        p {
            font: var(--base-text);
            hyphens: auto;
            margin-bottom: 0;
        }

        p + p {
            text-indent: 2ch;
        }

        strong {
            font-weight: 700;
        }

        em {
            font-style: italic;
        }

        code, pre {
            background: var(--background-code);
            font: var(--code);
        }

        pre {
            border: 2px dashed #ccc;
            margin-bottom: 1rlh;
            margin-top: 1rlh;
            overflow: auto;
        }

        hr {
            border: none;
            margin: 2rlh 0;
            text-align: center;

            &::before {
                color: var(--marks);
                content: "✽ ✽ ✽";
                white-space: pre;
            }
        }

        blockquote {
            border: 1px solid var(--lines);
            border-radius: 2px;
            box-shadow: var(--shadow);
            font-family: var(--font-family-sans-serif);
            font-style: italic;
            hyphens: auto;
            margin-bottom: 1.5rlh;
            margin-top: 1.5rlh;
            position: relative;

            &::before {
                background: var(--background);
                color: var(--marks);
                content: "❊ ❈ ❊";
                font-style: italic;
                left: 50%;
                padding: 0 0.25rem;
                position: absolute;
                top: 0;
                transform: translate(-50%, -50%);
            }

            &:nth-child(odd)::before {
                content: "❈ ❊ ❈";
            }

            p {
                font-style: italic;
            }
        }

        ol, ul {
            padding-left: 2ch;
        }

        ul {
            list-style-type: circle;
        }

        li::marker {
            color: var(--lists);
        }

        details {
            border: 1px solid var(--lines);

            div {
                border-top: 1px solid var(--lines);
                padding: 1rlh;
            }
        }

        summary {
            cursor: pointer;
            padding: 0.5rlh 1rlh;
        }

        table, tbody, thead, th, td {
            border: 1px solid var(--lines);
        }

        table {
            border-collapse: collapse;
            margin: 1rlh auto;
            max-width: var(--media-column);
            width: 100%;
        }

        thead {
            background: var(--background-media);
        }

        th {
            font: var(--table-head);
        }

        td {
            font: var(--table-body);
            padding: 0 0.5em;
        }  
    }

    :where(p, li, small) a {
        background-image: linear-gradient(to right, var(--highlighter), var(--highlighter-alt));
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 300% 40%;
        text-decoration: var(--highlighter);
        text-underline-offset: -0.25em;
        text-decoration-thickness: 0.5em;
        text-decoration-skip-ink: none;
        transition-property: background-position;

        &:hover {
            background-position: 100% 100%;
        }
    }
}

@layer aside {

    aside {
        margin: 3rlh auto;
        max-width: var(--text-column);
        text-align: center;

        h2 {
            font: var(--aside-title);
            font-variant: small-caps;
            margin-bottom: 1em;
        }

        p {
            font: var(--aside-text);
            font-style: italic;
            text-wrap: balance;
        }
    }
}

@layer nav{

    nav.archive {
        margin: 1rlh auto;
        max-width: var(--text-column);

        h2 {
            font: var(--h3-title);
            margin-bottom: 1em;
            text-align: center;
        }

        h3 {
            columns: auto auto;
            display: grid;
            font: var(--archive-dates);
            font-variant-caps: small-caps;
            grid-template-areas: "year month";
            justify-content: space-between;
            margin-top: 2rem;
        }

        .year {
            grid-area: year;
        }

        .month {
            grid-area: month;
        }

        .item {
            align-items: first baseline;
            display: flex;
            font: var(--base-text);
            gap: 0.25rlh;
            position: relative;
            transition-property: gap;

            &:hover {
                color: var(--text-lighter);
                gap: 0.5rlh;
            }

            .title {
                overflow: hidden;
                text-overflow: ellipsis;
                transition-property: color;
                white-space: nowrap;
            }

            span, time {
                transition-property: color;
            }

            hr {
                background: none;
                border: none;
                border-top: 1px dotted currentColor;
                flex: 1 1 auto;
                height: 1px;
                min-width: 1rlh;
                opacity: 2;
                transition-property: border;
            }
        }
    }
}

@layer footer {
    
    footer {
        margin: 3rlh 0 1.5rlh;
        text-align: center;

        p {
            font: var(--smaller-text);

            i {
                font-style: italic;
            }
        }

        a {
            background-image: linear-gradient(to right, var(--highlighter), var(--highlighter-alt));
            background-position: 0% 100%;
            background-repeat: no-repeat;
            background-size: 300% 40%;
            font: var(--smaller-text);
            text-decoration: var(--highlighter);
            text-underline-offset: -0.25em;
            text-decoration-thickness: 0.5em;
            text-decoration-skip-ink: none;
            transition-property: background-position;

            &:hover {
                background-position: 100% 100%;
            }

            &:not(:last-child)::after {
                content: " | ";
                opacity: 0.25;
                white-space: pre;
            }
        }
    }
}