/* =========================================
   SECOND SOURCE
   IMAGES
========================================= */


/* =========================================
   PAGE
========================================= */

body {
    background:
        #050505;
}


body.viewer-open {
    overflow:
        hidden;
}


/* =========================================
   ARCHIVE

   Everything is constructed around
   one exact vertical centre axis.
========================================= */

.archive {
    width:
        100%;

    max-width:
        1440px;

    margin:
        0 auto;

    padding:
        110px
        48px
        150px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        150px;
}



/* =========================================
   SINGLE IMAGE ROW
========================================= */

.archive-single {
    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.archive-single-large
.archive-image-button {
    width:
        min(
            76vw,
            1040px
        );
}


.archive-single-medium
.archive-image-button {
    width:
        min(
            54vw,
            720px
        );
}



/* =========================================
   MIRRORED PAIR

   Two equal columns with the centre of
   the gap sitting exactly on page centre.
========================================= */

.archive-pair {
    width:
        min(
            88vw,
            1120px
        );

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        90px;

    align-items:
        center;
}



/* =========================================
   IMAGE BUTTON
========================================= */

.archive-image-button {
    display:
        block;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        zoom-in;

    appearance:
        none;

    -webkit-appearance:
        none;
}


.archive-image-button img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    margin:
        0 auto;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-touch-callout:
        none;

    transition:
        opacity
        0.25s
        ease;
}


.archive-image-button:hover img {
    opacity:
        0.76;
}


.archive-image-button:focus-visible {
    outline:
        1px solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    outline-offset:
        10px;
}



/* =========================================
   VIEWER
========================================= */

.gallery-viewer {
    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    width:
        100vw;

    height:
        100dvh;

    display:
        none;

    grid-template-rows:
        64px
        minmax(
            0,
            1fr
        )
        56px;

    overflow:
        hidden;

    background:
        rgba(
            0,
            0,
            0,
            0.99
        );
}


.gallery-viewer.is-open {
    display:
        grid;
}



/* =========================================
   VIEWER TOP
========================================= */

.viewer-topbar {
    position:
        relative;

    width:
        100%;

    padding:
        0
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );
}


.viewer-count {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-size:
        var(
            --font-small
        );

    letter-spacing:
        0.22em;

    white-space:
        nowrap;
}


.viewer-close {
    padding:
        8px
        0;

    color:
        #ffffff;

    background:
        transparent;

    border:
        0;

    font-family:
        "Microgramma",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        var(
            --font-small
        );

    letter-spacing:
        0.2em;

    cursor:
        pointer;
}



/* =========================================
   VIEWER STAGE
========================================= */

.viewer-stage {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        82px
        minmax(
            0,
            1fr
        )
        82px;

    align-items:
        stretch;

    overflow:
        hidden;
}



/* =========================================
   IMAGE AREA
========================================= */

.viewer-image-area {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    padding:
        22px;

    touch-action:
        none;

    overscroll-behavior:
        contain;
}


.viewer-image-area.is-zoomed {
    cursor:
        grab;
}


.viewer-image {
    display:
        block;

    max-width:
        100%;

    max-height:
        100%;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    transform-origin:
        center
        center;

    will-change:
        transform;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-touch-callout:
        none;
}



/* =========================================
   ARROWS

   Perfect mirror positions either
   side of the image.
========================================= */

.viewer-arrow {
    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    background:
        transparent;

    border:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        22px;

    cursor:
        pointer;

    transition:
        color
        0.2s
        ease;
}


.viewer-arrow:hover {
    color:
        #ffffff;
}



/* =========================================
   BOTTOM
========================================= */

.viewer-bottom {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size:
        8px;

    letter-spacing:
        0.22em;
}



/* =========================================
   TABLET
========================================= */

@media (
    max-width:
    950px
) {

    .archive {
        padding:
            90px
            30px
            120px;

        gap:
            120px;
    }


    .archive-pair {
        width:
            min(
                90vw,
                900px
            );

        gap:
            52px;
    }


    .archive-single-large
    .archive-image-button {
        width:
            min(
                82vw,
                900px
            );
    }


    .archive-single-medium
    .archive-image-button {
        width:
            min(
                62vw,
                650px
            );
    }

}



/* =========================================
   MOBILE
========================================= */

@media (
    max-width:
    750px
) {

    html,
    body {
        width:
            100%;

        max-width:
            100vw;

        overflow-x:
            hidden;
    }


    /* =====================================
       ARCHIVE

       Mobile becomes a single perfectly
       centred vertical axis.
    ====================================== */

    .archive {
        width:
            100%;

        max-width:
            100vw;

        padding:
            64px
            14px
            90px;

        gap:
            84px;
    }


    .archive-single-large
    .archive-image-button,

    .archive-single-medium
    .archive-image-button {
        width:
            min(
                88vw,
                620px
            );

        margin:
            0 auto;
    }


    .archive-pair {
        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        gap:
            84px;
    }


    .archive-pair
    .archive-image-button {
        width:
            min(
                78vw,
                520px
            );

        margin:
            0 auto;
    }


    /* =====================================
       VIEWER
    ====================================== */

    .gallery-viewer {
        width:
            100vw;

        max-width:
            100vw;

        grid-template-rows:
            58px
            minmax(
                0,
                1fr
            )
            48px;
    }


    .viewer-topbar {
        padding:
            0
            16px;
    }


    .viewer-stage {
        grid-template-columns:
            42px
            minmax(
                0,
                1fr
            )
            42px;
    }


    .viewer-image-area {
        padding:
            8px
            2px;
    }


    .viewer-arrow {
        font-size:
            19px;
    }


    .viewer-bottom {
        font-size:
            7px;

        letter-spacing:
            0.16em;
    }

}