/* || VARIABLES */ 

:root {
    --dot: 20px;

    --dotx025: calc(var(--dot) * 0.25);
    --dotx05: calc(var(--dot) * 0.5);
    --dotx2: calc(var(--dot) * 2);
    --dotx3: calc(var(--dot) * 3);
    --dotx4: calc(var(--dot) * 4);
    --dotx8: calc(var(--dot) * 8);
    --dotx16: calc(var(--dot) * 16);

    --header-height: calc(calc((100vw - (6 * var(--dot))) / 12.59) + (1.75 * var(--dot)));
    --footer-height: calc(3 * var(--dot));
    --dropdown-height: calc(var(--fs-small) * 2.4);
    --main-vh: calc(100vh - calc(var(--header-height) + var(--footer-height)));
    --vw-margin: calc(100vw - (2 * var(--dotx3)));
    --col: calc((var(--vw-margin) - (var(--dot) * 11)) / 12);
    --colx2: calc((var(--col) * 2) + (var(--dot) * 1));
    --colx3: calc((var(--col) * 3) + (var(--dot) * 2));
    --colx4: calc((var(--col) * 4) + (var(--dot) * 3));
    --colx6: calc((var(--col) * 6) + (var(--dot) * 5));
    --colx8: calc((var(--col) * 8) + (var(--dot) * 7));
    --colx10: calc((var(--col) * 10) + (var(--dot) * 9));

    --bg-color: #ffffff;
    --bg2-color: #f5f5f5;
    --main-color: #000000;
    --accent-color: #d9d9d9;
    --highlight-color: #6600FF;

    font-family: "ABCCameraPlain", sans-serif;
    --fs-main: var(--dot);
    --fs-h1: 3rem;
    --fs-small: 0.8rem;
    --fs-ml: 1.2rem;
    --fs-large: 1.5rem;
    --fs-xlarge: 2rem;

    --border: 2px dotted var(--main-color);
    --border-solid: 1px solid;
    --radius: var(--dotx05);
    --glow: inset 0 0 var(--dotx05) var(--accent-color);
    --cursor: url('/assets/images/dot-20.png'), auto;
}
@media screen and (max-width:991px) {
    :root {
        /* --bg-color: rgb(255, 255, 0, 0.2); */
    }
}
@media screen and (max-width:767px) {
    :root {
        /* --bg-color: rgb(255, 166, 0, 0.2); */

        --dot: 16px;
        --fs-main: 16px;
        --cursor: url('/assets/images/dot-16.png'), auto;
        --border: 1px dotted var(--main-color);
    }
}
@media screen and (max-width:478px) {
    :root {
        /* --bg-color: rgba(255, 0, 0, 0.2); */

        --dot: 12px; 
        --fs-h1: 2rem;
        --fs-xlarge: 1.5rem;
        --dropdown-height: calc(var(--fs-main) * 5.3);
        --vw-margin: calc(100vw - (2 * var(--dot))); 
    }
}
@media screen and (min-width:1280px) {
    :root {
        /* --bg-color: rgb(0, 0, 255, 0.2); */
    }
}
@media screen and (min-width:1440px) {
    :root {
        /* --bg-color: rgb(128, 0, 128, 0.2); */
    }
}
@media screen and (min-width:1920px) {
    :root {
        /* --bg-color: rgb(165, 42, 42, 0.2); */

        --dot: 24px;
        --cursor: url('/assets/images/dot-24.png'), auto;  
    }
}

/* || GENERAL */ 

html {
    font-size: var(--fs-main);
}

* {
    scrollbar-width: none; /* hide scrollbar in firefox */
    scroll-behavior: smooth;
  }
  
*::-webkit-scrollbar {
    display: none; /* hide scrollbar in edge and opera */
    scroll-behavior: smooth;
}
* { 
    box-sizing: border-box;
}



/* || GENERAL */ 

    /* >>> BASIC */
    body {
        background-color: var(--bg-color);
        color: var(--main-color);
        cursor: var(--cursor);         
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: "ABCCamera", sans-serif;
        line-height: 1;
    }

    h1 {
        margin-top: var(--dotx05);
        margin-bottom: var(--dotx05);
        font-size: var(--fs-h1);
        font-weight: normal;
    } 

    h2 {
        color: var(--accent-color);
        font-weight: normal;
    }

    h3 {
        color: var(--accent-color);
        font-size: var(--fs-small);
        text-transform: uppercase;
        font-weight: normal;
        margin: 0;
    }

    h4 {
        margin: 0;
    }

    p {
        line-height: 1.2;
        margin-top: var(--dotx05);
        margin-bottom: var(--dotx05); 
    }

    hr {
        border: none;
        border-top: var(--border);
        width: 100%;
    }

/* >>> FORMATTING */
    blockquote {
        border: var(--border);
        margin: 0;
        padding: var(--dotx05);
        border-radius: var(--radius);
        font-size: var(--fs-large);
    }
        blockquote small {
            font-size: 0.5em;
        }
/* >>> FORMS & INPUT */
    button, 
    button:hover {
        cursor: pointer;
    }
/* >>> FRAMES */
    iframe {
        width: 100%;
        border: none;
        aspect-ratio: 16 / 9;
        border-radius: var(--dotx05);
    }            

/* >>> IMAGES */
    img {
        max-width: 100%;
        height: auto;
    }
        main img {
            object-fit: cover;
            border-radius: var(--radius);
        }
        
    figure {
        width: 100%;
        margin: 0;
    }

    figcaption {
        color: var(--accent-color);
        font-size: 0.8em;
        font-style: italic;
        padding-top: var(--dotx05);
        text-align: center;
    }

/* >>> LINKS */
    a {
        cursor: pointer;
        height: auto;
        color: inherit;
        text-decoration: none;
    }
        a:hover, a:active, .active {
            color: var(--highlight-color);
            border-color: var(--highlight-color);
        }
        p a {
            text-decoration: underline;
        }
    
    nav {
        width: 100%;
        padding-top: var(--dotx05);
        padding-bottom: var(--dotx05);
        gap: var(--dot);
        display: flex;
        flex-direction: row-reverse;
        text-transform: uppercase;
        font-size: var(--fs-small);
    }
    @media screen and (max-width:478px) {
        nav {
            font-size: 1rem;
        }
    }

/* >>> LISTS */
    ul, ol {
        padding-left: var(--dot);
        margin-top: var(--dotx025);
        margin-bottom: var(--dotx025);
    }

/* >>> SEMANTICS */
    main {
        position:relative;
        min-height: var(--main-vh);
        margin-top: var(--header-height);
        margin-left: var(--dotx3);
        margin-right: var(--dotx3);
        padding-top: var(--dot);
        padding-bottom: var(--dot);
    }
    @media screen and (max-width:478px) {
        main {
            margin-left: var(--dot);
            margin-right: var(--dot);
            padding-top: var(--dotx05);
            padding-bottom: var(--dotx05);
        }
    }

    section {
        padding-top: var(--dotx025);
        padding-bottom: var(--dotx025);
        margin-bottom: var(--dot);
    }
    
/* || UTILITIES */

.flex-row {
    display: flex;
    flex-direction: row;
    gap: var(--dotx05);
}
.flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--dotx05);
}

.scroll-drag { 
    scroll-snap-type: x mandatory;
    cursor: grab;
    display: flex;
    column-gap: var(--dot);
    overflow-x: scroll;
}
    .scroll-drag:active {
        cursor: grabbing;
    }

.fade-lr {
    --mask: linear-gradient(
        90deg,
        transparent,
        #000 10%,
        #000 90%,
        transparent 100%
    );
    -webkit-mask: var(--mask); 
    mask: var(--mask);
}

.fade-r {
    --mask: linear-gradient(
        90deg,
        #000,
        #000 90%,
        transparent 100%
    );
    -webkit-mask: var(--mask); 
    mask: var(--mask);
}

.empty {
    flex: 0 0 var(--colx4);
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: var(--fs-small);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--dot);
}

.row {
    flex: 1;
    padding-top: var(--dotx05);
    padding-bottom: var(--dotx05);
}
.row--underlined {
    border-bottom: var(--border);
}

.grey {
    color: var(--accent-color);
}

/* || SITEWIDE */

/* >>> HEADER */
    header {
        position: fixed;
        top: 0;
        z-index: 995;
        padding-left: var(--dot);
        padding-right: var(--dot);
    }
    @media screen and (max-width: 478px) {
        header {
            background-color: var(--bg-color);
        }
    }

    #header__top {
        padding-left: var(--dotx2);
        padding-right: var(--dotx2);
        z-index: 20;
        position: relative;  
    }
    @media screen and (max-width: 478px) {
        #header__top {
            border-bottom: var(--border);
        }
    }

    #header__top__logotype {
        width: var(--vw-margin);
        padding-top: var(--dot);
        padding-bottom: var(--dotx05);
        position: relative;
        background-color: var(--bg-color);
        border-bottom: var(--border);
    }
    @media screen and (max-width:478px) {
        #header__top__logotype {
            border-bottom: none;
            width: calc(var(--vw-margin) - calc(var(--dot) * 4));
        }   
    }
    #header__top__logotype img {
        width: 100%;
        transition: 0.6s;
    }
    #header__top__hamburger {
        position: fixed;
        top: var(--dot);
        right: var(--dot);
        height: var(--dot);
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
        cursor: inherit;
        z-index: 999;
    }  
    #header__top__hamburger div {
        background-color: var(--main-color);
        position: relative;
        width: var(--dot);
        height: calc(var(--dot) / 6);
    }
    #header__dropdown {
        height: 0px;
        margin-top: -2px;
        margin-left: var(--dotx2);
        margin-right: var(--dotx2);
        overflow-y: scroll;
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        -o-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
        border-bottom: var(--border);
        background-color: var(--bg-color);
        z-index: 200;
    }
    @media screen and (max-width:767px) {
        #header__dropdown {
            margin-top: -1px;
        }
    }
    @media screen and (max-width:478px) {
        #header__dropdown {
            margin-left: 0;
            margin-right: 0;
        }
    }
    #header__top:hover + #header__dropdown,
    #header__dropdown:hover {
        height: var(--dropdown-height);
    }

    #nav__languages {
        flex-shrink: 1;
        text-align: right;
    }
    #nav__pages {
        flex: 1;
        display: flex;
        flex-direction: row;
        gap: var(--dot);
    }
    @media screen and (max-width: 478px) {
        #nav__pages {
            flex-direction: column;
            gap: 0;
        }
    }


/* >>> Various */

    .section__title {
        color: var(--accent-color);
        font-size: var(--fs-small);
        text-transform: uppercase;
        margin-bottom: var(--dotx025);
        font-family: 'ABCCamera', sans-serif;
    }

    .item {
        box-shadow: var(--glow);
        border-radius: var(--radius);
        position: relative;
        padding: var(--dot);
        scroll-snap-align: start;
    }
        .item__title {
            font-family: "ABCCamera", sans-serif;
            flex: 1;
            font-size: var(--fs-ml);
            grid-column: span 2;
        }
        .item__meta {
            display: flex;
            flex-direction: row;
            gap: var(--dotx025);
            border-top: var(--border);
            padding-top: var(--dotx05);
            font-size: var(--fs-small);
            text-transform: uppercase;
        }
        
        .item__category {
            flex: 0;
        }
        .item__figure {
            height: 100%;
            overflow: hidden;
            
        }
        .item__figure img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            aspect-ratio: 16 / 9;
        }
/* >>> FIXED ELEMENTS  */
    #fader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        pointer-events: none;
        background: white;
        animation-duration: 300ms;
        animation-timing-function: ease-in-out;
        }

        #fader:before {
            content: 'fade'
        }

        @keyframes fade-out {
            from { opacity: 1 }
            to { opacity: 0 }
        }

        @keyframes fade-in {
            from { opacity: 0 }
            to { opacity: 1 }
        }

        #fader.fade-out {
            opacity: 0;
            animation-name: fade-out;
        }

        #fader.fade-in {
            opacity: 1;
            animation-name: fade-in;
        }

    #marquee {
        position: fixed;
        bottom: 0;
        display: block;
        margin: 0 var(--dot) var(--dot) calc(3 * var(--dot));
        width: calc(100vw - calc(4 * var(--dot)));
        height: var(--dot);
        background-color: var(--main-color);
        color: var(--bg-color);
        z-index: 998;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: var(--dot);
    }
    #marquee__content {
        display: block;
        padding-left: 100%;
        animation: marquee 15s linear infinite;
        font-size: 0.75rem;
        margin: 0;
        font-style: italic;
        padding-top: 1px;
    }

    @keyframes marquee {
        0%   { transform: translate(0, 0); }
        100% { transform: translate(-150%, 0); }
    }
    @media screen and (max-width: 767px) {
        #marquee {
            /* display: none; */
            height: auto;
            bottom: var(--dotx2);
            margin: 0 var(--dot) var(--dot) var(--dot);
            width: calc(100vw - calc(var(--dotx2)));
        }
        #marquee__content {
            padding-right: 100%;
            padding: 1px;
            font-size: 1rem;
        }
    }
    .dot{
        position:fixed;
        height: var(--dot);
        width: var(--dot);
        border-radius:50%;
        background-color: var(--main-color);
        z-index: 999;
    }
    #dot--top{
        left: var(--dot);
        top: var(--dot);
    }
    #dot--mid-left{
        left: var(--dot);
        transform:translate(0%,0%);
        z-index: 100;
    }
    #dot--mid-right{
        right: var(--dot);
        transform:translate(0%,0%);
        z-index: 100;
    }
    #dot--bottom{
        left: var(--dot);
        bottom: var(--dot);
    }
    #dot-frame-left, #dot-frame-right {
        position: fixed;
        border-top: calc(var(--dot) * 1.5) var(--bg-color) solid;
        border-bottom: calc(var(--dot) * 1.5) var(--bg-color) solid;
        top: 0;
        height: 100vh;
        width: var(--dotx3);
        z-index: 900;
    }
    #dot-frame-left {
        top: 0;
        left: 0;
    }
    #dot-frame-right {
        top: 0;
        right: 0;
        border-top: calc(var(--dot) * 2) var(--bg-color) solid;
    }
    @media screen and (max-width: 478px) {
        #dot--mid-left,
        #dot--mid-right {
            display: none;
        }
        #dot-frame-left, #dot-frame-right {
            display: none;
        }
    }

/* >>> FOOTER */
    footer {
        background-color: var(--bg2-color);
        height: auto;
        width: 100vw;
        padding-bottom: var(--dotx3);
        position: relative;
        z-index: 997;
    }
    #footer__content {
        margin-left: var(--dotx3);
        margin-right: var(--dotx3);
        padding-top: var(--dot);
    }
    @media screen and (max-width: 478px) {
        #footer__content {
            margin-left: var(--dot);
            margin-right: var(--dot);
            /* padding-top: calc(var(--footer-height) + 1px); */
        }
    }
    footer {
        background-color: var(--highlight-color);
        color: black;
    }
    #footer__content {
        filter: invert(1);
    }

/* || HOME */

#home__featured .item {
    height: 100%;
    flex: 0 0 var(--colx8);
}
#home__featured .item__title {
    font-size: var(--fs-xlarge);
    flex: 0;
}

#home__projects .item {
    /* height: 100%; */
    flex: 0 0 var(--colx4);
}

#home__articles .item,
#home__articles .empty {
    height: 100%;
    flex: 0 0 var(--colx6);
}


.item--people,
.item--projects {
    box-shadow: none;
}

.item--people {
    border-radius: 50%;
    flex: 0 0 var(--colx2);
    height: var(--colx2);
}
.item--projects {
    aspect-ratio: 4 / 3;
}
.item--people .item__title,
.item--projects .item__title {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: 0.2s;
    color: var(--bg-color);
    text-shadow: 0 0 var(--dotx05) var(--main-color);
}
.item--people .item__title {
    font-size: var(--fs-small);
}
.item--people .item__figure,
.item--projects .item__figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    opacity: 100%;
}
.item--people .item__figure {
    border-radius: 50%;
}
.item--people .item__figure img {
    aspect-ratio: 1 / 1;
}


.item--people:hover .item__figure,
.item--projects:hover .item__figure {
    opacity: 10%;
    transition: 0.2s;
    z-index: -2;
    box-shadow: var(--glow);
}
.item--people:hover, 
.item--projects:hover{
    box-shadow: var(--glow);
    color: var(--highlight-color);
}

.main--home .item__date {
    flex: 1;
    text-align: right;
}

@media screen and (max-width:991px) {
    .empty,
    #home__articles .empty,
    #home__projects .empty  {
        flex: 0 0 var(--vw-margin);
        scroll-snap-align: start;
    }
    #home__featured .item {
        flex: 0 0 var(--colx10);
    }
    #home__articles .item,
    #home__projects .item {
        flex: 0 0 var(--colx6);
    }
    .item--people,
    #home__people .empty {
        flex: 0 0 var(--colx3);
        height: var(--colx3);
    }
}
@media screen and (max-width:767px) {
    #home__articles .item,
    #home__projects .item {
        flex: 0 0 var(--colx8);
    }
    .item--people,
    #home__people .empty {
        flex: 0 0 var(--colx4);
        height: var(--colx4);
    }
}
@media screen and (max-width:478px) {
    #home__featured .item,
    #home__articles .item,
    #home__projects .item {
        flex: 0 0 var(--colx10);
    }
    .item--people,
    #home__people .empty {
        flex: 0 0 var(--colx6);
        height: var(--colx6);
    }
    
}
@media screen and (min-width:1280px) {

}
@media screen and (min-width:1440px) {

}
@media screen and (min-width:1920px) {

}
/* || PAGE */

/* >>> TITLE COVER */
    .titlecover {
        text-align: center;
        padding-top: var(--dotx2);
        padding-bottom: var(--dotx2);
        max-width: 80%;
        margin: auto;
    }
    @media screen and (max-width:767px) {
        .titlecover {
            max-width: 100%;
            margin: auto;
        }
    }


/* >>> CAROUSEL */
    .carousel {
        /* width: 100%; */
        overflow: hidden;
    }
    .carousel__track {
        overflow: scroll;
    }
    
    .carousel__track__slide {
        flex: 0 0 auto;
        scroll-snap-align: center;
        position: relative;
    }
    .content__block--inline-carousel .carousel__track__slide {
        flex: 0 0 100%;
        padding-right: 0;
    }
    .carousel__track__slide img {
        height: auto;
        width: calc((var(--col) * 8) + (var(--dot) * 7));
        /* aspect-ratio: 3 / 2; */
    }
    .carousel__track__slide--portrait img {
        height: auto;
        width: calc((var(--col) * 4) + (var(--dot) * 3));
        /* aspect-ratio: 2 / 3; */
    } 
    .carousel__track__slide--square img {
        height: auto;
        width: calc((var(--col) * 6) + (var(--dot) * 5));
        /* aspect-ratio: 1 / 1; */
    }
    @media screen and (max-width:767px) {
        .carousel__track__slide {
            flex: 0 0 auto;
            scroll-snap-align: center;
        }
        .carousel__track__slide img {
            width: calc((var(--col) * 10) + (var(--dot) * 9));
        }
        .carousel__track__slide--portrait img {
            width: calc((var(--col) * 8) + (var(--dot) * 7));
        }
        .carousel__track__slide--square img {
            width: calc((var(--col) * 9) + (var(--dot) * 6));
        }
    } 
    @media screen and (min-width:1280px) {
        .carousel__track__slide img {
            
        }
    }
    .content__block--inline-carousel .carousel__track__slide img{
        display: block;
        margin: auto;
        width: auto;
        min-width: 75%;
        height: auto;
        aspect-ratio: auto;
    }
    .carousel__track__empty {
        display: block;
        border-radius: var(--radius);
        margin-bottom: var(--dotx025);
        flex: 0 0 calc((var(--col) * 2) + (var(--dot) * 1));
    }

    .carousel__arrow {
        position: absolute;
        bottom: 0;
        background-color: transparent;
        border: none;
        font-size: var(--dot);
        cursor: inherit;
        }

    .carousel__arrow--prev {
        right: 0;
        display: none;
    }
    .carousel__arrow--next {
        right: 0;
    }
    .carousel__track__slide:last-child .carousel__arrow--next {
        display: none;
    }
    .carousel__track__slide:last-child .carousel__arrow--prev {
        display: block;
    }
    
    .scroll {
        display: flex;
    }

/* >>> META */
    .meta {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--dot);
        row-gap: var(--dotx05);
        font-size: var(--fs-small);
        padding-top: var(--dotx05);
        padding-bottom: var(--dotx05);
        border-top: var(--border);
        grid-column: span 2;
        text-transform: uppercase;
    }
    .meta__category {
        grid-column: span 2;
    }
    @media screen and (min-width: 1280px) {
        .meta__category {
            grid-column: span 1;
        }
    }
    .meta__date {
        grid-column: span 2;
        text-align: right;
    }
    @media screen and (min-width: 1280px) {
        .meta__date {
            grid-column: span 1;
            text-align: left;
        }
    }
    .meta__tags {
        grid-column: span 4;
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
    }
    @media screen and (min-width: 1280px) {
        .meta__tags {
            grid-column: span 2;

        }
    }
    .meta__tag {
        height:fit-content;
        display: inline-block;
        border-radius: 0.8rem;
        border: var(--border-solid);
        border-color: inherit;
        text-transform: uppercase;
        font-size: 0.6rem;
        padding: 0.1rem 0.2rem 0.1rem 0.2rem;
    }

    .meta__downloads {
        grid-column: span 4;
        text-transform: none;
    }
    .meta__downloads a {
        text-decoration: underline;
    }

/* >>> CONTENT */
    .content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--dot);
        margin-bottom: var(--dotx4);

    }
    .content__block {
        margin-top: var(--dot);
        margin-bottom: var(--dot);
        grid-column-start: 1;
        grid-column-end: 12;
        display: grid;
        box-sizing: border-box;
    }
    .content__block--heading, .content__block--text, .content__block--list {
        margin-top: var(--dotx025);
        margin-bottom: var(--dotx025);
    }
    .content__block--smalltext, .content__block--timetable {
        font-size: var(--fs-small);
    }
    .main--article .content__block {
        grid-column-start: 3;
        grid-column-end: 11;
    }
    @media screen and (max-width:767px) {
        .main--article .content__block {
            grid-column-start: 1;
            grid-column-end: 13;
        }
    }
    @media screen and (min-width: 1280px) {
        .main--article .content__block {
            grid-column-start: 4;
            grid-column-end: 10;
        }
    }
    .main--page .content__block {
        grid-column-start: 1;
        grid-column-end: 9;
    }
    @media screen and (max-width:767px) {
        .main--page .content__block {
            grid-column: span 12;
        }
    }

    .main--page .content__block--image, 
    .main--page .content__block--video{
        grid-column-start: 9;
        grid-column-end: 13;
    }
    
    @media screen and (max-width:767px) {
        .main--page .content__block--image, 
        .main--page .content__block--video {
            grid-column: span 12;
        }
    }

    .content__block--heading {
        margin-top: var(--dot);
        margin-bottom: 0;
    }
    .main--article .content__block--gallery {
        grid-column: span 12;
        margin-top: var(--dotx2);
        margin-bottom: var(--dotx2);
    }

    .main--article .content__block--image--large {
        grid-column: span 12;
        margin-top: var(--dotx2);
        margin-bottom: var(--dotx2);
    }
    .content__block--image--small img {
        width: auto;
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .content__block--image--medium img {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .content__block--inline-carousel {
        padding-top: var(--dotx2);
    }

    .timetable__row {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: var(--dot);
        border-bottom: var(--border);
    }

    .gallery__container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--dot);
    }
    @media screen and (max-width:767px) {
        .gallery__container {
            grid-template-columns: repeat(1, 1fr);
        }
    }


/* >>> COLOPHON */
    .colophon {
        margin-top: var(--dot);
    }
    .colophon__items {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--dot);
        font-size: 0.8rem;
    }

    .colophon__block {
        margin-bottom: var(--dot);
        grid-column: span 6;
    }
    @media screen and (max-width: 767px) {
        .colophon__block {
            grid-column: span 12;
        }
    }

    .colophon__block--names, .colophon__block--names-grouped, .colophon__block--misc {
        border-top: var(--border);
    }

    .colophon__block--logos .row {
        border-top: var(--border);
        margin-bottom: var(--dotx05);
    }
    .colophon__what {
        font-weight: bold;
        margin-bottom: var(--dotx025);
    }
    .colophon__block--logos .colophon__what {
        margin-bottom: var(--dotx05);
    }
    .colophon__group {
        font-weight: bold;
        font-style: italic;
        padding-left: var(--dot);
        margin-bottom: var(--dotx025);
    }
    .colophon__logos {
        flex-wrap: wrap;
        column-gap: var(--dotx2);
        display: flex;
        flex-direction: row;
        column-gap: var(--dotx2);
        row-gap: var(--dot);
    }

    .colophon__logos__item {
        flex-grow: 0;
    }
    .colophon__logos__item img {
        object-fit: contain;
        border-radius: 0;
        max-height: 48px;
        width: auto;
    }
    @media screen and (max-width:478px) {
        .colophon__logos__item img {
            max-height: var(--dotx3);
        }
    }

/* >>> RELATED */
    .related .item,
    .related .empty {
        height: 100%;
        flex: 0 0 var(--colx4);
    }
    @media screen and (max-width:991px) {
        .related .item,
        .related .empty {
            flex: 0 0 var(--colx6);
        }
    }
    @media screen and (max-width:767px) {
        .related .item,
        .related .empty {
            flex: 0 0 var(--colx6);
        }
    }
    @media screen and (max-width:478px) {
        .related .item,
        .related .empty {
            flex: 0 0 var(--colx8);
        }
    }
    @media screen and (min-width:1280px) {
        .related .item,
        .related .empty {
            flex: 0 0 var(--colx3);
        }
    }
    @media screen and (min-width:1440px) {
        .related .item,
        .related .empty {
            flex: 0 0 var(--colx3);
        }
    }
    @media screen and (min-width:1920px) {
        .related .item,
        .related .empty {
            flex: 0 0 var(--colx2);
        }
    }

    /* >>> LIGHTBOX */
    .lightbox {
        display: none;
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .lightbox-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: relative;
    }

    .lightbox img {
        max-width: calc(100vw - calc(var(--dot) * 6));
        max-height: 90%;
        width: auto;
    }

    .close-button {
        position: absolute;
        top: var(--dot);
        right: var(--dot);
        font-size: var(--dot);
        color: #fff;
        cursor: inherit;
    }

    .prev-button,
    .next-button {
        position: absolute;
        top: 50%;
        font-size: var(--dot);
        color: #fff;
        background-color: transparent;
        border: none;
        cursor: inherit;
        transform: translateY(-50%);
    }

    .prev-button {
        left: var(--dot);
    }

    .next-button {
        right: var(--dot);
    }

/* || FONTS */
@font-face {
font-family: "ABCCamera";
src: url(/assets/fonts/ABCCamera-Regular.otf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "ABCCamera";
src: url(/assets/fonts/ABCCamera-Medium.otf);
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "ABCCamera";
src: url(/assets/fonts/ABCCamera-RegularItalic.otf);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "ABCCamera";
src: url(/assets/fonts/ABCCamera-MediumItalic.otf);
font-weight: bold;
font-style: italic;
}

@font-face {
font-family: "ABCCameraPlain";
src: url(/assets/fonts/ABCCameraPlain-Regular.otf);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "ABCCameraPlain";
src: url(/assets/fonts/ABCCamera-Medium.otf);
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "ABCCameraPlain";
src: url(/assets/fonts/ABCCameraPlain-RegularItalic.otf);
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "ABCCameraPlain";
src: url(/assets/fonts/ABCCamera-MediumItalic.otf);
font-weight: bold;
font-style: italic;
}






        

   

/* || TEMPORARY */

.temporary {
    display: flex;
    flex-direction: column;
    height: calc(var(--main-vh) - var(--footer-height) - var(--dot));
    padding-top: var(--dot);
    padding-bottom: var(--dot);
}
.temporary__figure {
    flex-grow: 1;
    height: 100%;
}
.temporary__message {
    font-size: var(--fs-small);
    padding-top: var(--dotx05);
    padding-bottom: var(--dotx05);
    display: none;
}

@media screen and (max-width: 767px) {
    .temporary__message {
        display: block;
    }
}