/* assets/css/tufte.css */
:root {
    --tufte-width: 350px;
    --tufte-distance: 50px;
    counter-reset: sidenote-counter;
}

.sidenote {
    float: right;
    clear: right;
    /* width: var(--tufte-width);
    margin-right: calc(var(--tufte-width) * -1); */
    width: 40%;
    margin-right: -50%;
    margin-bottom: 1rem;
    padding-left: var(--tufte-distance);
    vertical-align: baseline;
    position: relative;
    word-break: break-all;
    text-align: left
}
.sidenote a {
    text-decoration: underline;
}

.sidenote a:hover {
    cursor: pointer;
    font-weight: 700;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: .7rem;
    top: -0.4rem;
    left: 0.1rem;
}

.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-size: .7rem;
    top: -0.25rem;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline;
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

@media (max-width: 800px) {
    label.sidenote-number {
        display: inline;
        cursor: pointer;
    }
    .sidenote-number:after, .sidenote:before {
        font-size: .6rem;
    }
    figcaption .sidenote-number:after {
        top: initial;
    }
    .sidenote {
        display: none;
    }

    label.margin-toggle:not(.sidenote-number) {
        display: inline;
        font-size: 1.3rem;
        line-height: 1rem;
    }

    .margin-toggle:checked + .sidenote {
        display: block;
        float: left;
        left: .5rem;
        clear: both;
        width: calc(100% - .5rem - 2.5%);
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
        padding-left: 0;
    }
}