@font-face {
    font-family: "Simpler";
    font-weight: 400;
    src: url(../fonts/SimplerPro_HLAR-Regular.woff) format( "woff" );
}

@font-face {
    font-family: "Simpler";
    font-weight: 700;
    src: url(../fonts/SimplerPro_HLAR-Bold.woff) format( "woff" );
}

@font-face {
    font-family: "Bradford";
    font-weight: 400;
    src: url(../fonts/BradfordLLSub-Light.woff2) format( "woff2" ),
        url(../fonts/BradfordLLSub-Light.woff) format( "woff" );
}

@font-face {
    font-family: "CompostSymbols";
    font-weight: 400;
    src: url(../fonts/CompostSymbols-Regular.woff2) format( "woff2" ),
        url(../fonts/CompostSymbols-Regular.woff) format( "woff" );
}

:root {
    --background-color: #000;
    --main-text-color: #00ffaa;
    --text-color: var(--main-text-color);
    --gap: 30px;
    --sans: "Simpler", Arial, sans-serif;
    --fancy: "Bradford", "Times New Roman", serif;
    --serif: "Greta Text Hebrew Light Italic", serif;
}

body {
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    text-rendering: geometricPrecision;
    font-family: var(--sans);
    overflow-x: hidden;
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    margin: 0;
}

ul.website-list {
    list-style: none;
    padding: 0;
}

ul.website-list > li {
    display: block;
}

.skip-to-content-link {
    background: var(--main-text-color);
    color: black;
    height: 30px;
    left: 50%;
    padding: 8px 8px 3px 8px;
    position: absolute;
    z-index: 1000;
    transform: translateY(-200%);
    transition: transform 0.3s;
}

.skip-to-content-link:focus {
    transform: translateY(0%);
}  

.films-list details,
.theme-link-item {
    border-bottom: 2px solid var(--text-color);
    color: var(--text-color);
}

.theme-links-list-list > li {
    border-top: 2px solid var(--text-color);   
}

.theme-links-list-list > li + li {
    border-top: none;
}

.films-list details[open] {
}

.films-list summary {
    display: block;
    width: 100%;
    outline: none;
}

.films-list summary:focus-visible {
    outline: white auto 1px;
}

.theme-link-item,
.films-list .film-summary-label,
.theme-description h3,
.theme-description h4 {
    font-size: 22.5px;
    line-height: 28px;
}

.films-list .film-summary-credit {
    font-family: var(--serif);
}

.films-list summary > .__inner,
.theme-link-item a {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: var(--gap) 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
}

.theme-link-item a {
    padding: calc( var(--gap) * .5 ) 0 calc( var(--gap) * .5 ) 0;
    color: var(--main-text-color);
    font-weight: bold;
}

@media ( hover: hover ) {
    .theme-link-item a:hover {
        color: var(--text-color);
        text-decoration: underline;
    }    
}

.theme-link-dates {
    font-family: var(--fancy);
    font-weight: normal;
}

.theme-link-dates.puzzle-text {
    font-family: var(--serif);
}

.theme-link-dates .theme-link-start-date:after {
    content: " – ";
}

.films-list summary::-webkit-details-marker {
    display: none;
}

.film-summary-specs {
    position: relative;
    text-align: end;
    white-space: nowrap;
    font-family: var(--serif);
    margin-right: 20px;
    min-width: 84px;
    min-height: 57px;
}

.film-summary-specs-arrow {
    position: absolute;
    top: 0; left: 0; width: 115%; height: 110%;
    /* background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left center; */
}

.film-summary-specs-arrow svg {
    width: 100%; height: 100%;
}

html[dir="ltr"] .film-summary-specs-arrow svg {
    transform: scaleX(-1);
}

.films-list details[open] .film-summary-specs-arrow svg {
    transform: rotate(180deg);
}

html[dir="ltr"] details[open] .film-summary-specs-arrow svg {
    transform: scaleX(-1) rotate(180deg);
}

.film-details {
    /* padding: var(--gap); */
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.22px;
}

.film-details p {
    margin: 1em 0;
}

.film-credits {
    font-size: 17px;
    line-height: 23px;
    letter-spacing: 0.45px;
    font-family: var(--serif);
    white-space: pre-line;
}

.film-credits:before {
    content: "—";
    display: block;
}

.film-visual {
    margin: 0 0 var(--gap);
}

.film-visual img {
    display: block;
    width: 100%;
}

.themes-link-list-title {
    margin-bottom: 1em;
}

.theme-info > .__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background-color: var(--text-color); */
    color: var(--background-color);
    mix-blend-mode: lighten;
    overflow: hidden;
}

.theme-info > .__inner > * {
    margin-inline-start: var(--gap);
}

.theme-info > .__inner:before {
    content: "";
    position: absolute;
    top: calc( -57.5vw + 45% );
    left: calc( -57.5vw + 50% );
    width: 115vw;
    height: 115vw;
    z-index: 0;
    clip-path: inset( 1px 1px 1px 1px );
    background-color: var(--text-color);
    background-image: url(../img/blur_v2.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    /* mix-blend-mode: screen; */
    background-blend-mode: multiply;
    /* animation: rotate 2s linear infinite; */
}

.theme-info > .__inner:after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-position: center max( calc( var(--gap) * 2 ), 40% );
    background-size: auto min( 20em, 80vh );
}

body.stop-animations .theme-info > .__inner:before {
    background-image: url(../img/blur_v2_paused.png) !important;
}

.theme-info > .__inner > .stop-animations-button {
    border: none;
    background: none;
    cursor: pointer;
    position: absolute;
    top: var(--gap); left: var(--gap);
}

.stop-animations-button:after {
    content: "\23f8";
    font-family: "CompostSymbols";
    font-size: calc( var(--gap) * 0.76 );
    color: var(--text-color);
}

body.stop-animations .stop-animations-button:after {
    content: "\23f5";
}

@media ( prefers-reduced-motion ) {
    .theme-info > .__inner:before {
        background-image: url(../img/blur_v2_paused.png) !important;
    }    
    .theme-info > .__inner > .stop-animations-button {
        display: none;
    }
}

.theme-item#top .theme-info > .__inner:after {
    background-size: 80%
}

.theme-item#top .theme-info > .__inner:after {
    background-image: url( ../img/title.svg );
}

.theme-item#puzzle .theme-info > .__inner:after {
    background-image: url( ../img/puzzle.svg );
}

.theme-item#hollowland .theme-info > .__inner:after {
    background-image: url( ../img/hollowland.svg );
}

.theme-item#joints .theme-info > .__inner:after {
    background-image: url( ../img/joints.svg?v=2 );
}

.theme-item#awayofbeing .theme-info > .__inner:after {
    background-image: url( ../img/awayofbeing.svg );
}

.theme-item#fledge .theme-info > .__inner:after {
    background-image: url( ../img/fledge.svg );
}

.theme-item#inotherwords .theme-info > .__inner:after {
    background-image: url( ../img/inotherwords.svg );
}

.theme-item#journeybirds .theme-info > .__inner:after {
    background-image: url( ../img/birds.svg );
}

@keyframes rotate {
    0%   { transform: translateX(-5px) translateY(7px); }
    33%  { transform: translateX(6px) translateY(-5px); }
    66% { transform: translateX(-6px) translateY(8px); }
    100%  { transform: translateX(-5px) translateY(7px); }
}

.theme-info > .__inner > * {
    position: relative;
    z-index: 100;
}

.theme-item#puzzle .theme-info > .__inner:before {
    transform: rotate( 45deg );
}

.theme-item#hollowland .theme-info > .__inner:before {
    transform: rotate( 90deg );
}

.theme-item#joints .theme-info > .__inner:before {
    transform: rotate( 65deg );
}

.theme-item#awayofbeing .theme-info > .__inner:before {
    transform: rotate( 245deg );
}

.theme-item#fledge .theme-info > .__inner:before {
    transform: rotate( 55deg );
}

.theme-item#inotherwords .theme-info > .__inner:before {
    transform: rotate( 125deg );
}

.theme-item#birds .theme-info > .__inner:before {
    transform: rotate( 45deg );
}


.theme-info .theme-title-block {
    min-height: 20em;
}

.theme-info .theme-title-block > * {
    clip: rect( 1px 1px 1px 1px );
    clip-path: inset( 50% );
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
/* .theme-title {
    font-size: 100px;
} */
.theme-info .theme-dates {
    display: flex;
    justify-content: space-between;
    margin: 12px 5px;
    font-size: var(--gap);
    /* background-image: linear-gradient( 180deg, transparent -1px, transparent 17px, var(--text-color) 18px, var(--text-color) 19px, transparent 20px ); */
    /* background-repeat: no-repeat; */
    font-family: var(--fancy);
}
.theme-item#top .theme-info .theme-dates {
    display: none;
}
.theme-info .theme-dates span {
    color: var(--text-color);
}
.theme-info .theme-dates .theme-start-date {
    margin-inline-end: 10px;
}
.theme-info .theme-dates .theme-end-date {
    margin-inline-start: 10px;
}
.theme-info .theme-dates .theme-link-span-line {
    flex: 1;
    background-image: linear-gradient( 180deg, transparent -1px, transparent 17px, var(--text-color) 18px, var(--text-color) 19px, transparent 20px );
    background-repeat: no-repeat;
    min-height: var(--gap);
}
.theme-info .theme-description {
    padding: var(--gap);
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: 0.22px;
}

.site-header .mobile-content {
    display: none;
}

.site-header a {
    text-decoration: none;
    font-weight: bold;
}

@media screen and (hover: hover) {
    .site-header a:hover {
        color: white;
        text-decoration: underline;
    }
}

.theme-title-en {
    font-family: var(--fancy);
}

.films-list .theme-description {
    margin-bottom: var(--gap);
}

.films-list .sponsorship {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin: calc( var(--gap) * 3 ) 0 var(--gap);
}

.films-list .sponsorship .sponsor-logos {
    position: relative;
    flex-basis: max( 15%, 120px );
    margin-inline-start: var(--gap);
    background-color: black;
}
.films-list .sponsorship .sponsor-logos:after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--main-text-color);
    mix-blend-mode: multiply;
}
.films-list .sponsorship .sponsor-logos img {
    width: 100%;
}
.films-list .sponsorship .non-sponsor-text {
    flex: 1;
}
.films-list .sponsorship .non-sponsor-text p {
    margin: 0;
    font-family: var(--serif);
    text-align: end;
}

.site-credits {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.site-credits p {
    text-align: center;
    font-size: 0.8rem;
    margin: 3rem 0 1.5rem;
    color: white;
    margin-inline-start: 1rem;
}

.theme-item .films-list .theme-description p {
    margin: 0;
}
.theme-item .films-list .theme-description p:not(.start) {
    text-indent: 2rem;
}

.theme-item .theme-info .theme-description p {
    text-shadow: 0 0 8px black, 0 0 8px black;
}

@media screen and (max-width: 799px) {
    .site {
        display: flex;
        flex-direction: column;
    }
    .site-header {
        position: fixed;
        z-index: 300;
        top: -9rem; left: 0; right: 0;
        /* display: none; */
        /* background-color: var(--text-color);
        color: var(--background-color);
        padding: 0 var(--gap);
        max-height: 0;
        overflow: hidden;
        transition: max-height 800ms; */
        transition: top 500ms;
    }
    body.has-mobile-header .site-header {
        top: 0;
    }
    .site-header > :last-child {
        /* margin-bottom: 18px; */
    }
    .site-header .header-content {
        display: none;
    }
    .site-header .mobile-content {
        display: flex;
        background-color: var(--background-color);
        color: var(--text-color);
        margin: 0 var(--gap);
        padding: var(--gap) 0;
        border-bottom: 5px solid var(--text-color);
        justify-content: space-between;
        font-size: 22.5px;
        line-height: 32px;
        letter-spacing: 0.17px;
        background-image: linear-gradient( 180deg, transparent -1px, transparent 45px, var(--text-color) 46px, var(--text-color) 47px, transparent 39px );
        background-repeat: no-repeat;
    }
    .site-header .mobile-content a {
        background-color: var(--background-color);
        padding-inline-end: .5em;
    }
    .site-header .mobile-content a svg {
        height: 23px;
    }
    .site-header .mobile-content a svg .cls-1 {
    }
    .site-header .mobile-content .current-theme-title {
        flex: 1;
        font-weight: bold;
    }
    .site-header .mobile-content .current-theme-title span {
        display: inline-block;
        background-color: var(--background-color);
        padding-inline-end: .5em;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .site-header .mobile-content .current-theme-dates {
        font-family: var(--fancy);
        font-size: 19px;
        line-height: 32px;
        letter-spacing: 0.33px;
        padding-inline-start: .5em;
        background-color: var(--background-color);
        white-space: nowrap;
    }
    .site-header .mobile-content .current-theme-dates .theme-start-date:after {
        content: " — ";
    }
    .theme-item {
        /* margin-left: var(--gap); */
        /* margin-right: var(--gap); */
    }
    .theme-item {
        margin-top: var(--gap);
        /* border-top: 8px solid var(--text-color ); */
        padding-top: var(--gap);
    }
    .theme-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* background-color: var(--text-color); */
        color: var(--background-color);
        /* margin: 0 var(--gap); */
        transition: max-height 800ms;
    }
    .theme-info > .__inner:before {
        top: calc( -150vw + 40% );
        left: calc( -150vw + 50% );
        width: 300vw;
        height: 300vw;
    }
    .theme-info > .__inner:after {
        background-position-y: 25%;
    }
    .header-open .site-header,
    .header-open .theme-info {
        max-height: 99rem;
    }
    .films-list {
        margin: 0 var(--gap);
    }
    .theme-info > .__inner > * {
        padding: 0 var(--gap);
    }
    .theme-info > .__inner > .theme-title-block {
        min-height: 35vh;
    }
    .theme-info > .__inner > .theme-description > p {
        padding: 0 var(--gap);
    }
    .theme-title-block {
        padding-bottom: 40px;
    }
    .theme-info .theme-description {
        /* background-color: var(--background-color); */
        color: var(--text-color);
        padding: var(--gap) 0;
        font-size: 16px;
        line-height: 1.38;
        letter-spacing: 0.22px;
        margin-inline-start: 0;
        padding-top: min( 50vh, 640px );
    }
    .films-list {
        border-top: 2px solid var(--text-color);
    }
    .films-list.theme-links-list {
        padding-top: 1rem;
    }
    .theme-item:not(:last-child) .films-list .film-item:last-child {
        border-bottom: 0;
    }
    .film-credits {
        padding-bottom: var(--gap);
    }
    .site-footer {
        padding-inline-end: var(--gap);
    }
}

@media screen and (min-width: 800px) {
    body {
        margin: var(--gap) var(--gap) 0;
    }
    .site {
        display: flex;
        /* height: calc( 100vh - 80px ); */
        /* overflow: hidden; */
        padding-inline-end: var(--gap);
        border-inline-end: 5px solid transparent;
    }
    .site:after {
        content: "";
        position: fixed;
        display: block;
        top: var(--gap); bottom: var(--gap); left: var(--gap);
        border-inline-end: 5px solid var(--text-color);
    }
    html[dir="ltr"] .site:after {
        left: auto; right: var(--gap);
    }
    .site-header {
        align-self: flex-start;
        border-inline-end: 5px solid var(--text-color);
        width: 4rem;
        overflow: hidden;
        position: sticky;
        top: var(--gap);
        height: calc( 100vh - calc(var(--gap)*2) );
    }
    .header-content {
        position: absolute;
        height: calc( 100vh - calc(var(--gap)*2) );
        transform-origin: top right;
        transform: rotate(-90deg) translateY(-3rem);
        font-size: 3.3vh;
    }
    html[dir="ltr"] .header-content {
        transform: rotate(90deg) translateY(-3.5rem);
        transform-origin: top left;
    }
    .header-content > .__inner {
        display: flex;
        font-size: 1em;
        justify-content: space-between;
        /* text-indent: 1.5em; */
        width: calc( 100vh - 90px );
        white-space: nowrap;
        padding-top: 5px;
    }
    .header-content .lang-link {
        transform-origin: 0 0;
        transform: rotate(90deg) translateX(4px);
        text-decoration: none;
        font-size: 0.8em;
    }
    html[dir="ltr"] .header-content .lang-link {
        transform: rotate(-90deg);
        transform-origin: 100% 0;
    }
    .site > .theme-info,
    .site > .site-main {
        flex: 1;
    }
    .themes-list {
        /* overflow-x: hidden; */
    }
    .theme-item {
        display: flex;
    }
    .theme-item .theme-info,
    .theme-item .films-list {
        min-height: calc( 100vh - 80px );
        flex: 1;
    }
    .theme-item .films-list {
        padding-inline-start: calc( 2 * var(--gap) );
        padding-bottom: 8rem;
    }
    .theme-item .theme-info {
        padding-inline-end: 0;
        margin-inline-end: 0;
    }
    .theme-info {
        margin: 0 var(--gap);
        /* padding-inline-end: var(--gap); */
        border-inline-end: 5px solid transparent;
        margin-inline-start: 0;
    }
    .themes-list-list > li:first-child .theme-info:after {
        content: "";
        display: block;
        position: fixed;
        top: var(--gap);
        bottom: var(--gap);
        left: calc( 50% - 15px );
        border-inline-end: 5px solid var(--text-color);
    }
    html[dir="ltr"] .themes-list-list > li:first-child .theme-info:after {
        left: calc( 50% + 10px );
    }
    .theme-info > .__inner {
        position: sticky;
        top: var(--gap);
        display: flex;
        flex-direction: column;
        /* background-color: var(--text-color); */
        color: var(--background-color);
        /* overflow: auto; */
        min-height: calc( 100vh - calc( var(--gap)*2 ) );
        margin-bottom: var(--gap);
        margin-inline-end: calc( -1 * var(--gap) );
    }
    /* .theme-info .theme-title-block {
        text-align: center;
        flex: 1;
        align-content: center;
        font-size: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    } */
    .theme-title {
        font-size: 100px;
    }
    .theme-info .theme-dates {
        display: flex;
        justify-content: space-between;
        /* margin: 12px 5px; */
        font-size: var(--gap);
        margin: -6px var(--gap) 0;
    }
    .theme-info .theme-dates span {
        /* padding: 0 10px; */
        /* background-color: var(--text-color); */
    }
    .theme-info .theme-description {
        padding: var(--gap);
        padding-inline-start: 0;
        font-size: 16px;
        line-height: 1.38;
        letter-spacing: 0.22px;
        color: var(--text-color);
    }
    /* .site-main {
        overflow: auto;
        min-height: calc( 100vh - 80px );
        padding: 0 30px;
        border-left: 5px solid var(--text-color);
        border-right: 5px solid var(--text-color);
    } */
    .films-list {
        margin-bottom: 40px;
    }
    .films-list > li:first-child {
        border-top: 2px solid var(--text-color);
        margin-top: 12px;
    }
    .films-list summary > .__inner,
    .films-list .film-details {
        padding: var(--gap) 0;
    }
    .films-list .film-details {
        padding-top: 0;
    }
}