@font-face {
    font-family: 'Monument';
    src: url('../fonts/ABCMonumentGroteskPlusVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Diatype';
    src: url('../fonts/ABCDiatypeVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@media (hover: none), (pointer: coarse) {
    html,
    body,
    body * {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }

    body :focus,
    body :focus-visible,
    body :focus-within {
        outline: none;
        box-shadow: none;
    }

    .nav__item:hover,
    .nav__item.is-active,
    .nav__list li:first-child .nav__item:hover,
    .imprint-link:hover,
    .imprint-link.is-active,
    .landing__newstitle a:hover,
    body.is-news .landing__newstitle a,
    .lnews:hover .lnews__text,
    .movie__trailerlink:hover,
    .movie__play:hover,
    .movie__download:hover {
        filter: none;
    }

    .lnews:hover .lnews__text {
        mix-blend-mode: normal;
        font-style: normal;
    }

    .movie__play:hover {
        opacity: .85;
    }

    .movie__mediaasset:hover::after,
    .movie__mediaasset:focus-within::after,
    .movie__mediaasset:hover .movie__download,
    .movie__download:focus-visible {
        opacity: 0;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:root {
    --ink:        #fff;
    --paper:      #d9d9da;
    --dark:       #000;

    --fs-title:   5vw;
    --fs-body:    1vw;

    --pad-x:        2vw;
    --col:        46vw;
}

html, body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--fs-body);
    font-weight: 900;
    line-height: 1.35;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Hide scrollbars while keeping scrolling available. */
* {
    scrollbar-width: none;
}
*::-webkit-scrollbar {
    display: none;
}

h2, h3, h4, h5, h6, p, em, a {
    font-size: var(--fs-body);
    font-weight: bolder;
}

a { color: inherit; text-decoration: none; }

/* ---- page variants ---- */

body.is-news,
body.is-about,
body.is-text,
body.is-landing,
body.is-movie {
    background: var(--dark);
}

.page {
    position: relative;
    z-index: 5;
    opacity: 1;
    transition: opacity 0.08s linear;
}
.page.is-fading {
    opacity: .05;
}
body.is-pjax-loading .page,
body.is-pjax-loading .films,
body.is-pjax-loading .landing__newsgroup {
    opacity: .05;
    transition: opacity 0.08s linear;
}
body.is-movie .page {
    background: var(--dark);
    min-height: 100vh;
}
body.is-landing .page {
    z-index: auto;
}

.mobile-bottom-fade {
    display: none;
}

/* ---- nav ---- */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 0.55vw 1vw;
}
.nav__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(max-content, 1fr)) 22vw repeat(2, minmax(max-content, 1fr));
        align-items: center;
    column-gap: 0;
}

.nav__list li:nth-child(-n+2) { text-align: left; }
.nav__list li:nth-child(n+4) { text-align: right; }
.nav__item {
    cursor: pointer;
    filter: blur(0);
    transition: filter .25s ease;
}
.nav__item:hover,
.nav__item.is-active { 
    /* font-style: italic;  */
    filter: blur(0.075vw);
}
.nav__list li:first-child .nav__item { font-style: normal; }
.nav__list li:first-child .nav__item:hover { 
    /* font-style: italic;  */
    filter: blur(0.075vw);
}
.imprint-link {
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    z-index: 50;
    filter: blur(0);
    transition: filter .25s ease;
}
.imprint-link:hover,
.imprint-link.is-active,
.landing__newstitle a:hover,
body.is-news .landing__newstitle a { 
    filter: blur(0.075vw);
    mix-blend-mode: plus-lighter;
    font-style: normal; }

/* ---- footer ---- */

.foot {
    position: fixed;
    bottom: var(--fs-body); right: var(--pad-x);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2vw;
}

/* ---- overlay (news / about over landing video) ---- */

.mk-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    display: none;
    /* background: rgba(217,217,218,.15); */
    /* -webkit-backdrop-filter: blur(24px) saturate(1.4); */
    /* backdrop-filter: blur(24px) saturate(1.4); */
    background: transparent;
}
.mk-overlay.is-open { display: block; }

/* ---- landing ---- */

.landing { position: fixed; inset: 0; overflow: hidden; z-index: auto; }

.bg-stack { position: fixed; inset: 0; z-index: 0; background: var(--dark); }
.bg-stack video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: blur(2vw);
    transition: opacity .6s ease, filter .4s ease;
}
.bg-stack.sharp video { filter: blur(0); }
body:not(.is-landing) .bg-stack.sharp video { filter: blur(2vw); }
.bg-stack video.is-active { opacity: 1; }
.bg-stack::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0,0,0,.25) 0%, transparent 22%,
        transparent 78%, rgba(0,0,0,.25) 100%);
}

.films { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; transition: opacity .08s linear; display: none; }
body.is-landing .films { display: block; }
.films.is-hidden { opacity: 0; pointer-events: none; }
.landing__news { transition: opacity .08s linear; }
.landing__news.is-hidden { opacity: 0; }
body.sharp .films {
    mix-blend-mode: plus-lighter;
}

.film {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: var(--ink);
    user-select: none;
    transform: translateY(-75%);
    transition: top .5s cubic-bezier(.5,0,.1,1), opacity .4s ease;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    width: max-content;
}
.film.is-next{
    cursor: s-resize !important;
}
.film.is-prev{
    cursor: n-resize;
    z-index: 999999 !important;
    position:  relative !important;
}
.film.is-prev,
.film.is-current,
.film.is-next { opacity: 1; }
.film.is-prev,
.film.is-current,
.film.is-next { pointer-events: auto; }
.film.is-prev,
.film.is-next { cursor: pointer; }

.film .title,
.film .year {
    font-size: var(--fs-title);
    font-weight: 800;
    line-height: 1;
    filter: blur(0px);
    transition: filter .4s ease, opacity .4s ease;
    opacity: 1;
    color: var(--ink);
}
body.sharp .film .title,
body.sharp .film .year {
    opacity: .7;
    filter: blur(2px);
}
body.sharp .nav {
    mix-blend-mode: plus-lighter;
}
body.sharp .nav a,
body.sharp .landing__newstitle,
body.sharp .landing__news,
body.sharp .imprint-link {
    filter: blur(2px);
    transition: filter .4s ease, opacity .4s ease;
}

.landing__newsgroup {
    position: fixed;
    left: 1vw;
    bottom: 1vw;
    z-index: 20;
    width: 25vw;
    max-height: 58vh;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    justify-content: flex-end;
}
.landing__news {
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 1vw;
}
body.is-landing .landing__news {
    display: flex;
}
.landing__news.is-closed { display: none; }
.landing__newstitle {
    font: inherit;
    margin: 0;
    text-transform: uppercase;
    /* font-style: italic;  */
}
.landing__newstitle a,
.lnews__text,
.movie__trailerlink {
    filter: blur(0);
    transition: filter .25s ease;
}
em { font-style: normal; }
.news a:hover { text-decoration: none; }
.lnews {
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transform: translateZ(0);
    /* text-transform: uppercase; */
    hyphens: auto;
}
.lnews:hover {
    /* font-style: italic; */
    filter: blur(0.075vw);
    mix-blend-mode: plus-lighter;
}
.lnews__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: currentColor;
}
.lnews__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lnews__date { display: block; 
    /* font-style: italic;  */
}
.lnews__text a { 
    text-decoration: underline;     
    text-decoration-thickness: 0.11vw;
}

/* ---- movie detail ---- */

.movie {
    max-width: var(--col);
    margin: 0 auto;
    padding:  0 0 0 1vw;
    text-align: center;
}
.movie__hero {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 8.5vw);
    margin: 0 0 3vw;
    overflow: hidden;
    background: var(--dark);
}
.movie__label{
    text-transform: uppercase;
    margin: 1vw;
}
.movie__poster,
.movie__trailer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.movie__trailer[hidden] { display: none; }
.movie__play {
    position: absolute;
    top: calc(50% + 2.5vw);
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    opacity: .85;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    filter: blur(0);
    transition: opacity .2s ease, filter .25s ease;
}
.movie__play::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 3.5vw solid transparent;
    border-bottom: 3.5vw solid transparent;
    border-left: 6vw solid currentColor;
}
.movie__play:hover {
    opacity: 0.65;
    filter: blur(0.075vw);
}
.movie__trailerlink {
    text-transform: uppercase;
    line-height: 1;
    color: inherit;
}
.movie__trailerlink:hover {
    /* font-style: italic; */
    filter: blur(0.075vw);
}
.movie__hero.is-playing .movie__poster,
.movie__hero.is-playing .movie__play {
    display: none;
}
.movie__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0vw;
    z-index: 1;
    height: 2vw;
    /* display: none; */
    pointer-events: none;
    background: linear-gradient(
  hsla(0, 0%, 0%, 0) 0%,
  hsla(0, 0%, 0%, 0.002) 1.8%,
  hsla(0, 0%, 0%, 0.008) 4.8%,
  hsla(0, 0%, 0%, 0.021) 9%,
  hsla(0, 0%, 0%, 0.042) 13.9%,
  hsla(0, 0%, 0%, 0.075) 19.8%,
  hsla(0, 0%, 0%, 0.126) 27%,
  hsla(0, 0%, 0%, 0.194) 35%,
  hsla(0, 0%, 0%, 0.278) 43.5%,
  hsla(0, 0%, 0%, 0.382) 53%,
  hsla(0, 0%, 0%, 0.541) 66%,
  hsla(0, 0%, 0%, 0.738) 81%,
  hsl(0, 0%, 0%) 100%
);
}

.movie__head { margin-bottom: 3vw; }
.movie__title { font-size: var(--fs-title); line-height: 1; }
.movie__watch {
    display: block;
    text-decoration: none;
}
.movie__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vw;
    margin: 0 auto 3vw;
}
.movie__year {
    line-height: 1;
}

.movie__infos {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    /* gap: .2vw 3vw; */
    width: 22.5vw;
    margin: 0 auto 3vw;
    text-align: left;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: space-around;
}
.movie__infos li:nth-child(odd) { text-align: right; }

.movie__block { margin: 3vw auto 0; }
.movie__description,
.movie__production { max-width: 100%; margin-inline: auto; }

.movie__list { list-style: none; }
.movie__list li { line-height: 1.5; }

.movie__pairs { display: grid; gap: .1vw; }
.movie__pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5vw; }
.movie__pair dt { text-align: right; }
.movie__pair dd { text-align: left; }

.movie__quote { margin: 0 auto 1.5vw; max-width: 28vw; }
/* .movie__quote p { font-style: italic; } */
.movie__quote cite { font-style: normal; }

.movie__award em { 
    display: block; 
    /* font-style: italic;  */
}

.movie__media { display: flex; flex-direction: column; align-items: center; gap: 3vw; margin-top: 1vw; }
.movie__mediaitem { 
    /* width: 24vw;  */
    width: 100%;
}
.movie__mediaasset {
    position: relative;
    overflow: hidden;
}
.movie__mediaitem img,
.movie__mediaitem video { width: 100%; height: auto; display: block; }
.movie__mediaasset--trailer {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--dark);
}
.movie__trailerembed,
.movie__mediaitem .movie__trailerposter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.movie__trailerembed {
    z-index: 0;
    border: 0;
}
.movie__mediaitem video.movie__trailerembed {
    height: 100%;
    object-fit: contain;
}
.movie__mediaitem .movie__trailerposter {
    z-index: 1;
    object-fit: cover;
}
.movie__mediaasset--trailer .movie__play {
    top: 50%;
    z-index: 2;
}
.movie__mediaasset--trailer.is-playing .movie__trailerposter,
.movie__mediaasset--trailer.is-playing .movie__play {
    display: none;
}
/* .movie__mediaasset::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 7.5vw;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    background: linear-gradient(
  hsla(0, 0%, 0%, 0) 0%,
  hsla(0, 0%, 0%, 0.002) 1.8%,
  hsla(0, 0%, 0%, 0.008) 4.8%,
  hsla(0, 0%, 0%, 0.021) 9%,
  hsla(0, 0%, 0%, 0.042) 13.9%,
  hsla(0, 0%, 0%, 0.075) 19.8%,
  hsla(0, 0%, 0%, 0.126) 27%,
  hsla(0, 0%, 0%, 0.194) 35%,
  hsla(0, 0%, 0%, 0.278) 43.5%,
  hsla(0, 0%, 0%, 0.382) 53%,
  hsla(0, 0%, 0%, 0.541) 66%,
  hsla(0, 0%, 0%, 0.738) 81%,
  hsl(0, 0%, 0%) 100%
);
} */
.movie__mediaasset:hover::after,
.movie__mediaasset:focus-within::after {
    opacity: 1;
}
.movie__download {
    position: absolute;
    right: .6vw;
    bottom: .6vw;
    z-index: 2;
    opacity: 0;
    filter: blur(0) drop-shadow(0vw 0vw 1vw rgba(0,0,0,0));
    transition: opacity .2s ease, filter .25s ease;

}
.movie__mediaasset:hover .movie__download {
    opacity: 1;
}
.movie__download:focus-visible {
    opacity: 1;
    filter: blur(0) drop-shadow(0vw 0vw 1vw black);
}
.movie__download:hover {
    filter: blur(0.05vw) drop-shadow(0vw 0vw 1vw black);
}
.movie__mediaitem figcaption { margin-top: .35em; text-align: left; }

/* ---- news ---- */

.newsview {
    position: relative;
}
.news__close {
    display: none;
    position: fixed;
    top: 4.8vw;
    right: var(--pad-x);
    z-index: 45;
    width: 1em;
    height: 1em;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--fs-body);
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
}
.news__close::before,
.news__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 0.12em;
    background: currentColor;
    transform-origin: center;
}
.news__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.news__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mk-overlay .news__close {
    display: block;
}
.mk-overlay .newsview:hover .news__close {
    opacity: 1;
}
.news {
max-width: var(--col);
    margin: 0.5vw auto;
    padding: 0;
    line-height: 1.4;
}
.news h2{
    font-size: var(--fs-title);
    line-height: 1;
    margin: 6vw;
    text-align: center;
}
.news__title {
    max-width: var(--col);
    margin: 0 auto;
    padding: 6vw 0 0;
    text-align: center;
    font-size: var(--fs-title);
    line-height: 1;
}
.news__item {
    scroll-margin-top: 6vw;
}
.news__item { margin-bottom: 6vw; }
.news__date { display: block; margin-bottom: 0.5vw; }
.news__text a { text-decoration: underline; }
.news__image { margin-top: 1em; }
.news__image img { width: 100%; height: auto; display: block; }

/* ---- about ---- */

.about {
    max-width: var(--col);
    margin: 0 auto;
    padding: 0;
    transform: translateY(calc(50vh - 15vw));
}
.about{

}
.about__portrait { width: 17.5vw; margin: 0 auto 1vw; }
.about__portrait img { width: 100%; height: auto; display: block; }
.about__text{
    filter: drop-shadow(0vw 0vw 1.75vw black);
}
.about__text p { margin-bottom: 1.2vw; }

/* ---- text pages (imprint / privacy) ---- */

.textpage {
    max-width: var(--col);
    margin: 0 auto;
    padding: 6vw 0 10vw;
}
.textpage__title { font-size: var(--fs-title); margin-bottom: 2vw; }
.textpage__body p { margin-bottom: 1.2vw; }
#movie-media .movie__mediaitem:last-child{
    margin-bottom: 1vw;
}
@media (max-width: 1024px) and (orientation: portrait) {
    :root {
        --fs-title: 11vw;
        --fs-body: 3.5vw;
        --pad-x: 2vw;
        --col: 96vw;
    }

    .mobile-bottom-fade {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 28vw;
        z-index: 15;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
    }

    .about,
    .movie,
    .news,
    .news__title,
    .movie__media {
        max-width: 96vw;
        width: 96vw;
    }
    .news{
        transform: unset;
        margin-top: 6vw;
    }
    .news__image {
        margin-top: 0.35em;
    }
    .nav__spacer{
        /* width: 20vw; */
        display: none;
    }
    .nav{
        padding: 1vw 2vw;
    }
    .nav::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 20vw;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
    }
    .nav__list {
        grid-template-columns: repeat(2, minmax(max-content, 1fr)) repeat(2, minmax(max-content, 1fr));
    }
    .nav__list li:nth-child(2), .nav__list li:nth-child(4) {
        text-align: center !important; 
    }
    .landing__newsgroup {
        width: 60vw;
        left: 2vw;
        bottom: 2vw;
        flex-direction: column-reverse;
    }
    .landing__news{
        flex-direction: column;
        gap: 3vw;
        margin-bottom: 3vw;
    }
    .imprint-link {
        right: 2vw;
        bottom: 2vw;
    }
    .lnews {
        gap: 0;
        padding: 0;
        border-radius: 0;
    }
    .movie{
            padding: 0 0 0.25vw;
    }
    .movie__hero {
        height: calc(100vh - 53.5vw);
        margin: 0 0 9vw;
    }
    .movie__infos{
        width: 60vw;
    }
    .movie__block {
        margin: 6vw auto 0;
    }
    .movie__media {
        gap: 6vw;
        margin-top: 3vw;
        margin-bottom: 2vw;
    }
    .movie__play{
        font-size: 0;
    }
    .movie__play::before {
        border-top-width: 10.5vw;
        border-bottom-width: 10.5vw;
        border-left-width: 18vw;
    }
    .movie__head {
        margin-bottom: 9vw;
    }
    .movie__meta {
        gap: 3vw;
        margin-bottom: 9vw;
    }
    .about{
        min-height: 100vh;
        transform: unset;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 9999;
    }

    .mk-overlay .news__close,
    .mk-overlay .newsview:hover .news__close {
        opacity: 1;
    }

    .lnews:hover .lnews__text {
        font-style: normal;
    }

    .movie__play:hover {
        opacity: .85;
    }
    .movie__quote {
        max-width: 96vw;
        margin: 0 auto 2vw;
    }
    .page{
        padding-bottom: 6vw;
    }
    .lnews__text {
        -webkit-line-clamp: 2;
    }
    .nav__list{
            display: flex;
    flex-direction: row;
        justify-content: space-between;
    }
    .is-about .page, .is-text .page{
        padding-bottom: unset;
    }
}

/* Touch devices must not retain simulated hover/focus states after a tap. */
@media (hover: none), (pointer: coarse) {
    .nav__item:hover,
    .nav__item.is-active,
    .nav__list li:first-child .nav__item:hover,
    .imprint-link:hover,
    .imprint-link.is-active,
    .landing__newstitle a:hover,
    body.is-news .landing__newstitle a,
    .lnews:hover .lnews__text,
    .movie__trailerlink:hover,
    .movie__play:hover,
    .movie__download:hover {
        filter: none;
    }

    .lnews:hover .lnews__text {
        mix-blend-mode: normal;
        font-style: normal;
    }

    .movie__play:hover {
        opacity: .85;
    }

    .movie__mediaasset:hover::after,
    .movie__mediaasset:focus-within::after,
    .movie__mediaasset:hover .movie__download,
    .movie__download:focus-visible {
        opacity: 0;
    }
    .film .title{
            width: 99vw;
    }
    .movie__head {
        margin-bottom: 6vw;
    }
}