/* Base */
:root {
    --grey-1: #1E1914;
    --grey-2: #413C37;
    --grey-3: #87827D;
    --grey-4: #C3BEB9;
    --grey-5: #EBE6E1;
}

.heading-1 { margin: 0 0 1.3rem; font-family: "Space Grotesk", sans-serif; font-weight: 300; font-size: 2.2rem; line-height: 2.6rem; }
.heading-2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 400; font-size: 1.8rem; line-height: 2.2rem; }
.heading-3 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 1.3rem; line-height: 1.8rem; letter-spacing: 2%; }
.heading-4 { margin: 0; font-family: "Lexend", sans-serif; font-weight: 300; font-size: 1.1rem; line-height: 1.5rem; letter-spacing: 2%; }
.heading-5 { margin: 0; font-family: "Lexend", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3rem; letter-spacing: 2%; }
.paragraph { margin: 0 0 1.3rem; font-family: "Lexend", sans-serif; font-weight: 300; font-size: 1rem; line-height: 2rem; letter-spacing: 2%; }
.small { font-family: "Lexend", sans-serif; font-weight: 300; font-size: 0.8rem; line-height: 1.2rem; letter-spacing: 2%; }

html { width: 100%; height: 100%; font-size: 18px; }
body { display: flex; flex-direction: column; margin: 0; padding: 0; width: 100%; height: 100%; font-family: "Lexend", sans-serif; font-optical-sizing: auto; font-weight: 300; font-size: 1rem; line-height: 1.8; letter-spacing: 2%; color: var(--grey-1); background: #FFF; }
footer { margin: 7rem 0 0; padding: .5rem; text-align: center; background: var(--grey-4); }
.wrapper { flex-grow: 1; margin: 0 auto; padding: 0 2rem; width: 100%; max-width: 1272px; box-sizing: border-box; }
.hr { display: block; margin: 0; width: 100%; height: 2px; overflow: hidden; background: var(--grey-1); }
.button { display: inline-block; padding: .5rem 1rem; text-decoration: none; color: var(--grey-1); box-shadow: .5rem .5rem 0 var(--grey-5); background: #FFF; }
.button:hover { box-shadow: .5rem .5rem 0 var(--grey-4); }

@view-transition { navigation: auto; }

/* Nav */
header.nav h1 { position: relative; z-index: 10; margin: 0; padding: 1rem 0; text-transform: uppercase; }
header.nav h1 a { color: var(--grey-1); text-decoration: none; }
header.nav .hr { position: relative; z-index: 11; width: 80px; }
header.nav nav { position: relative; z-index: 12; margin: .5rem 0 0; width: 100%; display: flex; justify-content: space-between; align-items: center; }
header.nav .pages { display: flex; gap: 5rem; padding: 0; list-style-type: none; opacity: 1; }
header.nav .pages a { color: var(--grey-1); text-decoration: none; }
header.nav .pages a:hover { color: var(--grey-3); }
header.nav .pages .active { font-weight: 600; }
header.nav .social { display: flex; gap: 1.3rem; padding: 0; list-style-type: none; }
header.nav .social a { text-decoration: none; }
header.nav .social img { display: block; width: 1.3rem; height: auto; }
header.nav .menu { display: none; align-items: center; gap: 0.5rem; margin: 0; padding: 0; cursor: pointer; color: var(--grey-1); border: 0; background: none; }
header.nav .menu .icon { width: 1.5rem; height: 1.5rem; }
header.nav .menu path { fill: var(--grey-1); }
header.nav .menu .label { user-select: none; -webkit-user-select: none; }
header.nav .menu:hover path { fill: var(--grey-3); }
header.nav .menu:hover .label { color: var(--grey-3); }

/* Index */
.cover { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 80%; background: var(--grey-5); }
.index header.nav h1 { padding: 1.8rem 0; text-align: center; }
.index header.nav .hr { margin: 0 auto; }
.index header.nav nav { margin-top: .8rem; }
.index main { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 7rem; align-items: center; margin: 2rem 0 0; }
.index .projects { display: flex; flex-direction: column; gap: 7rem; margin: 0; padding: 0; list-style: none; }
.index .projects li { display: flex; align-items: center; gap: 7rem; }
.index .projects li.even { flex-direction: row-reverse; }
.index .projects .info { flex-grow: 1; padding: 0 0 2rem; background: url(../media/arrow48.png) no-repeat; background-size: 2.6rem auto; background-position: left bottom; }
.index .projects .featured { display: block; flex-basis: 55%; flex-shrink: 0; }
.index .projects .featured img { display: block; width: 100%; height: auto; }
.index .projects a { color: var(--grey-1); text-decoration: none; }
.index .projects a:hover { color: var(--grey-3); }

/* Article */
.article main { margin: 2.6rem 0 0; }
.article h1 { color: var(--grey-2); }
.article p { margin: 0 0 1.3rem; font-family: "Lexend", sans-serif; font-weight: 300; font-size: 1rem; line-height: 2rem; letter-spacing: 2%; }
.article article { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 7rem; }
.article article .body { flex-grow: 1; }
.article article .body a:not(.button) { color: var(--grey-1); text-decoration: underline; }
.article article .body a:not(.button):hover { color: var(--grey-3); }
.article article .featured { display: block; width: 100%; max-width: 21rem; height: auto; box-shadow: 1.5rem 1.5rem 0 var(--grey-5); }
.article article .empty { display: block; width: 100%; max-width: 21rem; }
.article article .actions { display: flex; align-items: center; gap: 1.5rem; }
.article article .features { display: flex; flex-direction: column; gap: 2.6rem; margin: 2rem 0; padding: 0; list-style: none; }
.article article .features li { display: flex; gap: 1.8rem; align-items: flex-start; }
.article article .features li:nth-child(even) { flex-direction: row-reverse; }
.article article .features img { flex-shrink: 0; display: block; width: 38%; height: auto; }
.article article .features .info { flex-grow: 1; }
.article article .features .heading-5 { margin: 0 0 1rem; }
.article article video { margin: 0 0 1.5rem; }
.article .gallery { margin: 5rem 0 0; padding: 0; list-style: none; column-count: 3; column-gap: 1.8rem; }
.article .gallery li { display: inline-block; margin: 0 0 1.8rem; width: 100%; break-inside: avoid; }
.article .gallery img { display: block; width: 100%; height: auto; }
.article form { margin: 0; padding: 0; }
.article form .row { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; margin: 0 0 1.8rem; }
.article form .row.submit { flex-direction: row; align-items: center; gap: 2rem; color: var(--grey-3); }
.article form label { color: var(--grey-2); }
.article form input { padding: 0 .5rem; width: 50%; height: 2.6rem; line-height: 2.6rem; font-family: "Lexend", sans-serif; font-weight: 300; font-size: 1rem; border-width: 1px; border-style: solid; border-color: var(--grey-5); }
.article form textarea { padding: .5rem; width: 50%; height: 5rem; line-height: 1.5rem; font-family: "Lexend", sans-serif; font-weight: 300; font-size: 1rem; border-width: 1px; border-style: solid; border-color: var(--grey-5); }
.article form button { color: #FFF; cursor: pointer; border: 0; background: var(--grey-3); }
.article form button:hover { background: var(--grey-2); }

/* Projects */
.projects main { margin: 2.6rem 0 0; }
.projects h1 { color: var(--grey-2); }
.projects .list { margin: 0; padding: 0; list-style: none; column-count: 3; column-gap: 1.8rem; }
.projects .list li { display: inline-block; margin: 0 0 1.8rem; width: 100%; break-inside: avoid; }
.projects .list .info { display: flex; flex-direction: column; }
.projects .list .featured { display: block; }
.projects .list .featured img { display: block; width: 100%; height: auto; }
.projects .list .label { display: block; margin: .75rem 0 0; color: var(--grey-1); text-decoration: none; background: url(../media/arrow48.png) no-repeat; background-size: 1.8rem auto; background-position: right center;}
.projects .list .label:hover { color: var(--grey-3); }

/* Gallery */
.gallery main { margin: 2.6rem 0 0; }
.gallery h1 { color: var(--grey-2); }
.gallery .list { margin: 0; padding: 0; list-style: none; column-count: 2; column-gap: 1.8rem; }
.gallery .list li { display: inline-block; margin: 0 0 1.8rem; width: 100%; break-inside: avoid; }
.gallery .list img { display: block; width: 100%; height: auto; }

/* Publications */
.publications main { display: flex; align-items: flex-start; gap: 7rem; margin: 2.6rem 0 0; }
.publications h1 { color: var(--grey-2); }
.publications h2 { color: var(--grey-3); }
.publications .books { flex-grow: 1; }
.publications .books .list { display: flex; flex-direction: column; gap: 2.6rem; margin: 0; padding: 0; list-style: none; }
.publications .books .list li { display: flex; align-items: flex-start; gap: 1.8rem; }
.publications .books .list li:nth-child(even) { flex-direction: row-reverse; }
.publications .books .list img { display: block; width: 100%; max-width: 15rem; height: auto; }
.publications .books .list .info { flex-grow: 1; }
.publications .books .list .info .publisher { display: block; margin: 0 0 1rem; color: var(--grey-2); }
.publications .books .list .info .paragraph { margin: 0; }
.publications aside { flex-shrink: 0; width: 100%; max-width: 21rem; }
.publications aside hr { margin: 2rem 0; width: 2rem; }
.publications aside .list { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.publications aside .list li { margin: 0 0 .5rem; padding: .5rem 2rem .5rem 1rem; line-height: 1.5rem; }
.publications aside .list li:nth-child(odd) { background: var(--grey-5); }
.publications aside .list a { color: var(--grey-1); text-decoration: none; }
.publications aside .list a:hover { color: var(--grey-3); }

/* Queries */
@media (width <= 1200px) {
    html { font-size: 16px; }
    .cover { height: 100%; }
    .index header.nav h1 { padding: 1.5rem 0; }
    .index header.nav nav { margin-top: .6rem; }
    header.nav .pages { gap: 4.5rem; }
}

@media (width <= 992px) {
    header.nav .menu { display: flex; }
    header.nav .pages { opacity: 0; visibility: hidden; position: absolute; top: 2rem; left: 0; padding: 1rem; flex-direction: column; gap: 1rem; background: var(--grey-4); }
    header.nav .pages.open { opacity: 1; visibility: visible;  transition: opacity .5s, visibility 0s; }
    header.nav .pages li { padding-right: 2rem; }
    header.nav .pages a:hover { color: var(--grey-5); }

    .projects .list { column-count: 2; }
    .publications main { flex-direction: column; gap: 5rem; }
    .publications aside { max-width: none; }

    .wrapper:not(.index) header.nav .hr { display: none; }
    .wrapper:not(.index) header.nav h1 { padding-bottom: 0; }
    .wrapper:not(.index) header.nav nav { margin-top: 0; }
}

@media (width <= 800px) {
    footer { margin-top: 5rem; }
    .index main,
    .index .projects { gap: 5rem; }
    .index .projects li { flex-direction: column-reverse !important; align-items: flex-start; gap: 2rem; }
    .article article { flex-direction: column; gap: 5rem; }
    .article article .empty { display: none; }
}

@media (width <= 640px) {
    .publications .books .list li,
    .article article .features li { flex-direction: column !important; }
    .article article .features img { width: 62%; }
}

@media (width <= 440px) {
    .wrapper { padding: 0 1rem; }
    header.nav .social { gap: 1rem; }
    .index main,
    .article main,
    .gallery main,
    .publications main,
    .projects main { margin-top: 1rem; }
    .gallery .list,
    .projects .list { column-count: 1; }
    .article article .features img { width: 100%; }
}