:root {
    --links: #cc0327;
    --focus: #cc0327;
}

div.metadata {
    font-size: 0.9rem;
    color: var(--text-muted, #666);
    background: var(--background-alt);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    margin: 0.5rem 0;
    ul {
        display: inline;
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            display: inline;
            margin-right: 0.4rem;
            &::before {
                content: "#";
            }
        }
    }
    span {
        font-weight: 500;
    }
}

figcaption p {
    margin: 0;
    font-style: italic;
}

main nav#pagination,
main nav#post-navigation {
    all: unset;
    display: block;
    ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
        li.prev:only-child {
            margin-right: auto;
        }
        li.next:only-child {
            margin-left: auto;
        }
    }
}

.footnote {
    padding: 0 0.5rem;
    border-radius: 4px;
}

.footnote.highlighted {
    animation: highlight-fade 2.5s ease-out;
}

@keyframes highlight-fade {
    0% {
        background-color: var(--background-bright);
    }
    20% {
        background-color: var(--background-bright);
    }
    100% {
        background-color: inherit;
    }
}

.footnote-backref::after,
.external-link::after {
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    background-color: currentColor;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    vertical-align: -0.125rem;
}

.footnote-backref::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-corner-down-left'%3E%3Cpolyline points='9 10 4 15 9 20'%3E%3C/polyline%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'%3E%3C/path%3E%3C/svg%3E");;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-corner-down-left'%3E%3Cpolyline points='9 10 4 15 9 20'%3E%3C/polyline%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'%3E%3C/path%3E%3C/svg%3E");
}

a.external-link::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up-right'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up-right'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
}

.feather {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
}

abbr {
    cursor: help;
}