html {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #1f1700;
    background-color: #fffefd;
    font-family: "Hiragino Sans W3", "Noto Sans CJK JP", sans-serif;
}

body > header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: .2ch .5ch;
    box-shadow: 0 -0px .25em #dddcdb;
    font-size: .75em;
    color: #765;
    background-color: #f2f1f0;
}

body > header nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

body > header nav li:not(:first-child)::before {
    content: "\BB";
    margin: 0 .5ch;
}

body > header nav a,
body > header nav a:visited {
    font-family: "Hiragino Sans W6", "Roboto", "Noto Sans CJK JP", sans-serif;
    font-weight: 600;
    color: #aa4440;
    text-decoration: none;
}

body > header nav a:hover,
body > header nav a:hover:visited {
    color: #c93633;
    text-decoration: underline;
}

main > .post-list {
    list-style: none;
}

main > .post-list time {
    font-size: 0.9em;
}

main > article {
    max-width: 72ch;
    margin: 3.5em auto;
    padding: 0 clamp(1em, 4vw, 3.5em);
}

blockquote {
    margin: 2em 1.75em;
    padding-left: .75em;
    border-left: 1px solid #765;
}

table {
    margin: 2em 2.5em;
}

:not(li) > ul, :not(li) > ol {
    margin: 2em 0;
}

table {
    border-top: #765 solid 2px;
    border-bottom: #765 solid 2px;
}

th {
    padding-right: 1em;
    border-bottom: #765 solid 1px;
}

:not(blockquote) > p ~ p {
    margin-top: 2em;
}

p code, li code {
    padding: .2em .4em;
    background-color: #f2f1f0;
    border-radius: 5px;
    font-size: .9rem;
    color: #321;
}

pre {
    overflow-x: auto;
    font-size: .95rem;
}

pre:has(code) {
    padding: 2ch;
    border-radius: 5px;
}

code {
    font-family: "Inconsolata", "Menlo", "Noto Sans Mono CJK JP", monospace;
}

a {
    color: #aa4440;
}

a:hover, a:hover:visited {
    color: #c93633;
}

a:visited {
    color: #b88;
}

th, strong {
    font-family: "Hiragino Sans W6", "Noto Sans CJK JP", sans-serif;
    font-weight: 600;
}

@media (max-width: 820px) {
    main > .post-list {
        margin: 1em 0;
        padding-left: 1.25em;
    }

    main > article {
        margin: 2em auto;
    }

    blockquote {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }

    :not(li) > ul, :not(li) > ol {
        margin: 1.5em 0;
    }

    :not(blockquote) > p ~ p {
        margin-top: 1.5em;
    }
}

@media (max-width: 600px) {
    main > .post-list {
        margin: .25em 0;
        padding-left: .5em;
    }

    main > article {
        margin: .5em auto;
    }

    blockquote {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    :not(li) > ul, :not(li) > ol {
        margin: 1em 0;
    }

    :not(blockquote) > p ~ p {
        margin-top: 1em;
    }
}