#header {
    position: sticky;
    top: -2em;
}

#wrapper > header nav.admin {
    float: none;
}

#main {
    position: sticky;
    top: 6em;
    align-self: flex-start
}

#left {
    position: relative;
    top: -5.6em;
    margin-top: -2%;
}
#left figure {
    transition: opacity .4s, border-color .25s;
    transition-delay: .2s, .15s;
}
#left.dimmed figure {
    opacity: .1;
    border-color: #7d7d7d;
}
#left figure.selected,
#left figure:hover  {
    opacity: 1;
    border-color: #7d7d7d;
}
.artworks li {
    transition: opacity .4s, color .15s;
    transition-delay: .2s, 0s;

    line-height: 1;
    padding-bottom: .5em;
}
.artworks.dimmed li {
    opacity: .3;
}
.artworks li.selected {
    color: #000;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    #header {
        position: static;
    }
    #main {
        position: static;
    }

    ul.artworks {
        display: none;
    }
    #left {
        top: 0;
        margin-top: 0;
        margin-bottom: 2em;
    }

    #left figure {
        margin-bottom: 3em;
        overflow: visible;
    }
    #left figure figcaption {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        margin-top: 2%;
        padding-bottom: .5em;
    }
    #left figure:hover {
        z-index: 1000;
    }
    #left figure:hover figcaption {
        background: #fff;
        z-index: 1000;
    }
}