*,
:after,
:before {
    box-sizing: border-box
}

:root {
    font-size: 20px
}

body {
    margin: 0;
    --color-text: #000;
    --color-bg: #446ea2;
    --color-link: #eae872;
    --color-link-hover: #000;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: roc-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --cursor-stroke: #000;
    --cursor-fill: none;
    --cursor-stroke-width: 1px;
    line-height: 1;
    font-weight: 300;
    overflow:visible;
    overflow-y: scroll
}

.oh {
    overflow: hidden
}

.js .loading:after,
.js .loading:before {
    content: "";
    position: fixed;
    z-index: 3000
}

.js .loading:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg)
}

.js .loading:after {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    opacity: .4;
    background: var(--color-link);
    animation: loaderAnim .7s linear infinite alternate forwards
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(.5, .5, 1)
    }
}

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

a,
a:hover {
    outline: none
}

a:hover {
    color: var(--color-link-hover)
}

a:focus {
    outline: none;
    background: #d3d3d3
}

a:focus-visible,
a:focus:not(:focus-visible) {
    background: transparent
}

a:focus-visible {
    outline: 2px solid green
}

.unbutton {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit
}

.unbutton:focus {
    outline: none
}

main {
    padding: 3rem 2rem
}

.cursor {
    display: none
}

.frame {
    position: relative
}

.frame--footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 40vh
}

.frame__title-wrap {
    width: 80%;
    max-width: 600px
}

.frame__title {
    font-size: 2.3rem;
    margin: 0
}

.frame__tagline {
    margin: 2rem 0 2.5rem;
    line-height: 1.2;
    max-width: 45ch
}

.frame__links a:not(:last-child) {
    margin-right: 1rem
}

.heading {
    font-family: kudryashev-d-excontrast-sans, sans-serif;
    font-weight: 300;
    font-size: 6vw;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 1.1
}

.heading .splitting .char,
.heading .splitting .word {
    display: flex
}

.char-wrap {
    position: relative;
    overflow: hidden
}

.char,
.char-wrap {
    display: inline-block
}

.char {
    will-change: transform
}

.heading>span {
    display: flex
}

.heading>span:first-child {
    font-size: 14vw;
    font-size: clamp(2rem, 14vw, 9rem);
    white-space:pre;
}

.heading>span:nth-child(2) {
    margin-top: -2vw;
    white-space:pre;
   
}







.item {
    margin: 15vh 0 20vh
}

.content__imgwrap,
.item__imgwrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 200px;
    will-change: transform
}

.content__img,
.item__img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background-size: cover;
    background-position: 50% 50%;
    will-change: transform
}

.item__meta {
    margin: .85rem 0 2rem;
    line-height: 1.3;
    font-size: .67rem;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden
}

.item__meta-row {
    display: block;
    position: relative;
    overflow: hidden
}

.item__meta-row span {
    display: block;
    will-change: transform
}

.item__enter {
    display: none;
    will-change: transform
}

.item__enter-circle {
    fill: none;
    stroke: #000;
    stroke-width: 1px;
    will-change: transform, opacity
}

.item__excerpt {
    line-height: 1.2;
    will-change: transform
}

.item__excerpt-link {
    display: inline-block;
    position: relative;
    cursor: pointer;
    color: var(--color-text);
    font-weight: 500;
    line-height: 1;
    overflow: hidden
}

.item__excerpt-link span {
    display: inline-block;
    padding-bottom: 10px;
    position: relative
}

.item__excerpt-link span:after {
    content: "";
    width: 100%;
    height: 2px;
    top: calc(100% - 10px);
    position: absolute;
    left: 0;
    background: var(--color-text);
    transition: transform .2s;
    transform-origin: 100% 0
}

.item__excerpt-link span:hover:after {
    transform: scaleX(0)
}

.content {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 2000;
    pointer-events: none
}

.content .heading {
    margin-bottom: 5rem;
    font-size: 10vw;
    font-size: clamp(2rem, 10vw, 6rem)
}

.content .heading>span:first-child {
    font-size: 14vw;
    font-size: clamp(2rem, 14vw, 10rem)
}

.content__article {
    height: 0;
    overflow: hidden
}

.content__article--open {
    pointer-events: auto;
    padding: 0 0 20vh;
    height: 100%;
    overflow-y: visible;
}

.content__article .heading {
    text-align: center
}

.content__text {
    padding: 0 1rem;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 65ch;
    will-change: transform
}

.content__text p {
    margin: 1.5rem 0
}

.content__text img {
    max-width: 50%;
    margin: 5rem auto;
    display: block;
    border-radius: 50%
}

.content__back {
    position: absolute;
    top: 2rem;
    left: 2rem;
    opacity: 0;
    cursor: pointer
}

.content__article--open~.content__back {
    pointer-events: auto
}

@media screen and (min-width:53em) {
    .item {
        position: relative;
        display: grid;
        grid-template-areas: "image image image enter" "meta meta meta meta" "... ... excerpt ...";
        grid-template-rows: minmax(420px, 40vh) auto auto
    }

    .item,
    .item--invert {
        grid-template-columns: 1fr auto 360px 1fr
    }

    .item--invert {
        grid-template-areas: "enter image image image" "meta meta meta meta" "... ... excerpt ..."
    }

    .item__imgwrap {
        grid-area: image
    }

    .item__img {
        width: 100%;
        height: 100%
    }

    .item__enter {
        align-self: center;
        justify-self: center;
        display: flex;
        grid-area: enter;
        position: relative;
        z-index: 1000;
        max-width: 400px;
        max-height: 400px;
        align-items: center;
        justify-content: center
    }

    .item__enter-circle {
        pointer-events: none;
        cursor: pointer;
        flex: none
    }

    .item__meta {
        grid-area: meta
    }

    .item--invert .item__meta {
        justify-self: end;
        text-align: right
    }

    .item__excerpt {
        grid-area: excerpt
    }

    .item__excerpt p {
        margin: 0 0 1.5rem
    }

    .heading>span {
        justify-content: center
    }

    .heading--item {
        margin: 0;
        grid-area: 1/1/2/5;
        justify-self: center;
        align-self: center;
        text-align: center
    }
}

@media (any-pointer:fine) {
    .cursor {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        pointer-events: none;
        z-index: 5000
    }

    .cursor__inner {
        fill: var(--cursor-fill);
        stroke: var(--cursor-stroke);
        stroke-width: var(--cursor-stroke-width);
        opacity: .7
    }

    .no-js .cursor {
        display: none
    }
}

.splitting .char,
.splitting .word {
    display: inline-block
}

.splitting .char {
    position: relative
}

.splitting .char:after,
.splitting .char:before {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none
}

.splitting {
    --word-center: calc(var(--word-total)/2 - 0.5);
    --char-center: calc(var(--char-total)/2 - 0.5);
    --line-center: calc(var(--line-total)/2 - 0.5)
}

.splitting .word {
    --word-percent: calc(var(--word-index)/var(--word-total));
    --line-percent: calc(var(--line-index)/var(--line-total))
}

.splitting .char {
    --char-percent: calc(var(--char-index)/var(--char-total));
    --char-offset: calc(var(--char-index) - var(--char-center));
    --distance: calc(var(--char-offset)*var(--char-offset)/var(--char-center));
    --distance-sine: calc(var(--char-offset)/var(--char-center));
    --distance-percent: calc(var(--distance)/var(--char-center))
}

.splitting.cells img {
    width: 100%;
    display: block
}

@supports (display:grid) {
    .splitting.cells {
        position: relative;
        overflow: hidden;
        background-size: cover;
        visibility: hidden
    }

    .splitting .cell-grid {
        background: inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr)
    }

    .splitting .cell {
        background: inherit;
        position: relative;
        overflow: hidden
    }

    .splitting .cell-inner {
        background: inherit;
        position: absolute;
        visibility: visible;
        width: calc(100%*var(--col-total));
        height: calc(100%*var(--row-total));
        left: calc(-100%*var(--col-index));
        top: calc(-100%*var(--row-index))
    }

    .splitting .cell {
        --center-x: calc(var(--col-total)/2 - 0.5);
        --center-y: calc(var(--row-total)/2 - 0.5);
        --offset-x: calc(var(--col-index) - var(--center-x));
        --offset-y: calc(var(--row-index) - var(--center-y));
        --distance-x: calc(var(--offset-x)*var(--offset-x)/var(--center-x));
        --distance-y: calc(var(--offset-y)*var(--offset-y)/var(--center-y))
    }
}