main ul.works {
    list-style: none;
    margin: 0;
    padding: 0;
}

main ul.works li {
    width: 100%;
    margin: 0 0 6rem;
}

main ul.works li figure {
    width: 100%;
    margin: 0;
}

main ul.works li figure img {
    width: 100%;
    height: auto;
}

main ul.works li figure figcaption {
    display: none;
}
@media only screen and (max-width: 800px) {
    main ul.works li figure figcaption {
        display: block;
    }

    main ul.works li figure figcaption a {
        text-decoration: underline;
    }

    main p {
        margin: 0;
    }
}
h1,
h2,
h3,
h4,
p.h3,
p.h4,
p.h5 {
    font-family: 'Andale Mono', sans-serif;
    margin: 2rem 0 1.25rem;
    padding: 0;
}

h2 {
    font-size: 1.5rem;
}

h3,
p.h3 {
    font-size: 1.25rem;
}

h4,
p.h4 {
    font-size: 1.125rem;
}

h5,
p.h5 {
    font-size: 1rem;
    font-weight: 200;
    margin: 1rem 0 .5rem;
}

a {
    text-decoration: none;
    color: var(--font-dark);
}

a:visited {
    color: var(--font-dark);
}

a:active,
a:hover {
    text-decoration: underline;
}

a[aria-current="page"] {
    text-decoration: underline;
}

p.description a {
    color: #888888;
}
:root {
    --font-dark: #000;
}

body {
    margin: 0;
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    color: var(--font-dark);
}

main {
    flex: auto 0 1;
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow-y: scroll;
    padding: 2rem 15%;
}

main p.description {
    margin-bottom: 2rem;
    hyphens: auto;
    text-align: justify
}

main img {
    max-width: 100%;
    height: auto;
}

main figure {
    margin: 0;
}

main>figure+figure {
    margin-top: 6rem;
}

main figure video,
main figure img {
    width: 100%;
    height: auto;
}

main figure figcaption,
main p.caption {
    display: none;
    font-family: 'Andale Mono', sans-serif;
    font-size: .75rem;
    padding: .25rem 0;
    margin: 0;
}

main section {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

main section {
    margin-top: 4rem;
}

main section * {
    flex: 33% 1 1;
}

main section>img {
    width: 0;
}

main section p.caption {
    flex: 100% 1 0;
}

main section figure figcaption,
main section p.caption {
    display: block;
}

main figure figcaption.all-media {
    display: block;
}

nav {
    position: relative;
    flex: 20rem 0 0;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
    overflow-y: scroll;
}

nav h1 {
    font-size: 1.25rem;
    font-weight: 100;
    padding: 0;
    margin: 0 0 .25rem;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul.main-nav {
    display: flex;
    flex-direction: row;
    font-family: 'Andale Mono', sans-serif;
    margin-bottom: 2rem;
}

nav ul.main-nav li {
    margin-right: 0.5rem;
}

nav ul.works-nav li {
    margin-bottom: 0.5rem;
}

nav ul.works-nav li a.title {
    font-size: 1.125rem;
}

nav ul.works-nav li {
    font-size: 0.9rem;
    padding-left: 5px;
}

nav ul.works-nav li.current {
    padding-left: 4px;
    border-left: 1px solid;
    border-color: var(--font-dark);
}

nav ul.legal,
ul.legal-mobile {
    position: absolute;
    bottom: 1rem;
    display: flex;
    column-gap: 1rem;
    margin-top: auto;
}

ul.legal-mobile {
    display: none;
    position: static;
    list-style: none;
    padding-bottom: 1rem;
}
@media only screen and (max-width: 800px) {

    @media screen and (orientation:landscape) {
        main {
            padding: 2rem 0 !important;
        }

        main>*:not(figure, img, section) {
            padding-left: 2rem;
            padding-right: 2rem;
        }

        main figure.drawing {
            text-align: center;
        }

        main figure.drawing figcaption {
            text-align: left;
        }

        main figure.drawing img {
            max-height: calc(100vh - 3vh);
            width: auto;
        }

        main figure.video figcaption {
            display: block;
            padding: 1rem 2rem;
        }

        main figure figcaption,
        main p.caption {
            padding: 0.5rem 2rem !important;
        }
    }

    @media screen and (orientation:portrait) {
        main section * {
            flex: 100% 1 1;
        }

        main section img+img {
            margin-top: .25rem;
        }
    }

    body {
        display: block;
        height: 100vh;
    }

    nav {
        height: 6rem;
        padding-bottom: 0.5rem;
        background: none;
    }

    main {
        width: 100%;
        height: auto;
        padding: 2rem;
        overflow: visible;
    }

    main figure figcaption {
        padding: .25rem 0;
    }

    nav ul.main-nav {
        margin-bottom: 0;
    }

    nav ul.works-nav {
        display: none;
    }

    nav ul.legal {
        display: none;
    }

    ul.legal-mobile {
        display: flex;
    }
}