@font-face {
  font-display: swap;
  font-family: 'HelveticaNeueLTStd-Bd';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'HelveticaNowDisplay';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/HelveticaNowDisplay-Regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'HelveticaNowDisplay';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/HelveticaNowDisplay-Medium.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'HelveticaNowDisplay';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/HelveticaNowDisplay-Bold.woff2') format('woff2');
}

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(11px, 1.19vw, 17px); line-height: 1.4; height: 100%; scroll-behavior: smooth;}
body {font-family: 'HelveticaNowDisplay', sans-serif; font-size: 1.2rem; line-height: 1.25; font-weight: 500; overflow-x: hidden;}
body.words .content {line-height: 1.2rem;}
.container {margin: 0 auto; max-width: 82rem; padding: 0 1rem; position: relative;}
.h1, .h2 {margin: 0; line-height: 1; font-size: 2.1rem; font-weight: 600;}
.h2 {font-weight: 500; margin-bottom: 0.5rem;}
h1, h2, h3 {line-height: 1; font-size: 2rem; font-weight: 600;}
h2 {font-weight: 600; margin-bottom: 0.1rem; padding: 0.1rem 0 0.3rem;}
h3 {font-size: 1.35rem; line-height: 1.2;}
body.where h3 {line-height: 1.3;}
h1 + h2 {font-weight: 400; margin-bottom: 1.5rem; margin-top: 0;}
h1::after,
h2::after,
.grid.writings h3::after,
.grid.press h3::after,
.content.talks h3::after {content: "\\"; margin-left: 0.05em; font-weight: 500;}
img {display: block; max-width: 100%; margin: 0.35rem 0;}
p, ul, ol {margin-bottom: 1.6rem;}
p:last-child, ul:last-child, ol:last-child {margin-bottom: 0;}
#anchor {text-transform: capitalize;}
a[onclick] {cursor: pointer;}

h2, h3 {border-top: 0.3rem solid black;}
.projects.ispage h2 {border: 0;}
h2 {margin-top: 3.25rem;}
h2:first-child {margin-top: 3.25rem;}
h3 {margin-top: 3.25rem; padding-top: 0.1rem;}
h2 + h3 {border: 0; margin-top: 0; padding-top: 0;}
a {text-decoration: none; color: black;}

span.slash {font-weight: 500;}
.content:not(.studio) > div > blockquote {margin-top: 3.25rem;}
.content:not(.studio) > div > blockquote + blockquote {margin-top: 0;}
blockquote p:last-child::after {content: "\\"; font-weight: 500;}
blockquote + p {margin-top: 0.25rem;}

.header {position: sticky; top: 0; background: white; z-index: 3;}
body._index .header,
body.ispage:not(.projects,.sortby) .header,
body.posts .header,
body.home .header {border-bottom: 0.3rem solid black;}
.header > div:nth-child(1) {top: 1.4rem; margin-bottom: 0.5rem; position: relative;}
.header > div:nth-child(2) {font-weight: bold; font-size: 1.57rem; width: 50%; left: 50%; position: relative;}
.header > div:nth-child(2) > ul {position: relative; z-index: 3; justify-content: flex-end; margin-top: -1rem;}
.header a {text-decoration: none; color: black;}
.header h1::after {content: none;} 
.header .h2 {height: 2.1rem!important;}
.header ul {display: flex; margin: 0;}
.header ul li {list-style: none;}
.header nav {border-top: 0.3rem solid black; margin: 0.9rem 0 0; letter-spacing: 0.045em; display: flex; justify-content: space-between;}
.header nav button {display: none;}
.header nav {font-weight: 700; font-size: 1rem; letter-spacing: 0.03rem;}
.header .filter h3 {font-weight: 700; font-size: 1.1rem;}
.header .filter h3 span {cursor: pointer; position: relative;}
#sortby ul {
    position: absolute; 
    display: flex; 
    flex-direction: column;
    background: black;
    padding: 0.35rem 0 0.6rem 0;
    margin-top: 0.35rem;
    display: none;
    min-width: 5rem;
    right: 0;
    z-index: 10;
}
#sortby ul.visible {display: block!important;}
#sortby ul::before {
    content: "";
    position: absolute;
    right: 1rem;
    width: 0; 
    height: 0; 
    border-left: 0.45rem solid transparent;
    border-right: 0.45rem solid transparent;
    border-bottom: 0.45rem solid black;
    top: 0;
    margin-top: -0.3rem;
    transform: translateX(-50%);
}
#sortby ul li {padding: 0; margin: 0; padding: 0;}
#sortby ul li a {
    display: block; 
    color: white; 
    white-space: nowrap; 
    padding: 0.15rem 0.6rem; 
    font-size: 0.82rem; 
    font-weight: 600;
}
.filter > div {position: relative;}
.header .filter .tag {
    position: absolute; 
    right: 0; 
    top: 0.2rem; 
    font-size: 0.82rem; 
    background: black url(/img/close.svg) calc(100% - 0.35rem) center / auto 0.6rem no-repeat; 
    font-weight: 600; 
    color: white;
    padding: 0.1rem 1.5rem 0.2rem 0.45rem;
    display: inline-block;
    cursor: pointer;
}
.header nav ul li {margin-right: 0.5rem; padding: 0 0 0.9rem;}
.header nav ul {display: none;}
.header nav ul:first-of-type {display: flex;}
.header nav #value {padding-left: 0.25rem;}
#sortby::after,
.header nav .arrowdown {
display: inline-block;
width: 0; 
height: 0; 
border-left: 0.25rem solid transparent;
border-right: 0.25rem solid transparent;
border-top: 0.25rem solid black;
position: relative;
bottom: 0.25rem;
margin-left: 0.25rem;
}
#sortby {display: none;}
body.sortby #sortby,
body.projects:not(.ispage) #sortby {display: block;}
.header nav select {
    background: none;
    border: 0; 
    border-radius: 0;
    font-family: 'HelveticaNowDisplay', sans-serif; 
    font-size: 1rem;
    padding: 0 0.7rem 0 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    text-align: right;
    font-weight: 500;
}

.header .filter,
.content ul.table .row a {
    display: grid;
    grid-template-columns: 2.2fr 2.2fr 2.2fr 1fr 1fr;
    grid-gap: 1.5rem;
    font-size: 1rem;
    line-height: 1.3;
}
.header .filter {border-bottom: 0.1rem solid black;}
.header .filter > div {border-top: 0.3rem solid black;}
.header .filter > div h3 {padding-bottom: 0.9rem; border: 0; margin: 0;}


/* LIST */

.content ul.table {width: 100%;}
.content ul.table .anchor {list-style: none; height: 268px; position: absolute; pointer-events: none; transform: translateY(-100%);}
.content ul.table .row {list-style: none;width: 100%; border-bottom: 0.1rem solid black;}
.content ul.table .row a {width: 100%; text-decoration: none; color: black;}
.content ul.table .row span {padding-bottom: 0.6rem; display: block;}
.content ul.table .row .hoverimage {position: fixed; width: 10rem; pointer-events: none; opacity: 0;}
.content ul.table .row.hover .hoverimage {opacity: 1;}


/* PERSON */

.content ul.table.people {
    font-size: 1rem;
    border-top: 0.1rem solid black;
    margin-top: 1em;
    margin-bottom: 7rem;
}
.content ul.table .row span.person {
    width: 100%;
    display: none;
    border-top: 0.1rem solid black;
    display: none; 
    flex-direction: row-reverse; 
    justify-content: space-between;
    line-height: 1.3;
    padding-top: 1.9rem;
}
.content ul.table .row.active span.person {display: flex;}
.content ul.table .row.active span.person > *:nth-child(1) {
    width: 39.25rem; 
    border-top: 0.3rem solid black;
    border-bottom: 0.3rem solid black;
    padding: 0.2rem 0;
    margin-bottom: 5rem;
}
body.projects.sortby .content ul.table {margin-bottom: calc(100vh - 21.6rem);}
.content ul.table .row.active span.person > *:nth-child(2) img {width: 18rem; margin: 0;}
.content ul.table .row.active span.person p {margin-bottom: 1.8rem;}
.content ul.table .row.active span.person h2,
.content ul.table .row.active span.person h3 {font-weight: 600; border: 0; font-size: 1rem; margin: 0.2rem 0; margin-top: 0; padding: 0;}


/* SINGLE */

.content {display: flex; flex-direction: row-reverse; justify-content: space-between;}
.content > div:nth-child(1) {width: 39.25rem;}
.content > div:nth-child(1) > h2:first-child {margin-top: 0;}

.content.project {margin-top: 1.93rem; line-height: 1.4;}
.content.project h1 {border-top: 0.3rem solid black;}
.content.project h1 + * {border-top: 0.3rem solid black; margin-top: 6rem; padding-top: 0.15rem;}
.content.project > div:nth-child(1) {width: 29rem; position: relative;}
.content.project > div:nth-child(1) > div {position: sticky; top: 18.55rem;}
.content.project > div:nth-child(1) .projectdetails {
    border-bottom: 0.3rem solid black;
    padding: 0.15rem 0;
    margin-top: 2rem;
    border-top: 0.3rem solid black; 
    margin-top: 8rem;
}
.content.project > div:nth-child(1) .projectdetails dl {padding-bottom: 5.6rem;}
.content.project > div:nth-child(1) .projectdetails dl dt {font-weight: 600;}
.content.project > div:nth-child(1) .projectdetails dl > *::after {content: "\\"; font-weight: normal;}
.content.project > div:nth-child(1) .projectdetails dl dd {margin-bottom: 1.6em;}
.content.project > div:nth-child(2) {width: calc(100% - 39.25rem);}
.content.project > div:nth-child(1) > div > ul {margin-left: 1rem;}

.readmore {
    display: inline-block; 
    border-bottom: 1px solid black; 
    margin-right: 1.25rem;
    font-weight: bold;
}

.externallink {margin-right: 0.75rem;}
.externallink::after {
    content: "";
    background: url(/img/arrowup.svg) center center / 0.8rem auto no-repeat;
    display: inline-block;
    height: 0.8rem;
    width: 0.8rem;
    margin: 0 0 0 0.25rem;
}
.noafter.externallink::after {content: none;}

.content.hastitle {flex-direction: row; border-top: 0.3rem solid black; font-size: 1rem; padding-top: 0.15rem;}
.header + .content.hastitle,
.header + .submenu + .content.hastitle {border-top: 0;}
.fullwidth {width: 100%!important; border: 0!important; padding: 0.15rem 0 2.25rem;}
.content.hastitle .fullwidth {padding-top: 0;}
.content.hastitle h2 {line-height: 1.2;}
.content.hastitle > div:nth-child(1) h1,
.content.hastitle > div:nth-child(1) h2, 
.fullwidth h1, .fullwidth h2 {border: 0; font-size: 1.325rem; margin: 0; padding: 0; font-size: 1rem;}
ul.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 0 1.5rem;
}
@media screen and (max-width: 588px) {
    ul.grid li {border-left: 0!important; border-right: 0!important;}
}


/* WRITINGS */

.content ul.writings {
    width: 100%; 
    margin: 2.4rem 0 0;
    position: relative;
    border-bottom: 0.3rem solid black;
}
.content ul.writings li {
    list-style: none; 
    font-size: 0.91rem; 
    padding-top: 1.2rem;
    padding-bottom: 3rem; 
    padding-right: 1.5rem;
    line-height: 1.2;
    border-left: 0.1rem solid black;
    border-right: 0.1rem solid black;
}
.content ul.writings li::before {
    content: "";
    height: 0.3rem;
    background: black;
    width: 100%;
    position: absolute;
    left: 0;
    margin-top: -1.2rem;
}
.content ul.writings li h3 {border: 0; margin: 0 0 0.8rem; font-size: 1.8rem; line-height: 1.1;}
.content ul.writings li a.readmore {font-size: 1rem; float: right; margin-right: 0;}


/* PUBLICATIONS */

.content ul.publications {
    position: relative;
    width: 100%;
    margin: 0;
    grid-gap: 0 1.5rem;
    border-bottom: 0.3rem solid black;
}
.content ul.publications li {
    list-style: none; 
    font-size: 0.91rem; 
    line-height: 1.2;
    border-left: 0.1rem solid black;
    border-right: 0.1rem solid black;
    padding-right: 6rem;
}
.content ul.publications li::before {
    content: "";
    height: 0.3rem;
    background: black;
    width: 100%;
    position: absolute;
    left: 0;
}
.content ul.publications li img {height: 14rem; margin: 0.85rem 0 1.6rem 0; }
.content ul.publications li a.readmore {
    border-bottom: 1px solid black; 
    font-weight: bold; 
    display: inline-block; 
    margin-bottom: 4rem;
}
.content ul.publications li a.readmore::after {content: none!important}


/* TALKS */

.content.talks {border-top: 0.3rem solid black;}
.content.talks li {
    list-style: none; 
    padding-bottom: 0.1rem;
    font-size: 0.91rem; 
    border-top: 0.3rem solid black; 
    padding-bottom: 2.5rem;
    line-height: 1.2;
    position: relative;
}
.content.talks li > h3 {max-width: 30rem;}
.content.talks li > p {max-width: 20rem;}
.content.talks li:first-child {border: 0;}
.content.talks li:last-child {border-bottom: 0.3rem solid black;}
.content.talks li h3 {font-size: 1.82rem; border: 0; margin-top: 0; line-height: 1; margin-bottom: 0.6rem;}
.content.talks li a.readmore {font-size: 1rem; position: absolute; right: 0; bottom: 1.5rem; margin: 0;}
.content.talks li a.readmore::after {content: none!important;}


/* QUOTES */

.content.quotes {border-top: 0.3rem solid black;}
.content.quotes li {list-style: none; margin-top: 4.5rem; font-weight: 600; font-size: 0.91rem; line-height: 1.2;}
.content.quotes li:last-child {margin-bottom: 4.5rem;}
.content.quotes li blockquote {font-weight: 500; border-bottom: 0; padding-bottom: 1.5rem; font-size: 1.6rem; line-height: 1.1;}
.content.quotes li blockquote > * {display: inline;}
.content.quotes li blockquote > *::after {content: none;}


/* PRESS */

.content ul.press {
    position: relative;
    border-bottom: 0.3rem solid black; 
    width: 100%;
    grid-gap: 0 1.5rem; 
    margin: 0;
}
.content ul.press li::before {
    content: "";
    height: 0.3rem;
    background: black;
    width: 100%;
    position: absolute;
    left: 0;
    margin-top: -0.15rem;
}
.content ul.press li {
    list-style: none;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    font-size: 1rem; 
    border-left: 0.1rem solid black;
    border-right: 0.1rem solid black;
    padding-top: 0.15rem;
    padding-right: 1.5rem;
}
.content ul.press li h3 {margin: 0; font-size: 1.45rem; border-top: 0.3rem solid transparent;}
.content ul.press li > div:first-child {font-size: 1.45rem; line-height: 1.2; margin-bottom: 3rem;}
.content ul.press li > div:last-child > div {
    display: inline-block;
    padding-top: 1rem; 
    line-height: 1.2; 
    float: right;
    margin: 0 0 1.6rem 0;
}
.content ul.press li a.readmore {float: none; margin: 0;}


/* AWARDS */

.content.awards > div {border-top: 0.3rem solid black; font-size: 1rem; margin-top: 2.25rem;}
.content.awards > div ul {margin: 0;}
.content.awards > div ul li {padding-bottom: 0.25rem; line-height: 1.1;}
.content.awards > div ul li:first-child {padding-bottom: 3rem;}
.content.awards > div ul li > div {display: flex; padding-bottom: 0.5rem;}
.content.awards > div ul li span:nth-child(1) {width: calc(50% - 1.5rem);}
.content.awards > div ul li span:nth-child(2) {width: calc(50% + 1.5rem);}


/* STUDIO */

.content.studio {display: flex; gap: 1.75rem; margin-top: 2.25rem;}
.content.studio > div:nth-child(1) {width: 24%; font-size: 1rem;}
.content.studio > div:nth-child(2) {width: 76%;}
.content.studio blockquote {font-size: 1.8rem;}
.content.studio blockquote > p:last-child::after {content: none;}
.content.studio p:last-child {margin-bottom: 0;}


/* POSTS */

body.posts .header + .content {border: 0;}
.content.posts {display: block;}
.content.posts .singlepost {
    width: 100%; 
    display: flex; 
    flex-direction: row-reverse; 
    justify-content: space-between;
    border-top: 0.3rem solid black; 
    font-size: 1rem;
}
.content.posts .singlepost > div:nth-child(1) {width: 39.25rem;}
.content.posts .singlepost > div:nth-child(1) h2 {border: 0;}
.content.posts .singlepost > div:nth-child(1) h2:first-child {margin-top: 0;}
.content.posts .singlepost > div:nth-child(1) .date {
    text-align: right;
    border-bottom: 0.3rem solid black; 
    padding: 1rem 0 0.75rem;
    margin: 0 0 0.25rem;
}
.content.posts .singlepost > div:nth-child(2) {width: 29rem;}
.content.posts .singlepost + .singlepost {margin-top: 5rem;}


blockquote {
    border-top: 0.3rem solid black; 
    border-bottom: 0.3rem solid black; 
    line-height: 1.05; 
    font-size: 2.1rem; 
    font-weight: bold;
    padding-bottom: 2rem;
}
blockquote + blockquote {border-top: 0;}

.footer {padding: 7rem 0;}

body.the-studio .studio,
body.the-team .content.hastitle,
body.who-we-are .content.hastitle {border-bottom: 0.3rem solid black; padding-bottom: 3.4rem;}

.submenu {position: absolute; width: calc(100% - 2rem); background: white; border-bottom: 0.3rem solid black; z-index: 9;}
body.ispage .submenu {display: none;}
body.submenuopen .submenu {display: block;}
.submenu .row {padding-bottom: 0.6rem;}
.submenu .row a {font-weight: 600;}

.mobile-only {display: none;}
.mobile-only .images {border: 0!important; margin: 0!important; padding: 0 0 0!important;}
.mobile-only .images img {display: block; margin: 0.35rem 0 3rem;}

@media only screen and (max-width: 800px) {
    html {font-size: 15px;}
    .desktop-only {display: none!important;}
    .content.posts,h2:first-child {margin-top: 2.25rem;}
    .content:not(.studio) > div > blockquote {margin-top: 2.25rem;}
    .content ul.table .row a {display: block;};
    #anchor {display: none;}
    .content ul.table .row.hover .hoverimage {opacity: 0;}
    .header nav {
        font-size: 1.325rem;
        font-weight: 500;
        letter-spacing: 0;
        flex-direction: column;
    }
    .header nav button {
        display: block; 
        width: 100%; 
        border: 0;
        color: black;
        background: white url(/img/triangle.svg) calc(100% - 0.8rem) 0.4rem / 1.5rem auto no-repeat;
        text-align: left;
        font-family: 'HelveticaNowDisplay', sans-serif;
        font-size: 1.325rem;
        font-weight: 600;
        padding: 0.15rem 0 1rem;
        cursor: pointer;
        line-height: 1;
    }
    body.menuopen .header nav button {background: white url(/img/triangle_up.svg) calc(100% - 0.8rem) 0.4rem / 1.5rem auto no-repeat;}
    .header > div > ul {height: 2rem;}
    .header .filter,
    .ispage.projects .filter + .content,
    .header > div > ul li,
    .header nav > ul:first-of-type {display: none;}
    #sortby {position: absolute; top: 0.2rem; right: 0; z-index: 10;}
    #sortby::after {content: ""; margin: 0; position: absolute; transform: translate(-100%, -160%);}
    body.menuopen .header nav ul:last-child {display: block;}
    .mobile-only {display: initial;}
    li.mobile-only {display: block;}
    body.projects .header nav {margin-bottom: 0rem;}
    body.projects.sortby .content ul.table,
    body.projects:not(.ispage) .content ul.table {margin-bottom: 0;}
    body.projects .content ul.table .mobile-only h3 {
        margin: 0; 
        padding: 0.1rem 0 0.6rem; 
        border-bottom: 0.1rem solid black; 
        line-height: 1; 
        border-top: 0.3rem solid black;
        text-transform: lowercase;
    }
    body.projects .content ul.table .mobile-only h3::after {content: "\\"; font-weight: 500;}
    body.projects .content ul.table .row span {display: none;}
    body.projects .content ul.table .row span:nth-child(1),
    body.projects .content ul.table .row span:nth-child(2) {display: block;}
    body.projects .content ul.table li:nth-child(2) h3 {border-top: 0;}
    .content.project {flex-direction: column-reverse; margin-top: 0;}
    .content.project > div {width: 100%!important}
    .content.project > div > div h1 {
        border-bottom: 0.3rem solid black;
        padding-bottom: 6rem;
        border-top: 0;
        padding-top: 0.5rem;
        margin-bottom: 0.25rem;
    }
    .content.project > div:first-child > div h1 {display: none;}
    .content.posts > .singlepost {display: block;}
    .content.posts .singlepost + .singlepost {margin-top: 7rem;}
    .content.posts .singlepost > div:nth-child(1) {width: auto;}
    .content.posts .singlepost .image.mobile-only {
        padding-bottom: 1.15rem; 
        border-bottom: 0rem solid black; 
        display: block;
        margin-bottom: 0.15rem;
    }
    .content.hastitle {flex-direction: column;}
    .fullwidth,
    .content.hastitle > div:nth-child(1) {
        border-bottom: 0rem solid black!important;
        width: 100%;
        padding-bottom: 0.5rem;
    }
    .fullwidth {margin-bottom: 0rem;}
    .content.hastitle > div:nth-child(2) {width: 100%!important; padding-top: 0.3rem;}
    .content.studio {flex-direction: column-reverse; border-top: 0.3rem solid black; padding-top: 2rem;}
    .content.studio > div {width: 100%!important;}
    .content ul.table .row.active span.person {flex-direction: column-reverse; padding-top: 1.6rem;}
    .content ul.table .row.active span.person > :nth-child(1) {width: 100%; border-color: transparent;}
    .content.awards > div {border-top: 0;} 
    body.where .header + .content .fullwidth {border: 0!important; padding: 0;}
    .header nav ul li {border-top: 0.1rem solid black; margin: 0; padding: 0;}
    .header nav ul li:first-child {border-top: 0.3rem solid black;}
    .header nav ul li a {padding-bottom: 0.5rem; display: block;}
    .header nav ul li.small a {font-size: 1rem; line-height: 1.3; }
    .header nav ul li.title strong {font-weight: 600;}
    .content.awards > div ul li:first-child {padding-bottom: 1rem;}
    .content .empty {padding: 0!important; border: 0!important;}
    body:not(.who) .content > div:nth-child(1) > h2:first-child {border-top: 0;}
    .header nav ul li:last-child {padding-bottom: 0.5rem;}
    body.home .content {padding-top: 2rem;}
    .content.quotes li:first-child blockquote {border-top: 0;}
    .content.quotes li:first-child {margin-top: 0;}
    .content ul.press {margin-bottom: 0;}
    body .header {border-bottom: 0.3rem solid black!important;}
    body.words._index .submenu.content, body.who._index .submenu.content, body.posts .content .fullwidth > h1 {display: none;}
    .header nav ul.breadcrumbs_mobile {display: block;}
    body.menuopen nav ul.breadcrumbs_mobile {display: none;}
    body.ispage:not(.writings, .publications, .talks, .quotes, .press) .content.hastitle, body.ispage:not(.writings, .publications, .talks, .quotes, .press) .content.hastitle, body.posts .header + .content {margin-top: -3rem;}
    body.ispage:not(.team-members) .content.hastitle > div:first-child {display: none;}
    .content.awards > div ul li:first-child {padding-bottom: 0.3rem;}
    .content ul.table.people .row > span:not(.person) {padding-block: 0.6rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .content.posts .singlepost:first-child {margin-top: 2.6rem; border: 0}
    .header .h2 {width: 0; overflow: hidden;}
    .header > div:nth-child(2) {display: none;}
}