html {
    position: relative;
    min-height: 100%;
    color: #000;
    font-family: 'Assistant', sans-serif;
    font-size: 1em;
    line-height: 1.4;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.header {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    padding: 24px;
}

.header-logo {
    margin: 0;
    line-height: 0;
}

.header-logo-link > img {
    height: 32px;
    width: auto;
    transition: filter .5s;
}

.nav {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    padding: 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    text-align: right;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: color .5s;
}

.nav-logo {
    display: none;
}

.nav-list {
    margin: 0;
    list-style: none;
}

.nav-list-item-link::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0 8px 0 0;
    transition: border .5s;
}

.nav-list-item.is-active ::before {
    background: #000;
}

.nav-list-item-link:hover::before {
    border-color: #000;
}

.nav-list + .nav-lang {
    margin-top: 1em;
}

.nav-lang-link.is-active,
.nav-lang-link:hover {
    text-decoration: underline;
}

.slides-list,
.carousel-slides {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carousel-nav,
.slides-nav {
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    padding: 20px 24px;
    line-height: 0;
}

.carousel-nav-link,
.slides-nav-link {
    color: transparent;
    background: rgba(0, 0, 0, .2);
    border: 2px solid rgba(0, 0, 0, .1);
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 8px 12px 0 0;
    cursor: pointer;
    transition: opacity 1s, background .75s, border .25s;
}

.carousel-nav-link.is-active,
.carousel-nav-link:hover,
.slides-nav-link.is-active,
.slides-nav-link:hover {
    background: #000;
    opacity: 1;
    transition-duration: .25s;
}

.photo {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vw;
    transition: opacity 1.5s;
}

.photo.is-full {
    bottom: 0;
    height: auto;
}

.slides-list-item .photo,
.carousel-slides-item .photo {
    opacity: 0;
}

.slides-list-item.is-active .photo,
.carousel-slides-item.is-active .photo {
    opacity: 1;
}

.photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.photo.is-contained .photo-img {
    object-fit: contain;
}

.photo-caption {
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 12px;
    margin: 0;
    padding: 24px;
    white-space: nowrap;
    transition: color .5s;
}

.video {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.article,
.awards,
.contact {
    z-index: 2;
    margin: 100vw 0 24px 0;
    padding: 24px;
}

.article,
.pages {
    margin-bottom: 80px;
}

.carousel-list-item .article {
    margin-top: 0;
}

.slides-list-item .article {
    display: none;
}

.slides-list-item.is-active .article {
    display: block;
}

.article-header {
    margin: 24px 0;
}

.article-header-title {
    margin: 0 0 24px 0;
    font-family: 'Libre Baskerville', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 26px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    padding-bottom: 24px;
}

.article-header-title > small,
.article-header-title-text > small {
    font-size: 14px;
    line-height: 15px;
}

.article-header-title.has-logo {
    display: table;
    width: 100%;
}

.article-header-title-text {
    display: table-cell;
    vertical-align: bottom;
}

.article-header-title-logo {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}

.article-header-title-logo > img {
    margin-left: 16px;
}

.article-header-subtitle {
    margin: 24px 0;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.article-header-subtitle > strong {
    font-weight: 400;
}

.article-header-links {
    margin: 24px 0;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.article-content {
    margin: 24px 0;
    font-size: 14px;
    line-height: 20px;
}

.article-content :first-child {
    margin-top: 0;
}

.article-content :last-child {
    margin-bottom: 0;
}

.article-content-heading {
    margin: 16px 0;
    font-size: 16px;
}

.article-content p {
    margin: 8px 0;
}

.article-content small {
    font-size: 12px;
}

.carousel-list {
    list-style: none;
    margin: 0;
    padding: 100vw 0 0 0;
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.carousel-list.is-full {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 0;
}

.carousel-list-item {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.carousel-list.is-full .carousel-list-item {
    scroll-snap-align: center;
}

.pages {
    padding: 24px;
    font-family: 'Libre Baskerville', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    white-space: nowrap;
}

.pages-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
}

.pages-list-item-link.is-disabled {
    font-style: italic;
    cursor: default;
}

.pages-list-item-link:hover {
    font-style: italic;
}

.pages-list-item-link > sup {
    font-size: 12px;
    line-height: 0;
    position: relative;
}

.pages-list-item-link > sup > small {
    font-size: 10px;
    position: absolute;
    top: 24px;
    left: 0;
}

.awards-list,
.awards-list-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.awards-list-item,
.awards-list-sub-item {
    margin: 16px 0;
}

.awards-title,
.awards-subtitle,
.awards-project {
    margin: 0;
}

.awards-year,
.awards-title {
    font-family: 'Libre Baskerville', serif;
}

.awards-year,
.awards-title,
.awards-subtitle {
    font-weight: 400;
}

.awards-project {
    font-weight: 700;
    text-transform: uppercase;
}

.contact {
    font-size: 16px;
    line-height: 20px;
}

.contact-info-row {
    text-align: left;
    vertical-align: top;
}

.contact-info-row,
.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-info-row > th {
    text-align: inherit;
}

.contact-info-row > td {
    padding: 0 0 8px 24px;
}

.contact-info-icon {
    margin-right: 8px;
}

.contact-form {
    margin: 12px 0 0 0;
    text-align: right;
}

.contact-form-input,
.contact-form-textarea {
    margin: 8px 0;
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    background: #eee;
    color: #000;
    border: none;
    font-family: inherit;
}

.contact-form-textarea {
    height: 96px;
    resize: none;
}

.contact-form-button {
    border: none;
    background: #000;
    color: #fff;
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    margin: 8px 0 0 0;
    padding: 8px 24px;
}

.footer {
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 12px;
    padding: 24px;
    white-space: nowrap;
    transition: color .5s;
}

.footer p {
    margin: 0;
}

body.is-dark .header-logo-link > img {
    filter: invert(1);
}

body.is-dark .nav,
body.is-dark .photo-caption,
body.is-dark.is-full .footer {
    color: #fff;
}

body.is-dark .nav-list-item-link:hover::before {
    border-color: #fff;
}

body.is-dark .nav-list-item.is-active ::before {
    background: #fff;
}

@media (min-width: 960px) {

    .header {
        right: 50%;
        padding: 48px;
    }

    .header-logo-link > img {
        height: 48px;
    }

    .nav {
        position: absolute;
        left: 50%;
        padding: 48px;
    }

    .nav-logo {
        display: block;
        position: absolute;
        top: 48px;
        left: 48px;
        margin: 0;
    }

    .nav-logo > img {
        transition: opacity .5s;
    }

    .photo {
        right: 50%;
        bottom: 0;
        height: auto;
    }

    .photo.is-full,
    .photo.is-full-desktop {
        right: 0;
    }

    .photo.is-left .photo-img {
        object-fit: contain;
        object-position: left;
    }

    .photo-caption {
        bottom: 24px;
        padding: 48px;
    }

    .article,
    .awards,
    .contact {
        margin: 0;
        padding: 0 48px;
        position: absolute;
        left: 50%;
        right: 0;
        bottom: 48px;
    }

    .article,
    .pages {
        margin-bottom: 64px;
    }

    .article,
    .awards {
        max-height: 50%;
        overflow-y: auto;
        transition: color 1s;
    }

    .carousel-list-item .article {
        position: relative;
        left: 0;
        bottom: 0;
        padding-bottom: 48px;
    }

    .article::after {
        content: '';
        display: block;
        margin-top: 24px;
        position: sticky;
        bottom: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        transition: border .5s;
    }

    .article-header {
        margin-top: 0;
    }

    .article-header-title {
        transition: border .5s;
    }

    .article-content {
        margin-bottom: 0;
        column-count: 2;
        column-gap: 40px;
    }

    .pages {
        padding: 48px;
    }

    .pages-list {
        margin: 0;
    }

    .carousel-list {
        position: absolute;
        left: 50%;
        right: 0;
        bottom: 0;
        align-items: end;
    }

    .carousel-nav,
    .slides-nav {
        left: 50%;
        bottom: 0;
        padding: 48px;
    }

    .carousel-nav.is-right,
    .slides-nav.is-right {
        left: auto;
        right: 0;
    }

    .contact-form-button {
        cursor: pointer;
    }

    .footer {
        padding: 48px;
    }

    body.is-full .nav-logo > img,
    body.is-full-desktop .nav-logo > img {
        opacity: 0;
    }

    body.is-dark .nav {
        color: #000;
    }

    body.is-dark .nav-list-item.is-active ::before {
        background: #000;
    }

    body.is-dark .nav-list-item-link:hover::before {
        border-color: #000;
    }

    body.is-dark.is-full .nav,
    body.is-dark.is-full-desktop .nav,
    body.is-dark .photo-caption,
    body.is-dark.is-full .article,
    body.is-dark.is-full-desktop .article,
    body.is-dark .footer {
        color: #fff;
    }

    body.is-dark.is-full .nav-list-item-link:hover::before,
    body.is-dark.is-full-desktop .nav-list-item-link:hover::before {
        border-color: #fff;
    }

    body.is-dark.is-full .nav-list-item.is-active ::before,
    body.is-dark.is-full-desktop .nav-list-item.is-active ::before {
        background: #fff;
    }

    body.is-dark.is-full .slides-nav-link,
    body.is-dark.is-full-desktop .slides-nav-link {
        background: rgba(255, 255, 255, .33);
        border-color: rgba(255, 255, 255, .5);
    }

    body.is-dark.is-full .slides-nav-link.is-active,
    body.is-dark.is-full-desktop .slides-nav-link.is-active,
    body.is-dark.is-full .slides-nav-link:hover,
    body.is-dark.is-full-desktop .slides-nav-link:hover {
        background: #fff;
    }

    body.is-dark.is-full .article::after,
    body.is-dark.is-full-desktop .article::after,
    body.is-dark.is-full .article-header-title,
    body.is-dark.is-full-desktop .article-header-title {
        border-bottom-color: rgba(255, 255, 255, .33);
    }

}