/* =========================================
   Global Variables and General Styles
   ========================================= */
:root {
    --nav-height: 13.778vh; /* 124px in 1440x1024 -> font-size + 2 * 50px margins */

    --spacer-horizontal-25: 1.737vw; /* 25px in 1440x1024 */
    --spacer-horizontal-45: 3.125vw; /* 45px in 1440x1024 */
    --spacer-vertical-8: 0.782vh; /* 8px in 1440x1024 */
    --spacer-vertical-10: 0.977vh; /* 10px in 1440x1024 */
    --spacer-vertical-25: 2.442vh; /* 25px in 1440x1024 */
    --spacer-vertical-45: 4.395vh; /* 45px in 1440x1024 */
    --spacer-vertical-100: 9.766vh; /* 100px in 1440x1024 */
    --spacer-vertical-300: 29.297vh; /* 300px in 1440x1024 */

    --font-family-regular: "Riposte regular", sans-serif; /* with font-weight 400 */
    --font-family-medium: "Riposte medium", sans-serif; /* with font-weight 500 */

    --font-size-xs: clamp(12px, calc(25 / 3840 * 100vw), calc(25px * 1.5)); /* 12px in 1440x1024 */
    --font-size-s: clamp(18px, calc(36 / 3840 * 100vw), calc(36px * 1.5)); /* 18px in 1440x1024 */
    --font-size-m: clamp(20px, calc(40 / 3840 * 100vw), calc(40px * 1.5)); /* 20px in 1440x1024 */
    --font-size-l: clamp(30px, calc(60 / 3840 * 100vw), calc(60px * 1.5)); /* 30px in 1440x1024 */
    --font-size-xl: clamp(80px, calc(120 / 3840 * 100vw), calc(120px * 1.5)); /* 80px in 1440x1024 */
}
@media only screen and (min-width: 2560px) {
    :root {
        --nav-height: 10.435vh;
    }
}
@media only screen and (max-width: 1440px) {
    :root {
        --nav-height: 11.112vh;
    }
}
@media only screen and (max-width: 1280px) {
    :root {
        --font-size-xl: 60px;
    }
}
@media only screen and (max-width: 900px) {
    :root {
        --font-size-xl: 50px;
    }
}

/* =========================================
     Header Styles
     ========================================= */
.c-header,
.c-frontpage__grid,
.c-project {
    padding-left: var(--spacer-horizontal-45);
    padding-right: var(--spacer-horizontal-45);
}
.c-header {
    height: var(--nav-height);
    width: 100%;
    mix-blend-mode: difference !important;
    background: none !important;
    pointer-events: none;
    --color: #fff !important;
}
.c-header__logo {
    pointer-events: visible;
}
.c-header__logo,
.c-header__primary {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-m);
    font-weight: 400;
    letter-spacing: initial;
}
.c-header__primary a {
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: visible;
}
.c-header__primary a:hover {
    opacity: 0.5;
}
.c-header .menu {
    gap: var(--spacer-horizontal-25);
}
@media only screen and (max-width: 900px) {
    .c-header .menu {
        gap: var(--spacer-horizontal-45);
    }
}
.c-header__burger {
    pointer-events: visible;
}
.c-frontpage__grid {
    padding-top: var(--spacer-vertical-100);
    padding-bottom: var(--spacer-vertical-300);
}

/* =========================================
     Home Page Styles
     ========================================= */
.c-frontpage__title {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-family-regular);
    font-size: var(--font-size-m);
    font-weight: 400;
    line-height: 1;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    margin-top: initial !important;
}
.c-frontpage__item {
    --w-sm: calc(var(--w-md) * 0.76);
}

/* =========================================
     Index Page Styles
     ========================================= */
.c-projects__index {
    font-size: var(--font-size-m);
    line-height: 1.2;
    padding-top: var(--nav-height);
    padding-bottom: var(--spacer-vertical-45);
    padding-left: var(--spacer-horizontal-45);
    padding-right: var(--spacer-horizontal-45);
}
.c-projects__item {
    padding-top: var(--spacer-vertical-8);
}

/* =========================================
     Project Page Styles
     ========================================= */
.c-project {
    justify-content: flex-start;
}
.c-project__content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content min-content min-content;
    gap: initial;
    min-height: 100vh;
    width: 100% !important;
    max-width: calc(1920px - var(--spacer-horizontal-45) * 2) !important;
    padding-top: calc(var(--nav-height) - var(--spacer-vertical-25));
    margin: 0 auto;
    padding-bottom: initial;
}
@media only screen and (max-width: 56.25em) {
    .c-project__content {
        padding-top: calc(var(--nav-height) - var(--spacer-vertical-8));
    }
}
@media only screen and (max-width: 900px) {
    .c-project__content {
        display: flex;
        flex-direction: column;
    }
}
.c-project__content__header {
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    width: 100%;
    margin-bottom: calc(var(--spacer-vertical-10) * 2);
}
.c-project__content__header h1 {
    font-family: var(--font-family-medium);
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: 1.05;
    text-align: center;
}
@media only screen and (max-width: 900px) {
    .c-project__content__header h1 {
        text-align: left;
    }
}
.c-project__content figure:nth-of-type(1) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}
@media only screen and (max-width: 900px) {
    .c-project__content figure:nth-of-type(1) {
        grid-row: initial;
    }
}
.c-project__content figure,
.c-project__content .wp-block-embed {
    width: 100% !important;
}
.c-project__content figure,
.c-project__content .wp-block-embed {
    grid-column: 6 / span 7;
    width: 100%;
    margin: initial;
}
.c-project__content figure:nth-of-type(2) {
    grid-row: 3;
}
.c-project__content .video-vertical {
    width: calc(100% - var(--spacer-horizontal-25) / 2) !important;
}
.c-project__content .video-vertical:nth-of-type(1) {
    grid-column: span 6;
    grid-row: 2;
    margin-left: initial !important;
}
.c-project__content .video-vertical.center:nth-of-type(1) {
    grid-column: 4 / span 6;
    width: 100% !important;
}
.c-project__content .video-vertical:nth-of-type(2) {
    grid-column: 7 / span 6;
    grid-row: 2;
    margin-right: initial !important;
}
.c-project__content .video-vertical:nth-of-type(3) {
    grid-column: span 6;
    grid-row: 4;
    margin-left: initial !important;
}
.c-project__content .video-vertical:nth-of-type(4) {
    grid-column: 7 / span 6;
    grid-row: 4;
    margin-right: initial !important;
}
@media only screen and (max-width: 900px) {
    .c-project__content .video-vertical:nth-of-type(1),
    .c-project__content .video-vertical:nth-of-type(2),
    .c-project__content .video-vertical:nth-of-type(3),
    .c-project__content .video-vertical:nth-of-type(4) {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        margin-left: initial !important;
        margin-right: initial !important;
    }
}
@media only screen and (max-width: 900px) {
    .c-project__content figure,
    .c-project__content .wp-block-embed,
    .c-project__content p,
    .c-project__content figcaption {
        grid-column: auto;
        grid-row: auto;
    }
}
.c-project__content figure,
.c-project__content .wp-block-embed,
.c-project__content p,
.c-project__content figcaption {
    margin-bottom: calc(var(--spacer-vertical-25) / 2) !important;
}
.c-project__content p,
.c-project__content figcaption {
    grid-column: span 5;
    grid-row: 3;
    max-width: initial !important;
    font-family: var(--font-family-regular);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.44;
    margin: initial;
    padding-right: var(--spacer-horizontal-25);
}
.c-project__content p.center,
.c-project__content figcaption.center {
    grid-column: 4 / span 5;
}
.c-project__content p:empty {
    display: none;
}
.c-project__content p br,
.c-project__content figcaption br {
    content: "";
    display: block;
    margin-top: calc(var(--spacer-vertical-8) / 2);
}
.c-project__content > :first-child {
    padding-top: initial;
}
.c-project__content > :last-child {
    padding-bottom: initial;
}
.c-project__nav {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: auto;
}
.c-project__nav__inner {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: var(--nav-height);
    width: 100%;
    margin-top: calc(0px - var(--spacer-vertical-25) / 2);
}
.c-project__nav__inner a {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.44;
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-project__nav__inner a:hover {
    opacity: 0.5;
}
.c-project__nav__inner a:first-of-type::after {
    content: "—";
    padding-right: calc(var(--spacer-horizontal-25) / 4);
    padding-left: calc(var(--spacer-horizontal-25) / 4);
}

/* =========================================
     Info Page Styles
     ========================================= */
.c-infos {
    height: auto;
    min-height: 100vh;
    gap: var(--spacer-horizontal-45);
    padding-top: var(--nav-height);
    padding-bottom: var(--spacer-vertical-45);
    padding-left: var(--spacer-horizontal-45);
    padding-right: var(--spacer-horizontal-45);
}
.c-infos__intro {
    font-size: var(--font-size-l);
    font-family: var(--font-family-medium);
    font-weight: 500;
    line-height: 1.2;
}
.c-infos__intro,
.c-infos__wrap {
    max-width: 32ch !important;
}
.c-infos__wrap p {
    max-width: initial !important;
}
@media only screen and (max-width: 640px) {
    .c-infos__intro,
    .c-infos__wrap {
        max-width: 100% !important;
    }
}
.c-infos__client {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.44;
}
.c-infos__btn__inner {
    font-size: var(--font-size-m);
    font-family: var(--font-family-regular);
    font-weight: 400;
}