/* Base */

:root {
    --gray-100: #eeedf1;
    --gray-150: #b6bdc7;
    --black: #04142c;
    --blue: #393EFF;
    --green: #393EFF;
    --link-color: var(--blue);
    --link-hover-color: var(--green);

    --font-family-display: 'WhyteInktrap', sans-serif;
    --font-family-text: 'Whyte', sans-serif;

    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);

    --default-transition: 333ms;
}

@supports (color: color(display-p3 1 1 1)) {
    :root {
        --gray-100: color(display-p3 0.9333 0.9294 0.9451);
        --gray-150: color(display-p3 0.7137 0.7412 0.7804);
        --black: color(display-p3 0.0157 0.0784 0.1726);
        --blue: color(display-p3 0.3001 0.31111 0.96989);
        --green: color(display-p3 0.3001 0.31111 0.96989);
    }
}

/* Fonts */

@font-face {
    font-family: 'Whyte';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Whyte-Book.woff2') format('woff2');
    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'WhyteInktrap';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/WhyteInktrap-Light.woff2') format('woff2');
    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'WhyteInktrap';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/WhyteInktrap-Black.woff2') format('woff2');
    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'A';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ABCAsfaltCompressedVariableVF-Trial.woff2') format('woff2');
    unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Base */

body {
    overflow-x: hidden;
    margin: 0;
    background-color: var(--gray-100);
    color: var(--black);
    font-family: var(--font-family-text);
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 23px;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-modal {
    overflow: hidden;
}

@media (min-width: 1000px) {
    body {

        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 10px;
    }
}
@media (max-width: 999px) {
    body {
        max-width: 610px;
        margin: auto;
        text-align: center;
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a.active {
    color: var(--link-hover-color);
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        color: var(--link-hover-color);
    }
}

/* Utilities */

.text-display-regular,
.text-display-black {
    font-family: var(--font-family-display);
    font-size: 33px;
    letter-spacing: 0;
    line-height: 32px;
}

.text-display-regular {
    font-weight: 400;
}

.text-display-black {
    font-weight: 900;
}

.text-regular {
    font-family: var(--font-family-text);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 23px;
}

/* Header */

.header-title {
    margin: 0 0 11px;
}

.header-title span {
    text-transform: lowercase;
}

.header-description {
    margin: 0;
    max-width: 90%;
}

.header-nav {
    display: flex;
    text-transform: lowercase;
    margin: 0;
}

.header-nav-link {
    display: flex;
    align-items: center;
    padding: 2px 10px 5px;
    border-radius: 13px;
}

.header-nav-link svg {
    margin-right: 10px;
}

@media (max-width: 999px) {
    .header {
        position: relative;
        z-index: 1000;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 40px;
        padding: 4px 14px;
    }

    .header-group {
        margin-top: 77px;
    }

    .header--inner .header-group {
      display: none;
    }

    .header-nav {
        position: fixed;
        top: 6px;
        left: 4px;
    }

    .header-nav-link {
        background-color: rgba(238, 237, 241, 0.75);
    }
    .header-description {
        margin: 0 auto;
    }
}

@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
    @media (max-width: 999px) {
        .header-nav-link {
            background-color: rgba(238, 237, 241, 0.1);
            -webkit-backdrop-filter: blur(12px);
                    backdrop-filter: blur(12px);
        }
    }
}

@media (min-width: 1000px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content:
        space-between;
        height: 100dvh;
    }

    .header-group {
        margin-top: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-title {
        max-width: 300px;
    }

    .header-description {
        max-width: 274px;
    }

    .header-nav {
        order: +1;
        margin: 8px 0 16px 0;
        padding-left: 6px;
        padding-right: 6px;
    }

    .header-nav:first-child {
        order: -1;
        margin-top: 14px;
    }
}

/* Navigation */

.navigation-menu-primary,
.navigation-menu-secondary {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: lowercase;
}

@media (max-width: 999px) {
    .navigation-button {
        position: fixed;
        top: 4px;
        right: 4px;
        width: 46px;
        height: 43px;
        margin: 0;
        padding: 0;
        background-color: rgba(238, 237, 241, 0.75);
        color: var(--link-color);
        border: none;
        border-radius: 13px;
        text-align: center;
        text-transform: lowercase;
        white-space: nowrap;
        cursor: pointer;
    }

    .navigation-button-balls,
    .navigation-button-balls::before,
    .navigation-button-balls::after {
        display: block;
        width: 6px;
        height: 6px;
        background-color: currentColor;
        border-radius: 50%;
    }

    .navigation-button-balls {
        position: relative;
        margin: auto;
    }

    .navigation-button-balls::before,
    .navigation-button-balls::after {
        position: absolute;
        top: 0;
        width: 6px;
        height: 6px;
        margin: auto;
        background-color: currentColor;
        border-radius: 50%;
        content: '';
    }

    .navigation-button-balls::before {
        left: -10px;
    }

    .navigation-button-balls::after {
        left: 10px;
    }

    .navigation-button.active {
        color: var(--link-hover-color);
    }

    @media (hover: hover) and (pointer: fine) {
        .navigation-button:hover {
            color: var(--link-hover-color);
        }
    }

    .navigation-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding-bottom: var(--safe-area-inset-bottom);
        background-color: rgba(238, 237, 241, 0.8);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.03);
        transition-property: transform, opacity, visibility;
        transition-duration: var(--default-transition);
    }

    @supports (-webkit-backdrop-filter: blur(1px))
        or (backdrop-filter: blur(1px)) {
        .navigation-menu {
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
        }
    }

    .navigation-menu--active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .navigation-menu-container {
        flex: 1;
    }

    .navigation-menu-primary {
        padding: 30px 10px 10px 10px;
        font-family: var(--font-family-display);
        font-size: 33px;
        line-height: 32px;
        font-weight: 900;
        text-align: center;
    }

    .navigation-menu-primary li,
    .navigation-menu-primary a {
        display: block;
        padding: 8px;
    }

    .navigation-menu-primary a {
        margin: -10px;
    }

    .navigation-menu-primary a:not([href]) {
        color: var(--black);
    }

    .navigation-menu-secondary {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 18px;
    }

    .navigation-menu-secondary a {
        display: block;
        padding: 4px 6px;
    }

    .navigation-close {
        width: 100%;
        margin: 0;
        padding: 38px;
        background-color: transparent;
        border: none;
        color: var(--link-color);
        font-family: var(--font-family-display);
        font-size: 33px;
        font-weight: 900;
        line-height: 1;
        text-transform: lowercase;
        cursor: pointer;
    }

    .navigation-close.active {
        color: var(--link-hover-color);
    }

    @media (hover: hover) and (pointer: fine) {
        .navigation-close:hover {
            color: var(--link-hover-color);
        }
    }

}

@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
    @media (max-width: 999px) {
        .navigation-button {
            background-color: rgba(238, 237, 241, 0.1);
            -webkit-backdrop-filter: blur(12px);
                    backdrop-filter: blur(12px);
        }
    }
}

@media (min-width: 1000px) {
    .navigation {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 1;
    }

    .navigation-button,
    .navigation-close {
        display: none;
    }

    .navigation-menu {
        padding-left: 16px;
        padding-right: 16px;
    }

    .navigation-menu-container {
        display: flex;
        flex-direction: column;
    }

    .navigation-menu-primary,
    .navigation-menu-secondary {
        display: flex;
        flex-direction: column;
        
    }

    .navigation-item--cv {
        order: -1;
    }

    .navigation-menu-primary a:not([href]) {
        display: none;
    }

    .header--inner .navigation-menu-primary a:not([href]) {
        display: block;
        color: var(--color-black);
    }

    .header--inner .navigation-menu-primary .navigation-item:first-child {
        display: none;
    }
}

/* Main */

.is-modal .main {
    pointer-events: none;
}

.main-header-title {
    margin: 0;
}

.main-header-description p {
    margin: 0;

}

.main-header-description p:only-child {
    max-width: 600px;
}

.main-header-links {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: lowercase;
}

@media (max-width: 999px) {
    .main {
        padding-bottom: 16px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .main-header {
        margin-bottom: 50px;
        padding-right: 0px;
    }

    .main-header-title {
        margin-bottom: 12px;
    }

    .main-header-description {
        margin-bottom: 17px;
    }

    .main-header-description p:not(:first-child) {
        margin-top: 8px;
    }

    .main-header-links li:not(:first-child) {
        margin-top: 10px;
    }
    .main-header-description p:only-child {
        margin: 0 auto;
    }
}

@media (min-width: 1000px) {
    .main {
        padding-top: 16px;
        padding-bottom: 30px;
        padding-right: 16px;
        padding-left: 4%;
    }

    .main-header {
        margin-bottom: 50px;
    }

    .main-header-title {
        max-width: 610px;
        margin-bottom: 12px;
    }

    .main-header-description {
        display: grid;
        grid-template-columns: 5fr 3fr;
        gap: 20px;
        margin-bottom: 18px;
        margin-right: 15px;
    }

    .main-header-links {
        display: flex;
    }

    .main-header-links li {
        margin-right: 16px;
    }
}

.main-content-prepend {
    margin: 0 0 16px;
}

/* Article */

.article {
    margin-bottom: 50px;
}

.article-media {
    position: relative;
    margin-bottom: 16px;
    background-color: none;
    border-radius: 0px;
}

.article-media iframe {

}

.article-media-link {
    position: relative;
    display: block;
}

@media (max-width: 999px) {
    .article {
        margin-left: -10px;
        margin-right: -10px;
    }

    .article-media img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0px;
        object-fit: cover;
    }

    .article-media video {
        border-radius: 8px;
    }

    .article--video .article-media {
        padding-top: 56.25%;
    }

    .article-content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (min-width: 1000px) {

    .article-media img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 0px;
    }

    .article-media video {
        border-radius: 22px;
    }

}

.article-media img {
    transition-property: transform;
    transition-duration: var(--default-transition);
}

.article-media-link::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: +1;
    opacity: 0;
    background: none;
    border-radius: 0px;
    box-shadow: none;
    transition-property: opacity, transform;
    transition-duration: var(--default-transition);
    content: '';
}

.article-media-link.active::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .article-media-link:hover::before {
        opacity: 1;
    }

    .article-media-link:hover::before,
    .article-media-link:hover img {
        transform: scale(1.02);
    }

    .article-media-link:active::before,
    .article-media-link:active img {
        transform: scale(1);
        transition-duration: 150ms;
    }
}

.article-media-link.active img {
    transform: scale(0.96605375);
}

@media (min-width: 1000px) {
    .article--video .article-media {
        height: 0;
        padding-top: 56.25%;
        border-top: 15px solid #000;
        border-bottom: 15px solid #000;
    }
}

@media (min-width: 1000px) {
    .article--fullwidth .article-media {
        margin-left: calc((40% + 16px) * -1);
        margin-right: -16px;
    }
}

.article-content {
    position: relative;
}

.article-content time {
    display: block;
    color: var(--black);
    text-transform: lowercase;
}

.article-content p {
    max-width: 650px;
    margin: 0;
}

@media (max-width: 1149px) {
    .article-content time {
        margin-top: 12px;
    }

    .article-content p:not(:first-child) {
        margin-top: 12px;
    }
}

@media (min-width: 1150px) {
    .article-content time {
        position: absolute;
        top: 0;
        right: 0;
    }

    .article-content p:not(:first-child) {
        margin-top: 8px;
    }
}
@media (max-width: 999px) {
  .article-content p{
        margin: 0 auto;
  }

}

.main-content-append {
    max-width: 480px;
    padding-right: 6px;
    margin: 0;
}
@media (max-width: 999px) {
.main-content-append{
    padding-right: 0px;
    padding-bottom: 20px;
    margin: 0 auto;
    }
}

/* Bookshelf */

.bookshelf {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    padding: 0;
    list-style: none;
}

.bookshelf-item {
    box-sizing: border-box;
    margin-bottom: 40px;
    flex-shrink: 0;
    padding-left: 10px;
    padding-right: 10px;
}

.bookshelf-item img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border-radius: 0px;
}

@media (max-width: 599px) {
    .bookshelf-item {
        flex-basis: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }
    .bookshelf{
      margin: 0 -5px;
    }
}

@media (min-width: 600px) and (max-width: 999px) {
    .bookshelf-item {
        flex-basis: 25%;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (min-width: 1000px) {
    .bookshelf-item {
        flex-basis: 20%;
    }
    .bookshelf{
      margin: 0 -5px;
    }
}

.bookshelf-text {
    padding-right: 18px;
}