:root {
    --p-main: 3.5rem;
    --p-section: 2.5rem;
    --height-header: 75vh;

    --color-bg: #202020;
    --color-title: #0064a6;
    /*#1265a7;*/
    --color-title-dark: hsl(from var(--color-title) h s 15% / 1.0);
    --color-title-bg: #cddc89;
    --color-annotation: var(--color-title-bg);
    --color-text: #dadfd1;
    /*#d4dec0; #b9d8bc; #CFDA91; BBD1CE; #e1ede8; #dae8eb;*/

    --font-neutral: "Inter", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --font-slab: "Bitter", serif;
    --font-serif: "Source Serif 4", "Crimson Pro", serif;
    --font-sans: "Proza Libre", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;

    --cover-size: 24rem;
    --gap-columns-main: 6rem;
}

html {
    font-size: max(8px, 0.935vw);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    color: var(--color-text);
    background-color: var(--color-bg);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1.0;
    }
}

.title-header {
    display: grid;
    height: var(--height-header);
    overflow: hidden;
    color: var(--color-title);

    background-image: url("assets/Schanz_F143_still-low-2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    & > * {
        grid-area: 1 / 1;
    }

    & .header-bg {
        position: relative;
        display: grid;

        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-delay: 1s;

        & > * {
            grid-area: 1 / 1;
        }

        & video {
            min-width: 100%;
            height: auto;
            min-height: var(--height-header);
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
        }
    }

    & .header-content {
        z-index: 1;
        align-self: flex-start;
        justify-self: flex-start;
        color: #285da0;
        font-family: var(--font-title);
        padding: 3.5rem 3.5rem;

        width: 100%;

        & img {
            width: 38rem;
            height: auto;
            max-width: 100%;
        }
    }
}

section {
    & a:hover {
        text-decoration: none;
    }

    & p + p {
        margin-top: 1em;
    }

    & .text-main {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    & .text-small {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    & h2 {
        font-family: var(--font-slab);
        font-size: 2.25rem;
    }

    & h3 {
        font-family: var(--font-slab);
        font-size: 2.25rem;
        font-weight: normal;
        margin-bottom: var(--p-section);
    }

    & h4 {
        font-family: var(--font-slab);
        font-weight: 600;
        font-size: 1.2rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        border-left: 0.1em solid currentColor;
        border-top: 0.1em solid currentColor;
        width: fit-content;
        padding: 0.5em 0.7em;
        margin-bottom: 1.5rem;
    }

    & * + h4 {
        margin-top: 1.5rem;
    }

    & .button {
        font-size: 1.5rem;
        font-family: var(--font-slab);
        font-weight: 600;
        border: 0.12em solid var(--color-text);
        width: fit-content;
        padding: 0.35em 0.5em;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        background-color: var(--color-bg);
        box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.15);

        & span {
            font-weight: normal;
            opacity: 0.65;
        }

        &:hover {
            color: var(--color-bg);
            background-color: var(--color-text);
        }
    }

    & .image-button {
        /*max-width: 42rem;*/
        border: 0.12em solid var(--color-text);
        display: inline-block;
        background-color: var(--color-text);
        box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.15);

        &:hover {

            & img {
                opacity: 0.7;
            }
        }
    }

    & p:has(.image-button) {
        line-height: 0;
    }
}

section.intro {
    padding-inline: var(--p-main);
    padding-top: var(--p-section);
    padding-bottom: 7.5rem;
    background-color: var(--color-title);

    & .inner {
        display: flex;
        gap: var(--gap-columns-main);

        & > div {
            flex-basis: 0;
            flex-grow: 1;
        }

        & .column.left {
            flex-grow: 2;
        }

        & .column.right {
            min-width: var(--cover-size);
            --color-text: var(--color-title-dark);
            --color-bg: var(--color-title);
            color: var(--color-text);
        }
    }

    & .book-link {

        & img {
            width: var(--cover-size);
            max-width: 100%;
        }

        & > div {
            margin-top: -3.5rem;
        }

        p.link {
            margin-bottom: 0.5rem;
        }

        p.title {
            font-size: 1.25rem;
        }

        p.oa {
            &::before {
                content: "";
                background-color: currentColor;
                width: 1.1em;
                height: 1em;
                display: inline-block;
                margin-bottom: -0.15em;
                mask-image: url("assets/icon-simple-icons-openaccess-2.svg");
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-position: left bottom;
            }
        }

        & p + p {
            margin-top: 0.25em;
        }
    }
}

section.versioning,
section.close-up {
    & .section-header {
        display: grid;

        & > div {
            grid-area: 1 / 1;
            padding: var(--p-section) var(--p-main);
        }

        & .bg {
            background-color: var(--color-bg-title);
            background-position: center;
            background-size: cover;
            background-blend-mode: color-burn;
            min-height: 18rem;
            mask-image: linear-gradient(7deg, transparent 20%, black);
        }

        & .title {
            z-index: 1;
        }
    }

    & .section-text {
        padding: var(--p-section) var(--p-main);

        & > div {
            max-width: calc((100% - var(--gap-columns-main)) * 0.66);

            & + div {
                margin-top: 1.75rem;
            }
        }

        & .mobile-info {
            font-family: var(--font-neutral);
            line-height: 1.4;
            font-size: 0.8rem;
            font-weight: 600;
            color: hsl(from currentColor h s l / 0.6);
            display: flex;
            align-items: center;
            display: none;

            &::before {
                content: "";
                width: 2.5em;
                height: 1.4em;
                background-color: currentColor;
                display: block;
                mask-image: url(assets/icon-tdesign-desktop.svg);
                mask-size: contain;
                mask-position: left center;
                mask-repeat: no-repeat;
            }
        }
    }
}

section.versioning {
    --height-interface-loading: 80vh;
    --num-scenes-max: 17;
    --num-scenes: var(--num-scenes-max);
    /*24*/
    --width-video: 18.6rem;
    --gap-film-area: 1.5rem;

    --width-timeline: calc(100vw - 2 * var(--p-main) - var(--width-video) - var(--gap-film-area) + 2 * var(--p-scene));
    --width-scene: calc(var(--width-timeline) / var(--num-scenes-max));

    --height-label-marker: 0.45rem;
    --height-label-tooltip: 1.5rem;
    --gap-timeline-rows: var(--height-label-tooltip);
    /*1.75rem;*/

    --height-track: calc(0.35rem + 8px);
    --p-scene: 1px;
    --time-hover: 0.2s;

    --color-bg: #a48902;
    /*#786b18;*/
    --color-bg-title: #827d48;
    --color-bg-interface: #878271;
    /*#817d59; /*#94801e; /*#6b6444; /*#978826; /*hsl(from var(--color-bg) h s 40% / 1.0);*/

    --color-focus: #FF9717;
    /*#ffd500;*/
    --color-focus-0: #FF9717;
    --color-focus-1: #DAB600;
    /*#EDBC00;*/
    --color-focus-2: #b2d379;
    --color-focus-3: #92cef4;
    --color-focus-4: #d890e3;

    background-color: var(--color-bg);

    & .section-header {
        & .bg {
            background-image: url("assets/f140-archive-closeup02.jpg");
        }
    }

    & .load-button {
        position: absolute;
        top: anchor(--interface-area top);
        left: anchor(--interface-area left);
        margin-top: var(--p-section);
        margin-left: var(--p-main);
        z-index: 99;

        &::before {
            content: "";
            background-color: currentColor;
            width: 1.5em;
            height: 1.2em;
            margin-bottom: -0.2em;
            display: inline-block;
            mask-image: url("assets/icon-octicon-play-24.svg");
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: left bottom;
        }

        &.disabled {
            pointer-events: none;
            opacity: 0.5;
        }
    }

    &.is-loading .load-button {
        pointer-events: none;
        color: var(--color-bg);
        background-color: var(--color-text);

        &::before {
            mask-image: url("assets/icon-line-md-loading-loop.svg"), url("assets/icon-octicon-play-24-small.svg");
        }
    }

    & .interface {
        anchor-name: --interface-area;
        background-color: var(--color-bg-interface);
        height: var(--height-interface-loading);
        overflow-y: hidden;

        & .inner {
            padding: var(--p-section) var(--p-main);
            padding-bottom: calc(2 * var(--p-section));
            height: var(--height-interface-loading);
            overflow-y: hidden;
            filter: blur(0.5rem);
            pointer-events: none;
            mask-image: linear-gradient(to top, transparent var(--p-section), black, transparent calc(100% - var(--p-section)));
            transition: filter 0.4s, mask-image 0.4s;
        }

        & .flex {
            display: flex;
            gap: calc(5 * var(--width-scene) - var(--width-video) - var(--gap-film-area));
            gap: var(--width-scene);

            & > div {
                flex-grow: 1;
                flex-shrink: 0;
            }
        }

        & .entry {
            --aspect: 4 / 3;

            --num-scenes: min(var(--num-scenes-limit, 99), var(--num-scenes-max));

            & .header {
                margin-bottom: 1rem;

                & .title {
                    margin: 0;
                    font-family: var(--font-slab);
                    font-weight: 600;
                    font-size: 1.25rem;
                    line-height: 1.3;

                    & span {
                        font-weight: normal;
                        color: hsl(from currentColor h s l / 0.7);
                    }

                    &::before {
                        content: "";
                        background-color: hsl(from currentColor h s l / 0.5);
                        width: 1.5em;
                        height: 1.1em;
                        margin-bottom: -0.2em;
                        margin-left: -0.1em;
                        display: inline-block;
                        mask-image: url("assets/icon-tdesign-film-filled.svg");
                        mask-repeat: no-repeat;
                        mask-size: contain;
                        mask-position: left bottom;
                    }
                }

                & .subtitle {
                    margin: 0;
                    font-family: var(--font-slab);
                    font-weight: 600;
                    font-style: italic;
                    font-size: 1.25rem;
                    line-height: 1.3;

                    & span {
                        font-weight: normal;
                        color: hsl(from currentColor h s l / 0.7);
                    }
                }

                & * + .subtitle {
                    margin-top: 0.5rem;
                }

                & .byline {
                    font-family: var(--font-slab);
                    font-size: 1.25rem;
                    line-height: 1.3;
                    font-weight: normal;
                    font-style: italic;
                    color: hsl(from currentColor h s l / 0.5);
                }

                & .details {
                    font-family: var(--font-serif);
                    font-size: 1rem;
                    color: hsl(from currentColor h s l / 0.5);
                    margin-top: 0.1rem;

                    & .sound {
                        &::before {
                            content: "";
                            background-color: hsl(from currentColor h s l / 0.5);
                            width: 1.2em;
                            height: 0.9em;
                            display: inline-block;
                            margin-bottom: -0.15em;
                            margin-left: 0.1em;
                            mask-image: url("assets/icon-fluent-speaker-2-24-filled.svg");
                            mask-repeat: no-repeat;
                            mask-size: contain;
                            mask-position: left center;
                        }

                        &.off::before {
                            mask-image: url("assets/icon-fluent-speaker-off-24-filled.svg");
                        }
                    }
                }

                & .link {
                    font-family: var(--font-serif);
                    font-size: 1rem;
                    color: hsl(from currentColor h s l / 0.5);
                }
            }

            & .film {
                display: flex;
                gap: var(--gap-film-area);
                padding-bottom: 2rem;

                & .video-area {
                    flex-shrink: 0;
                    flex-grow: 0;

                    & .video {
                        cursor: pointer;
                        width: var(--width-video);
                        height: auto;
                        background-color: #000;
                        aspect-ratio: var(--aspect);
                        line-height: 0;
                        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
                        display: grid;
                        justify-items: center;
                        align-items: center;

                        & > * {
                            grid-area: 1 / 1;
                        }

                        & video {
                            width: 100%;
                            height: auto;
                        }

                        & .icon {
                            width: 2.5rem;
                            height: 2.5rem;
                            background-color: hsl(from currentColor h s l / 0.8);
                            border-radius: 3rem;
                            justify-content: center;
                            align-items: center;
                            display: none;

                            &::before {
                                content: "";
                                width: 2rem;
                                height: 2rem;
                                background-color: #000;
                                mask-image: url("assets/icon-mdi-play.svg");
                                mask-position: center;
                                mask-size: contain;
                                mask-repeat: no-repeat;
                            }
                        }

                        &:hover {
                            & .icon {
                                display: flex;
                            }
                        }
                    }

                    & .video-footer {
                        display: flex;
                        justify-content: flex-start;
                        margin-top: 0.35rem;

                        & .zoom-button {
                            cursor: pointer;
                            font-family: var(--font-neutral);
                            font-size: 0.8rem;
                            color: hsl(from currentColor h s l / 0.5);
                            padding-bottom: 0.2em;
                            padding-left: 0.15em;
                            opacity: 0;
                            transition: opacity var(--time-hover);

                            &::before {
                                content: "";
                                width: 1.65em;
                                height: 1.25em;
                                display: inline-block;
                                margin-bottom: -0.25em;
                                background-color: currentColor;
                                mask-image: url("assets/icon-mdi-resize.svg");
                                mask-position: left center;
                                mask-size: contain;
                                mask-repeat: no-repeat;
                            }

                            &:hover {
                                color: hsl(from currentColor h s l / 1.0);
                            }
                        }
                    }
                }

                &:hover .video-area .video-footer .zoom-button {
                    opacity: 1;
                }

                &.is-playing {
                    & .video-area {
                        & .video {
                            & .icon::before {
                                mask-image: url("assets/icon-mdi-pause.svg");
                            }
                        }
                    }
                }

                & .timeline-area {
                    flex-grow: 1;
                    border-top: 1px solid hsl(from currentColor h s l / 0.35);
                    position: relative;

                    & .timeline {
                        display: grid;
                        grid-template-columns: repeat(var(--num-scenes), var(--width-scene));
                        gap: var(--gap-timeline-rows) 0;
                        margin-left: calc(-1 * var(--p-scene));
                        margin-right: calc(-1 * var(--p-scene));

                        & .offset {
                            grid-column-end: span var(--span, 1);
                        }

                        & .gap {
                            grid-column-end: span var(--span, 1);
                            display: flex;
                            flex-direction: column;
                            padding: 0 var(--p-scene);

                            & .track {
                                height: var(--height-track);
                            }

                            & .thumbnail {
                                flex-grow: 1;
                                background-color: rgba(0, 0, 0, 0.2);
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                & .arrow {
                                    width: 1.2rem;
                                    height: 1.2rem;
                                    background-color: currentColor;
                                    mask-image: url("assets/icon-la-long-arrow-alt-right.svg");
                                    mask-position: center;
                                    mask-size: contain;
                                    mask-repeat: no-repeat;
                                    opacity: 0.35;
                                }
                            }

                            & .label {
                                flex-grow: 0;
                                flex-shrink: 0;
                                height: var(--height-label-marker);
                                margin-top: 3px;
                            }
                        }

                        & .scene {
                            display: flex;
                            flex-direction: column;

                            & .track {
                                position: relative;
                                height: var(--height-track);
                                padding: 3px var(--p-scene);
                                cursor: pointer;

                                & .bar {
                                    height: 100%;
                                    background-color: rgba(0, 0, 0, 0.3);
                                }

                                & .thumb {
                                    pointer-events: none;
                                    position: absolute;
                                    z-index: 9;
                                    left: 0%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                    width: 0.9rem;
                                    height: 0.9rem;
                                    border-radius: 2rem;
                                    background-color: #000;
                                    border: 1.5px solid currentColor;
                                    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.7);
                                    display: none;
                                }
                            }

                            &.is-playing {
                                & .track {
                                    & .bar {
                                        background-color: hsl(from currentColor h s l / 0.5);
                                    }

                                    & .thumb {
                                        display: block;
                                    }
                                }
                            }

                            & .thumbnail {
                                flex-grow: 1;
                                cursor: pointer;
                                height: 5rem;
                                padding: 0 var(--p-scene);
                                display: grid;

                                & > div {
                                    grid-area: 1 / 1;
                                }

                                & .bg {
                                    background-color: #FFF;
                                    transition: background-color var(--time-hover);
                                }

                                & .image {
                                    background-position: left center;
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    mix-blend-mode: multiply;
                                }

                                & .icon {
                                    z-index: 1;
                                    width: 2rem;
                                    aspect-ratio: 1;
                                    border-radius: 2rem;
                                    background-color: hsl(from currentColor h s l / 0.5);
                                    align-self: center;
                                    justify-self: center;
                                    display: none;
                                    justify-content: center;
                                    align-items: center;

                                    &::before {
                                        content: "";
                                        width: 75%;
                                        height: 75%;
                                        background-color: #000;
                                        mask-image: url("assets/icon-mdi-play.svg");
                                        mask-position: center;
                                        mask-size: contain;
                                        mask-repeat: no-repeat;
                                    }
                                }

                                &:hover .icon {
                                    display: flex;
                                }

                            }

                            & .label {
                                flex-grow: 0;
                                flex-shrink: 0;
                                height: var(--height-label-marker);
                                padding: 0 var(--p-scene);
                                margin-top: 3px;
                                font-size: 0.8rem;
                                font-family: var(--font-neutral);
                                font-weight: 600;
                                letter-spacing: 0.05em;

                                & .marker {
                                    width: 100%;
                                    height: 100%;
                                    border-top: 0.15rem solid currentColor;
                                }
                            }

                            &[data-scene-id="-1"] .label {
                                visibility: hidden;
                            }

                            &.single {
                                --color-focus: #FFF;

                                & .label {
                                    opacity: 0.7;
                                }
                            }

                            &.set-0 {
                                --color-focus: var(--color-focus-0);

                                & .label {
                                    color: var(--color-focus-0);
                                }
                            }

                            &.set-1 {
                                --color-focus: var(--color-focus-1);

                                & .label {
                                    color: var(--color-focus-1);
                                }
                            }

                            &.set-2 {
                                --color-focus: var(--color-focus-2);

                                & .label {
                                    color: var(--color-focus-2);
                                }
                            }

                            &.set-3 {
                                --color-focus: var(--color-focus-3);

                                & .label {
                                    color: var(--color-focus-3);
                                }
                            }

                            &.set-4 {
                                --color-focus: var(--color-focus-4);

                                & .label {
                                    color: var(--color-focus-4);
                                }
                            }

                            &.focus {
                                & .thumbnail .bg {
                                    background-color: var(--color-focus);
                                }

                                & .label {

                                    & .marker {
                                        color: currentColor;
                                        border-top-width: var(--height-label-marker);
                                    }
                                }
                            }

                            /* Custom thumbnail positions for certain scenes */
                            &[data-scene-id="8"],
                            &[data-scene-id="5"],
                            &[data-scene-id="6"],
                            &[data-scene-id="9"],
                            &[data-scene-id="12"] {
                                & .thumbnail .image {
                                    background-position: center;
                                }
                            }

                            &[data-scene-id="7"],
                            &[data-scene-id="10"],
                            &[data-scene-id="11"] {
                                & .thumbnail .image {
                                    background-position: right;
                                }
                            }
                        }

                        & .fill {
                            grid-column-end: span var(--span, 1);

                            & .thumbnail {
                                & .bg {
                                    background-color: rgba(0, 0, 0, 0.6);
                                }

                            }

                            & .label {
                                visibility: hidden;
                            }
                        }

                    }

                    & .preview-tooltip {
                        position: absolute;
                        z-index: 999;
                        margin-top: -0.85rem;
                        left: 50%;
                        transform: translate(-50%, -100%);
                        pointer-events: none;

                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 0.25rem;

                        opacity: 0;
                        transition: opacity 0.25s;

                        & .preview {
                            width: 12rem;
                            background-color: #000;
                            line-height: 0;
                            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);

                            & video {
                                width: 100%;
                                height: auto;
                            }
                        }

                        & .time {
                            font-family: var(--font-neutral);
                            font-feature-settings: "tnum";
                            background-color: #000;
                            padding: 0.25em 0.35em;
                            font-size: 0.8rem;
                            font-weight: 500;
                            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
                        }

                        &.show {
                            display: flex;
                            opacity: 1;
                        }
                    }

                }

                /* .timeline-area */
            }

            /* Custom thumbnail position for first film */
            &[data-id="0"] .timeline .scene:not(:nth-child(2)) {
                & .thumbnail .image {
                    background-position: center;
                }
            }
        }

        /* .entry */

        & .label-tooltip {
            pointer-events: none;
            position: absolute;
            z-index: 99;
            display: none;
            padding-left: var(--p-scene);

            & > div {
                height: var(--height-label-tooltip);
                display: flex;
                align-items: center;
                white-space: nowrap;
                background-color: #000;
                color: var(--color-focus);
                font-family: var(--font-neutral);
                font-size: 0.8rem;
                padding: 0 0.65em;

                &.single {
                    color: hsl(from var(--color-text) h s l / 0.75);
                }

                &.set-0 {
                    color: var(--color-focus-0);
                }

                &.set-1 {
                    color: var(--color-focus-1);
                }

                &.set-2 {
                    color: var(--color-focus-2);
                }

                &.set-3 {
                    color: var(--color-focus-3);
                }

                &.set-4 {
                    color: var(--color-focus-4);
                }
            }

            &.show {
                display: block;
            }
        }

        & .zoom-overlay {
            position: fixed;
            z-index: 9999;
            inset: 0;
            cursor: pointer;
            padding: var(--p-section) var(--p-main);
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(1rem);
            transition: opacity 0.3s;
            visibility: hidden;
            opacity: 0;

            &.show {
                visibility: visible;
                opacity: 1;
            }


            & .video {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                & video {
                    cursor: auto;
                    width: auto;
                    height: auto;
                    max-width: 100%;
                    max-height: 100%;
                    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
                    display: none;
                }
            }

            &.has-loaded video {
                display: block;
            }

            & .load-icon {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 2.8rem;
                height: 2.8rem;
                background-color: currentColor;
                mask-image: url(assets/icon-line-md-loading-loop.svg);
                mask-size: contain;
                mask-repeat: no-repeat;
                mask-position: center;
            }

            &.has-loaded .load-icon {
                display: none;
            }

            & .close-button {
                position: absolute;
                width: var(--p-main);
                height: var(--p-main);
                top: 0;
                left: 0;
                background-color: currentColor;
                mask-image: url(assets/icon-carbon-close.svg);
                mask-size: 2.8rem;
                mask-repeat: no-repeat;
                mask-position: center;
                opacity: 0.3;
            }

            &:hover:not(:has(video:hover)) {

                & .close-button {
                    opacity: 1;
                }
            }
        }
    }

    /* .interface */

    &.has-loaded .interface {
        height: auto;
        overflow-y: auto;

        & .inner {
            height: auto;
            overflow-y: auto;
            filter: none;
            pointer-events: auto;
            mask-image: none;
        }
    }
}

body:has(.zoom-overlay.show) {
    overflow-y: hidden;
}

section.close-up {
    --color-bg: #AB723D;
    /*#54583E;*/
    --color-bg-title: #AB723D;

    background-color: var(--color-bg);

    & .section-header {
        & .bg {
            background-image: url("assets/f140-archive-closeup01.jpg");
        }
    }

    & .button {
        &::before {
            content: "";
            background-color: currentColor;
            width: 1.5em;
            height: 1.2em;
            margin-bottom: -0.25em;
            display: inline-block;
            mask-image: url("assets/icon-streamline-play-list.svg");
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: left bottom;
        }
    }

    & .section-text {
        padding-bottom: calc(2 * var(--p-section));
    }
}

section.footer {
    padding-inline: var(--p-main);
    padding-top: var(--p-section);
    padding-bottom: 2rem;
    background-color: var(--color-title);
    font-size: 0.9rem;
    font-family: var(--font-neutral);
    line-height: 1.4;
    color: var(--color-title-dark);

    & .inner {
        display: flex;
        gap: var(--gap-columns-main);

        & .column.imprint {
            flex-grow: 2;
            flex-basis: 0;

            display: grid;
            grid-template-columns: 18rem 18rem;
            gap: 1.5rem 0rem;
        }

        & .column.credits {
            flex-grow: 1;
            flex-basis: 0;
            min-width: var(--cover-size);

            font-family: var(--font-serif);
            font-size: 0.9rem;
            line-height: 1.5;
        }
    }

    & .funding {
        & .snf-logo {
            width: 12rem;
            margin-top: 0.5em;
            background-color: currentColor;
            mask-image: url("assets/SNF_logo_standard_web_sw_neg_d.svg");
            mask-size: contain;
            mask-repeat: no-repeat;

            & img {
                visibility: hidden;
            }
        }
    }

    & .rf-link {
        grid-column-start: 1;
        display: flex;
        align-items: center;
        color: hsl(from var(--color-text-default) h s l / 0.6);
        gap: 1em;

        & a {
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        &::before {
            content: "⌜\A\A⌞";
            white-space: pre;
            line-height: 1;
        }

        &::after {
            content: "⌝\A\A⌟";
            white-space: pre;
            line-height: 1;
        }
    }

    & #credits {
        &::before {
            content: "";
            background-color: currentColor;
            width: 1.35em;
            height: 1em;
            display: inline-block;
            margin-bottom: -0.125em;
            mask-image: url("assets/icon-mdi-filmstrip-2.svg");
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: left bottom;
        }

        & span {
            font-weight: bold;
            font-family: var(--font-neutral);
            font-size: 95%;
        }
    }
}

.mobile {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    :root {}

    html {}

    .title-header {
        & .header-content {
            & img {
                width: 100%;
            }
        }
    }

    section {}

    section.intro {
        padding-bottom: var(--p-section);

        & .inner {
            flex-direction: column;
            gap: var(--p-section);
        }
    }

    section.footer {
        & .inner {
            display: flex;
            flex-direction: column;
            gap: var(--p-section);

            & .column.imprint {
                grid-template-columns: 1fr 1fr;
            }
        }
    }

    section.versioning,
    section.close-up {
        & .section-text {
            & > div {
                max-width: none;
            }
        }
    }

    section.versioning {
        --num-scenes-max: 11;
        --width-timeline: calc(100vw - 2 * var(--p-main));
        --width-video: 100%;

        & .interface {
            & .flex {
                display: block;
            }

            & .entry {
                --num-scenes: var(--num-scenes-max);

                & .film {
                    flex-direction: column;
                    gap: 1rem;
                    padding-bottom: 4rem;
                }

            }
        }
    }

    .mobile {
        display: block !important;
    }

    .mobile-info {
        display: flex !important;
    }

    .desktop {
        display: none !important;
    }
}