:root {
--vh: 1vh;
--window-height: calc(100 * var(--vh, 1vh)); --color-background: #fff;
--color-foreground: #333; --font-family-base: 'DM Sans', Helvetica, Arial, sans-serif;
--font-size-base: 1.5rem;
--line-height-base: calc(1.25 * var(--font-size-base));
--font-size-subheading: calc(0.875 * var(--font-size-base));
--line-height-subheading: calc(1.25 * var(--font-size-subheading));
--font-size-lg: calc(1.125 * var(--font-size-base));
--line-height-lg: calc(1.125 * var(--font-size-lg));
--font-size-title: calc(1.8125 * var(--font-size-base)); --gutter: 2.4rem;
--grid-gutter: calc(1 * var(--gutter)); --edge-x: calc(1 * var(--gutter)); --site-header-height: calc(2 * var(--gutter) + 2.4rem); --site-main-top-padding: 0; --icon-height: 16px; --transition-timing-function-sudden-end: cubic-bezier(0.9, 0.03, 0.69, 0.22);
--transition-timing-function-sudden-start: cubic-bezier(0.17, 0.84, 0.44, 1);
--transition-timing-function-smooth: cubic-bezier(0.62, 0.16, 0.13, 1.01);
--transition-timing-function-inertia: cubic-bezier(0.5, -0.53, 0.14, 1.23);
}
@media screen and (min-width: 600px) {
:root {
--font-size-base: 1.6rem;
--font-size-subheading: calc(0.75 * var(--font-size-base));
}
}
@media screen and (min-width: 900px) {
:root {
--gutter: 2.8rem;
--site-main-top-padding: calc(2 * var(--gutter) + var(--font-size-title));
}
}
@media screen and (min-width: 1200px) {
:root {
--gutter: 3.2rem;
--font-size-base: 1.8rem;
}
}
@media screen and (min-width: 1600px) {
:root {
--gutter: 4rem;
--font-size-base: 2rem;
}
}
@media screen and (min-width: 1720px) {
:root {
--gutter: 4.8rem;
}
} *,
*::before,
*::after {
box-sizing: border-box;
} html {
font-size: 62.5%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button {
background-color: transparent;
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
}
button svg {
display: block;
} body {
background: var(--color-background);
color: var(--color-foreground);
font-family: var(--font-family-base);
font-optical-sizing: auto;
}
a {
color: var(--color-foreground);
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: var(--font-size-base);
font-style: normal;
line-height: var(--line-height-base);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
.h2 {
font-size: 2.4rem;
line-height: calc(1.25 * 2.4rem);
}
.h3 {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
video {
height: auto;
width: 100%;
} .rich-text {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.rich-text>*+* {
margin-top: var(--rich-text-margin-top, var(--line-height-base));
}
.rich-text a {
text-decoration: underline;
} .flow>*+* {
margin-top: var(--flow-space, var(--gutter));
}
.flow>* {
display: block;
}
.subheading {
color: #999;
font-size: var(--font-size-subheading);
line-height: var(--line-height-subheading);
margin-top: 1px;
}
.subheading>* {
display: block;
} .container {
padding-left: var(--gutter);
padding-right: var(--gutter);
width: 100%;
}
@media screen and (min-width: 900px) {
.container {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
width: 768px;
}
}
@media screen and (min-width: 1200px) {
.container {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
width: 1024px;
}
} .video-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
width: 100%;
}
.video-embed iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
} .site-header {
font-size: var(--font-size-lg);
font-weight: 600;
line-height: var(--line-height-lg);
}
.site-header__nav .space-on-top,
.site-header__contact {
margin-top: calc(1 * var(--line-height-lg));
}
.site-header__links .current-menu-item a,
.site-header__links a:hover {
text-decoration: underline;
}
@media screen and (max-width: 899px) {
.site-header {
align-items: center;
background-color: var(--color-background);
display: flex;
justify-content: space-between;
left: 0;
padding: calc(1.5 * var(--gutter)) var(--gutter) calc(0.75 * var(--gutter));
position: sticky;
top: 0;
width: 100%;
z-index: 1; }
.site-header__nav-toggle-button svg {
height: var(--icon-height);
width: auto;
}
.site-header__logo a {
display: inline-block;
font-size: 2.4rem;
line-height: 1;
margin-bottom: -2px;
margin-top: 2px;
}
.site-header__links {
background-color: var(--color-background);
bottom: 0;
left: 100vw;
opacity: 0;
padding: calc(1.25 * var(--gutter)) var(--gutter) var(--gutter);
position: fixed;
top: var(--site-header-height);
transition: all 0.5s var(--transition-timing-function-smooth);
width: 100vw;
z-index: 2;
}
.site-menu-is-open {
overflow: hidden;
}
.site-menu-is-open .site-header__links {
left: 0;
opacity: 1;
}
.site-main {
padding: calc(1.25 * var(--gutter)) var(--gutter) calc(1.5 * var(--gutter));
}
.site-main .scroll-container {
height: 100%;
}
}
@media screen and (min-width: 900px) {
.wrapper {
display: grid;
gap: calc(4 * var(--gutter));
grid-template-columns: max-content 1fr;
height: var(--window-height);
overflow: hidden;
}
.site-header {
display: flex;
flex-direction: column;
gap: var(--gutter);
height: 100vh;
overflow: hidden;
padding: var(--gutter) 0 var(--gutter) var(--gutter);
position: sticky;
}
.site-header__nav-toggle-button {
display: none;
}
.site-main {
padding: 0;
}
.site-main .scroll {
padding: var(--site-main-top-padding) var(--gutter) var(--gutter);
}
.site-header__logo a {
font-size: var(--font-size-title);
line-height: 1;
}
}
@media screen and (min-width: 1200px) {
.wrapper {
gap: calc(4 * var(--gutter));
}
} .feed {
--flow-space: calc(2 * var(--gutter));
}
.feed-item {
display: flex;
flex-direction: column-reverse;
font-size: calc(0.875 * var(--font-size-base));
gap: calc(0.5 * var(--gutter));
line-height: calc(0.875 * var(--line-height-base));
}
.feed-item>* {
display: block;
}
.feed-item__header>* {
display: block;
}
.feed-item__title {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
.feed-item__year {
margin-top: 0.125rem;
}
.feed-item__cover,
.feed-item__cover img {
height: auto;
width: 100%;
}
.feed-item--hide-text> :not(.feed-item__cover) {
display: none;
}
.feed-item--hide-text .feed-item__cover {
margin-top: 0;
}
.feed__featured-image {
height: auto;
width: 100%;
}
@media screen and (min-width: 1600px) {
.home .site-main {
padding: 0 calc(2 * var(--gutter)) 0 0;
}
} .work__header {
background-color: var(--header-background-color);
position: fixed;
top: 0;
width: 100%;
} .work__header-meta-wrapper {
display: flex;
gap: var(--gutter-small);
padding: var(--gutter-small);
justify-content: center;
width: 100%;
}
.work__header-button {
padding: var(--gutter-small);
position: fixed;
top: 0;
}
.work__header-button svg {
width: fit-content;
height: fit-content;
}
h1.work__header-title,
p.work__header-year {
font-size: 1.8rem;
}
h1.work__header-title {
text-transform: capitalize;
font-weight: 600;
} @media screen and (min-width: 900px) {
.work__video-section {
width: 100%;
max-width: 768px;
margin: 0 auto;
}
}
@media screen and (min-width: 1200px) {
.work__video-section {
max-width: 1024px;
}
}
@media screen and (min-width: 1400px) {
.work__video-section {
max-width: 1200px;
}
}
.work__video-section {
width: 100%;
height: 100%;
padding: calc(6.75 * var(--gutter)) var(--gutter-small);
}
.work__description {
margin-bottom: calc(1.25 * var(--gutter));
}
.work__description p,
.work__content p {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
@media screen and (min-width: 600px) {
.work__video-section {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--gutter);
}
.work__video-meta-wrapper {
padding: 0 var(--gutter-small);
}
.work__video-meta-wrapper>*+* {
margin-top: calc(1.25 * var(--gutter));
}
.work__content>*+* {
margin-top: calc(var(--gutter));
}
} @media screen and (min-width: 900px) {
.work__image-section {
width: 100%;
max-width: 768px;
margin: 0 auto;
}
}
@media screen and (min-width: 1200px) {
.work__image-section {
max-width: 1024px;
}
}
@media screen and (min-width: 1400px) {
.work__image-section {
max-width: 1200px;
}
}
.work__image-section {
width: 100%;
height: 100%;
padding: calc(6.75 * var(--gutter)) var(--gutter-small);
}
.work__image-container {
display: flex;
flex-direction: column;
row-gap: var(--gutter);
margin-bottom: var(--gutter);
}
.work__image-description {
display: none;
}
.work__image-description p {
font-size: var(--font-size-base);
padding: 0 var(--gutter-small);
}
@media screen and (min-width: 600px) {
.work__image-section {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--gutter);
}
.work__image-description {
display: block;
}
} ::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;
} .scroll-container {
height: 100vh;
overflow: hidden;
position: relative;
}
.scroll {
height: 100%;
overflow-y: scroll;
} .page-title {
display: none;
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
margin-bottom: calc(1 * var(--gutter));
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: calc(2 * var(--grid-gutter)) var(--grid-gutter);
}
.grid-item {
display: flex;
flex-direction: column;
gap: calc(0.5 * var(--line-height-base));
}
.grid-item img,
.grid-item picture {
order: 1;
}
.grid-item__content {
order: 2;
}
.grid-item img {
aspect-ratio: var(--grid-aspect-ratio, 4 / 3);
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.grid-item__content p {
color: #999;
font-size: calc(0.75 * var(--font-size-base));
line-height: calc(0.75 * var(--line-height-base));
margin-top: 1px;
}
@media screen and (min-width: 600px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1200px) {
.grid-item__thumbnail {
overflow: hidden;
}
.grid-item img {
transition: transform 0.25s ease-in-out;
will-change: transform;
}
.grid-item:hover img {
transform: scale(1.1);
}
.grid-item:hover h2 {
text-decoration: underline;
}
}
@media screen and (min-width: 1600px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
} @media screen and (min-width: 900px) {
.page-template-project-category .grid {
margin-top: 0;
}
} .video,
.video iframe { display: block;
}
.video[data-aspect-ratio='16:9'],
.video[data-aspect-ratio='16:9'] iframe {
aspect-ratio: 16 / 9;
}
.project__meta {
color: #999;
font-size: calc(0.75 * var(--font-size-base));
line-height: calc(0.75 * var(--line-height-base));
}
.project__media>*+* { margin-top: calc(var(--gutter) - 3px);
}
.project__images>*+* {
margin-top: var(--gutter);
}
.project__video iframe {
aspect-ratio: 4 / 3;
width: 100%;
}
@media screen and (max-width: 599px) {
.project>*+*,
.project__main>*+* {
margin-top: var(--gutter);
}
.project__video iframe {
height: auto;
}
}
@media screen and (min-width: 600px) {
.project__main {
display: grid;
gap: var(--gutter);
grid-template-columns: repeat(3, 1fr);
}
.project__header {
grid-column: 1 / span 1;
}
.project__content {
grid-column: 2 / span 2;
}
.project__content .rich-text {
max-width: 20em;
}
.project>*+* {
margin-top: calc(1 * var(--gutter));
}   .project__top-header .h3 {
font-size: 2.8rem;
line-height: 1;
}
}
@media screen and (min-width: 900px) { .single-ru_project .site-main .scroll {
padding-bottom: 0;
padding-top: 0;
}
.project {
padding-top: var(--site-main-top-padding);
position: relative;
}
.project--text-on-side {
display: grid;
gap: calc(1 * var(--gutter));
grid-template-columns: 2fr 1fr;
padding-bottom: var(--gutter);
}
.project__main {
display: flex;
flex-direction: column;
gap: var(--line-height-base);
}
.project__images>*+* {
margin-top: calc(1 * var(--gutter));
}
.project__images a,
.project__images img {
display: block;
width: 100%;
}
.project__images a {
position: relative;
}
.project__images a::after {
content: '';
position: absolute;
bottom: 8px;
right: 8px;
width: var(--icon-height);
height: var(--icon-height);
background: url('data:image/svg+xml,<svg class="expand" xmlns="http://www.w3.org/2000/svg" viewBox="2.64 2.64 18.66 18.66"><path fill-rule="evenodd" d="M16 5h1.586l-3.293 3.293a1 1 0 0 0 1.414 1.414L19 6.414V8a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1h-4a1 1 0 1 0 0 2zM5 8V6.414l3.293 3.293a1 1 0 0 0 1.414-1.414L6.414 5H8a1 1 0 0 0 0-2H4a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0zm3 11H6.414l3.293-3.293a1 1 0 0 0-1.414-1.414L5 17.586V16a1 1 0 1 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2zm11-1.414V16a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 1 1 0-2h1.586l-3.293-3.293a1 1 0 1 1 1.414-1.414L19 17.586z" clip-rule="evenodd" fill="%23fff"/></svg>') no-repeat center center;
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
.project__images a:hover::after {
opacity: 1;
}
.project__main {
margin: 0;
}
.project__content .rich-text {
font-size: calc(0.875 * var(--font-size-base));
line-height: calc(0.875 * var(--line-height-base));
} .project--text-on-top .project__content {
display: none;
}
.project--text-on-top .project__main {
position: absolute;
top: calc(var(--gutter) + 0.5 * var(--line-height-lg));
}
.project--text-on-top .project__images {
padding-bottom: var(--gutter);
}
}
@media screen and (min-width: 1200px) {
.project--text-on-top .project__images--1 a {
display: block;
line-height: 0;
}
.project--text-on-top .project__images--1 img {
height: 100%;
max-height: calc(var(--window-height) - var(--site-main-top-padding) - var(--gutter));
;
object-fit: contain;
object-position: top left;
width: 100%;
}
.project--text-on-top .project__images--1 a,
.project--text-on-top .project__images--1 img {
width: fit-content;
width: -moz-fit-content;
width: -webkit-fit-content;
width: intrinsic;
}
}
@media screen and (min-width: 1600px) {
.project {
grid-template-columns: 3fr 2fr;
}
.project__content {
width: 28ch;
}
}
@media screen and (min-width: 1720px) {
.project--text-on-top .project__media {
padding-right: calc(2 * var(--gutter));
}
} .page h1 {
display: none;
}
.text-sections {
--flow-space: calc(2 * var(--line-height-base));
}
.text-section__title {
margin-bottom: calc(1 * var(--line-height-base));
}
.text-section__subtitle {
color: #999;
font-size: calc(0.75 * var(--font-size-base));
line-height: calc(0.75 * var(--line-height-base));
margin-top: 1px;
}
@media screen and (min-width: 600px) {
.text-section {
--flow-space: calc(3 * var(--gutter));
display: grid;
gap: calc(2 * var(--gutter));
grid-template-columns: 1fr 2fr;
}
.text-section__title {
margin-bottom: calc(0.5 * var(--line-height-base));
}
.text-section__subtitle {
--rich-text-margin-top: calc(0.5 * var(--line-height-base));
}
}
@media screen and (min-width: 1200px) {
.text-section {
grid-template-columns: 1fr 2fr 1fr;
}
}
@media screen and (min-width: 1600px) {
.text-section {
grid-template-columns: 1fr 2fr 2fr;
}
} .sl-wrapper .sl-close {
right: var(--gutter);
top: var(--gutter);
margin-top: 0;
margin-right: 0;
}
.sl-wrapper .sl-close,
.sl-wrapper .sl-close svg {
line-height: var(--icon-height);
height: var(--icon-height);
width: auto;
}
.sl-wrapper .sl-navigation button {
margin-top: 0;
height: auto;
line-height: 1;
transform: translateY(-50%);
width: var(--icon-height);
}
.sl-wrapper .sl-navigation button svg {
height: auto;
width: var(--icon-height);
}
.sl-wrapper .sl-navigation button.sl-next {
right: 8px;
font-size: 0;
transform: rotate(180deg);
}
.sl-wrapper .sl-navigation button.sl-prev {
left: 8px;
font-size: 0;
}
.sl-wrapper .sl-counter {
display: none !important;
}
@media screen and (min-width: 600px) {
.sl-wrapper .sl-navigation button.sl-next {
right: var(--gutter);
}
.sl-wrapper .sl-navigation button.sl-prev {
left: var(--gutter);
}
} .video-container {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
max-width: 100%;
}
.video-container--4-3 {
padding-bottom: 75%;
}
.video-container iframe {
background-color: #eee;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
object-fit: cover; } .feed-item__cover,
.video-container {
background: linear-gradient(45deg, #fafafa, #ddd, #fafafa, #ddd);
background-size: 400% 400%; animation: gradientAnimation 2.5s ease infinite; }
.feed-item__cover>*,
.video-container>* {
object-fit: cover;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} .project__video iframe,
.video-container iframe,
iframe {
border: 0 !important;
outline: none;
}