/* =====================================================
   NXA.CO — 3D WEDDING ARCHIVE GALLERY
   ISOLATED GALLERY CSS
===================================================== */


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

.gallery-3d-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            #211313 0%,
            #0c0808 46%,
            #030303 100%
        );

    color: #FFFFFF;
}


/* subtle texture */

.gallery-3d-page::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .06;

    background-image:
        url("assets/bg.texture.jpg");

    background-size:
        cover;

    background-position:
        center;
}


/* =====================================================
   MAIN HERO
===================================================== */

.gallery-3d-hero {
    position: relative;

    z-index: 1;

    width: 100%;
    min-height: calc(100vh - 88px);

    padding:
        30px 4vw
        48px;

    display: flex;
    flex-direction: column;
}


/* =====================================================
   TOP BAR
===================================================== */

.gallery-3d-topbar {
    position: relative;

    z-index: 20;

    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 40px;

    padding-bottom: 14px;

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


.gallery-3d-brand {
    font-family:
        "Lora",
        serif;

    font-size:
        22px;

    font-weight:
        400;

    line-height:
        1;

    color:
        #FFFFFF;
}


.gallery-3d-menu {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;
}


.gallery-3d-menu span {
    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    line-height:
        1.35;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            .56
        );
}


/* =====================================================
   SMALL PAGE INTRO
===================================================== */

.gallery-3d-copy {
    position: absolute;

    z-index: 10;

    top: 90px;
    left: 4vw;

    max-width: 390px;
}


.gallery-3d-kicker {
    margin-bottom: 8px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            .45
        );
}


.gallery-3d-copy h1 {
    margin: 0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            28px,
            3vw,
            46px
        );

    font-weight:
        400;

    line-height:
        .95;

    letter-spacing:
        -.035em;

    color:
        #FFFFFF;
}


.gallery-3d-desc {
    max-width: 300px;

    margin-top: 10px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        9px;

    line-height:
        1.65;

    color:
        rgba(
            255,
            255,
            255,
            .46
        );
}


/* =====================================================
   3D STAGE
===================================================== */

.gallery-3d-stage {
    position: relative;

    z-index: 5;

    width: 100%;

    height:
        min(
            700px,
            72vh
        );

    min-height:
        520px;

    margin-top:
        25px;

    perspective:
        1500px;

    perspective-origin:
        50% 45%;

    transform-style:
        preserve-3d;

    user-select:
        none;

    cursor:
        grab;
}


.gallery-3d-stage.is-dragging {
    cursor:
        grabbing;
}


/* =====================================================
   3D WHEEL
===================================================== */

.gallery-3d-wheel {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style:
        preserve-3d;
}


/* =====================================================
   CARDS
===================================================== */

.gallery-3d-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            19vw,
            270px
        );

    height:
        min(
            28vw,
            390px
        );

    min-width:
        200px;

    min-height:
        290px;

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

    will-change:
        transform,
        opacity,
        filter;

    cursor:
        pointer;

    transition:
        opacity .3s ease,
        filter .3s ease;
}


/* =====================================================
   CARD INNER
===================================================== */

.gallery-3d-card-inner {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background:
        #151111;

    box-shadow:
        0 30px 65px
        rgba(
            0,
            0,
            0,
            .42
        );

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.gallery-3d-card:hover
.gallery-3d-card-inner {
    transform:
        translateY(-5px);

    box-shadow:
        0 40px 85px
        rgba(
            0,
            0,
            0,
            .55
        );
}


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

.gallery-3d-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .65s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );
}


.gallery-3d-card:hover img {
    transform:
        scale(
            1.035
        );
}


/* =====================================================
   IMAGE SHADE
===================================================== */

.gallery-3d-card-inner::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to top,

            rgba(
                0,
                0,
                0,
                .78
            )
            0%,

            rgba(
                0,
                0,
                0,
                .08
            )
            48%,

            transparent
            74%
        );
}


/* =====================================================
   CARD CAPTION
===================================================== */

.gallery-3d-card-caption {
    position: absolute;

    z-index: 3;

    left: 15px;
    right: 15px;
    bottom: 15px;

    color:
        #FFFFFF;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.gallery-3d-card-caption h3 {
    margin:
        0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            15px,
            1.25vw,
            19px
        );

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.02em;

    color:
        #FFFFFF;
}


.gallery-3d-card-caption p {
    margin-top:
        6px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            .58
        );
}


/* =====================================================
   ACTIVE CARD
===================================================== */

.gallery-3d-card.is-active {
    opacity:
        1 !important;

    filter:
        brightness(1)
        saturate(1) !important;
}


.gallery-3d-card.is-active
.gallery-3d-card-inner {
    box-shadow:
        0 40px 90px
        rgba(
            0,
            0,
            0,
            .65
        );
}


.gallery-3d-card.is-active
.gallery-3d-card-caption h3 {
    color:
        #FFFFFF;
}


/* =====================================================
   BOTTOM ACTIVE INFORMATION
===================================================== */

.gallery-3d-info {
    position: relative;

    z-index: 20;

    width: 100%;

    margin-top:
        -16px;

    text-align:
        center;
}


.gallery-3d-counter {
    margin-bottom:
        8px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .16em;

    color:
        rgba(
            255,
            255,
            255,
            .44
        );
}


.gallery-3d-focus-title {
    margin:
        0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            27px,
            3vw,
            44px
        );

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.03em;

    color:
        #FFFFFF;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.gallery-3d-focus-subtitle {
    margin-top:
        7px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            .53
        );

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.gallery-3d-instruction {
    margin-top:
        15px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .06em;

    color:
        rgba(
            255,
            255,
            255,
            .32
        );
}


/* =====================================================
   SIDE FADE
===================================================== */

.gallery-3d-hero::before,
.gallery-3d-hero::after {
    content: "";

    position: absolute;

    top: 120px;
    bottom: 70px;

    z-index: 8;

    width:
        10vw;

    pointer-events:
        none;
}


.gallery-3d-hero::before {
    left:
        0;

    background:
        linear-gradient(
            90deg,

            rgba(
                3,
                3,
                3,
                .96
            ),

            transparent
        );
}


.gallery-3d-hero::after {
    right:
        0;

    background:
        linear-gradient(
            -90deg,

            rgba(
                3,
                3,
                3,
                .96
            ),

            transparent
        );
}


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

@media (
    max-width: 1100px
) {

    .gallery-3d-card {
        width:
            210px;

        height:
            310px;

        min-width:
            0;

        min-height:
            0;
    }


    .gallery-3d-copy {
        max-width:
            320px;
    }

}


/* =====================================================
   MOBILE / SMALL TABLET
===================================================== */

@media (
    max-width: 800px
) {

    .gallery-3d-hero {
        padding:
            24px 4vw
            45px;
    }


    .gallery-3d-topbar {
        align-items:
            flex-start;
    }


    .gallery-3d-menu {
        display:
            none;
    }


    .gallery-3d-copy {
        position:
            relative;

        top:
            auto;

        left:
            auto;

        margin-top:
            35px;

        max-width:
            100%;

        text-align:
            center;
    }


    .gallery-3d-copy h1 {
        font-size:
            38px;
    }


    .gallery-3d-desc {
        margin:
            11px auto 0;
    }


    .gallery-3d-stage {
        height:
            510px;

        min-height:
            0;

        margin-top:
            5px;
    }


    .gallery-3d-card {
        width:
            175px;

        height:
            255px;
    }


    .gallery-3d-info {
        margin-top:
            -8px;
    }


    .gallery-3d-hero::before,
    .gallery-3d-hero::after {
        display:
            none;
    }

}


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

@media (
    max-width: 550px
) {

    .gallery-3d-hero {
        min-height:
            calc(
                100vh - 75px
            );
    }


    .gallery-3d-brand {
        font-size:
            18px;
    }


    .gallery-3d-copy {
        margin-top:
            27px;
    }


    .gallery-3d-copy h1 {
        font-size:
            33px;
    }


    .gallery-3d-kicker {
        font-size:
            6px;
    }


    .gallery-3d-stage {
        height:
            430px;
    }


    .gallery-3d-card {
        width:
            145px;

        height:
            215px;
    }


    .gallery-3d-card-caption {
        left:
            10px;

        right:
            10px;

        bottom:
            10px;
    }


    .gallery-3d-card-caption h3 {
        font-size:
            13px;
    }


    .gallery-3d-card-caption p {
        font-size:
            6px;
    }


    .gallery-3d-focus-title {
        font-size:
            27px;
    }


    .gallery-3d-focus-subtitle {
        font-size:
            7px;
    }


    .gallery-3d-instruction {
        max-width:
            280px;

        margin:
            13px auto 0;

        line-height:
            1.6;
    }

}



/* =====================================================
   STORY EXPLORER — OUR APPROACH STYLE
===================================================== */

.story-explorer {
    position: relative;
    padding: 105px 5vw 115px;
    overflow: hidden;

    background-color: #FFFDF8;
    background-image: url("assets/bg.texture.jpg");
    background-repeat: repeat;
    background-position: center top;
    background-size: 900px auto;

    color: #2A201D;
}

.story-explorer-head {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 70px;
    align-items: end;

    padding-bottom: 24px;
    margin-bottom: 34px;

    border-bottom: 1px solid rgba(93,11,11,.18);
}

.story-explorer-kicker {
    margin: 0 0 13px;

    font-family: "Red Hat Display", sans-serif;
    font-size: 8px;
    letter-spacing: .18em;
    text-transform: uppercase;

    color: #5D0B0B;
}

.story-explorer-head h2 {
    margin: 0;

    font-family: "Lora", serif;
    font-size: clamp(44px, 5vw, 74px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.04em;

    color: #2A201D;
}

.story-explorer-head h2 em {
    color: #5D0B0B;
    font-weight: 400;
}

.story-explorer-note {
    max-width: 360px;
    margin: 0 0 4px auto;

    font-size: 11px;
    line-height: 1.7;

    color: #746A63;
}


/* =====================================================
   EXPANDING PANELS
===================================================== */

.story-explorer-panels {
    width: 100%;
    height: 610px;

    display: flex;
    gap: 6px;

    overflow: hidden;
}

.story-explorer-panel {
    position: relative;

    flex: .72;
    min-width: 0;
    height: 100%;

    padding: 0;
    border: 0;
    overflow: hidden;

    background: #D8C8B5;
    color: #FFFFFF;

    text-align: left;
    cursor: pointer;

    transition:
        flex .72s cubic-bezier(.2,.8,.2,1),
        transform .35s ease;
}

.story-explorer-panel.is-active {
    flex: 4.4;
}

.story-explorer-panels:hover
.story-explorer-panel:not(.is-active) {
    flex: .62;
}


/* =====================================================
   PHOTO
===================================================== */

.story-explorer-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.story-explorer-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.04);

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .45s ease;
}

.story-explorer-panel.is-active
.story-explorer-media img {
    transform: scale(1);
}

.story-explorer-panel:not(.is-active)
.story-explorer-media img {
    filter: brightness(.72) saturate(.72);
}

.story-explorer-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(45,0,0,.76) 0%,
            rgba(45,0,0,.12) 55%,
            rgba(45,0,0,.05) 100%
        );

    opacity: .55;

    transition: opacity .4s ease;
}

.story-explorer-panel.is-active
.story-explorer-shade {
    opacity: .34;
}


/* =====================================================
   NUMBER
===================================================== */

.story-explorer-number {
    position: absolute;
    top: 20px;
    left: 18px;
    z-index: 3;

    font-family: "Red Hat Display", sans-serif;
    font-size: 8px;
    letter-spacing: .15em;

    color: rgba(255,255,255,.70);
}


/* =====================================================
   COPY
===================================================== */

.story-explorer-copy {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 24px;

    z-index: 3;

    opacity: 0;
    transform: translateY(16px);

    transition:
        opacity .35s ease .12s,
        transform .5s cubic-bezier(.2,.8,.2,1) .08s;
}

.story-explorer-panel.is-active
.story-explorer-copy {
    opacity: 1;
    transform: translateY(0);
}

.story-explorer-copy h3 {
    margin: 0;

    font-family: "Lora", serif;
    font-size: clamp(27px, 3vw, 48px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.035em;

    color: #FFFFFF;
}

.story-explorer-copy p {
    margin-top: 9px;

    font-family: "Red Hat Display", sans-serif;
    font-size: 8px;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(255,255,255,.64);
}


/* =====================================================
   VIEW LABEL
===================================================== */

.story-explorer-open {
    position: absolute;

    right: 18px;
    top: 18px;

    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 11px;

    border: 1px solid rgba(255,255,255,.44);

    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .13em;

    color: #FFFFFF;

    opacity: 0;
    transform: translateY(-8px);

    transition:
        opacity .3s ease,
        transform .35s ease,
        background .25s ease,
        color .25s ease;
}

.story-explorer-panel.is-active
.story-explorer-open {
    opacity: 1;
    transform: translateY(0);
}

.story-explorer-panel.is-active
.story-explorer-open:hover {
    background: #FFFFFF;
    color: #5D0B0B;
}


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

.story-explorer-bottom {
    margin-top: 18px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .15em;

    color: rgba(93,11,11,.46);
}


/* =====================================================
   FULL PHOTO VIEWER
===================================================== */

.story-photo-viewer {
    position: fixed;
    inset: 0;

    z-index: 30000;

    padding: 28px;

    display: grid;
    place-items: center;

    background: rgba(18,4,4,.97);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .32s ease,
        visibility .32s ease;
}

.story-photo-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.story-photo-close {
    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 4;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255,255,255,.36);
    border-radius: 50%;

    background: transparent;
    color: #FFFFFF;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.story-photo-viewer-inner {
    width: min(1250px, 94vw);
    height: min(880px, 90vh);

    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 15px;
}

.story-photo-viewer-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;

    padding-bottom: 12px;

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

.story-photo-viewer-top > div:first-child span {
    font-family: "Red Hat Display", sans-serif;
    font-size: 8px;
    letter-spacing: .16em;

    color: rgba(255,255,255,.44);
}

.story-photo-viewer-top h3 {
    margin: 0;

    font-family: "Lora", serif;
    font-size: 26px;
    font-weight: 400;

    color: #FFFFFF;
}

.story-photo-viewer-top p {
    margin-top: 5px;

    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(255,255,255,.52);
}

.story-photo-viewer-media {
    min-height: 0;

    display: grid;
    place-items: center;

    overflow: hidden;
}

.story-photo-viewer-media img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        opacity .25s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.story-photo-viewer.is-changing
.story-photo-viewer-media img {
    opacity: .25;
    transform: scale(.985);
}

.story-photo-viewer-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,.16);
}

.story-photo-viewer-nav button {
    border: 0;
    background: transparent;

    font-family: "Red Hat Display", sans-serif;
    font-size: 8px;
    letter-spacing: .14em;

    color: rgba(255,255,255,.70);

    cursor: pointer;
}

.story-photo-viewer-nav button:hover {
    color: #FFFFFF;
}

body.story-photo-lock {
    overflow: hidden;
}


/* =====================================================
   REVEAL
===================================================== */

.story-explorer-head,
.story-explorer-panels,
.story-explorer-bottom {
    opacity: 0;
    transform: translateY(22px);

    transition:
        opacity .55s ease,
        transform .75s cubic-bezier(.2,.8,.2,1);
}

.story-explorer-head.is-visible,
.story-explorer-panels.is-visible,
.story-explorer-bottom.is-visible {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 1000px) {

    .story-explorer-panels {
        height: 560px;
    }

    .story-explorer-panel {
        flex: .58;
    }

    .story-explorer-panel.is-active {
        flex: 4;
    }
}


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

@media (max-width: 700px) {

    .story-explorer {
        padding: 80px 5vw 90px;
    }

    .story-explorer-head {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .story-explorer-note {
        margin-left: 0;
    }

    .story-explorer-panels {
        height: auto;

        flex-direction: column;
        gap: 7px;
    }

    .story-explorer-panel,
    .story-explorer-panel.is-active,
    .story-explorer-panels:hover
    .story-explorer-panel:not(.is-active) {
        flex: none;

        width: 100%;
        height: 92px;

        transition:
            height .6s cubic-bezier(.2,.8,.2,1);
    }

    .story-explorer-panel.is-active {
        height: 68vh;
        min-height: 480px;
    }

    .story-explorer-copy h3 {
        font-size: 34px;
    }

    .story-photo-viewer {
        padding: 18px;
    }

    .story-photo-viewer-inner {
        width: 100%;
        height: 88vh;
    }

    .story-photo-viewer-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .story-photo-close {
        top: 16px;
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .story-explorer-panel,
    .story-explorer-media img,
    .story-explorer-copy,
    .story-explorer-open,
    .story-photo-viewer-media img {
        transition: none !important;
    }
}


/* =====================================================
   TOP MOVING GALLERY — CLEAN PHOTO STRIPS
===================================================== */

.gallery-marquee-hero {
    position: relative;
    z-index: 2;

    padding: 115px 0 88px;
    overflow: hidden;

    background-color: #FFFDF8;
    background-image: url("assets/bg.texture.jpg");
    background-repeat: repeat;
    background-position: center top;
    background-size: 900px auto;

    color: #2A201D;
}

.gallery-marquee-heading {
    width: min(1100px, 90%);
    margin: 0 auto 48px;

    text-align: center;
}

.gallery-marquee-kicker {
    margin: 0 0 12px;

    font-family: "Red Hat Display", sans-serif;
    font-size: 8px;
    letter-spacing: .20em;
    text-transform: uppercase;

    color: #5D0B0B;
}

.gallery-marquee-heading h1 {
    margin: 0;

    font-family: "Lora", serif;
    font-size: clamp(50px, 6vw, 92px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.045em;

    color: #2A201D;
}

.gallery-marquee-heading h1 em {
    color: #5D0B0B;
    font-weight: 400;
}

.gallery-marquee-desc {
    max-width: 560px;
    margin: 18px auto 0;

    font-family: "Red Hat Display", sans-serif;
    font-size: 12px;
    line-height: 1.75;

    color: #746A63;
}

.gallery-marquee-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-marquee-row {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-marquee-track {
    display: flex;
    gap: 8px;

    width: max-content;

    will-change: transform;
}

.gallery-marquee-left
.gallery-marquee-track {
    animation:
        galleryMarqueeLeft
        46s
        linear
        infinite;
}

.gallery-marquee-right
.gallery-marquee-track {
    animation:
        galleryMarqueeRight
        50s
        linear
        infinite;
}

.gallery-marquee-row:hover
.gallery-marquee-track {
    animation-play-state: paused;
}


/* CARD */

.gallery-marquee-card {
    position: relative;

    flex: 0 0 300px;
    width: 300px;
    height: 220px;

    padding: 0;
    border: 0;

    overflow: hidden;

    background: #DDD2C7;

    cursor: pointer;
    text-align: left;
}

.gallery-marquee-card:nth-child(4n + 2) {
    width: 370px;
    flex-basis: 370px;
}

.gallery-marquee-card:nth-child(5n + 3) {
    width: 250px;
    flex-basis: 250px;
}

.gallery-marquee-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        filter .35s ease;
}

.gallery-marquee-card:hover img {
    transform: scale(1.05);
    filter: brightness(.92);
}

.gallery-marquee-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 18px;

    background:
        linear-gradient(
            to top,
            rgba(42,8,8,.70),
            rgba(42,8,8,.05) 62%,
            transparent
        );

    opacity: .25;

    transition: opacity .35s ease;
}

.gallery-marquee-card:hover
.gallery-marquee-overlay {
    opacity: 1;
}

.gallery-marquee-overlay h3 {
    margin: 0;

    font-family: "Lora", serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;

    color: #FFFFFF;

    transform: translateY(10px);
    opacity: 0;

    transition:
        transform .35s ease,
        opacity .3s ease;
}

.gallery-marquee-overlay p {
    margin: 7px 0 0;

    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(255,255,255,.68);

    transform: translateY(10px);
    opacity: 0;

    transition:
        transform .4s ease .03s,
        opacity .3s ease .03s;
}

.gallery-marquee-card:hover
.gallery-marquee-overlay h3,
.gallery-marquee-card:hover
.gallery-marquee-overlay p {
    transform: translateY(0);
    opacity: 1;
}


/* LOOP */

@keyframes galleryMarqueeLeft {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-50%,0,0);
    }

}

@keyframes galleryMarqueeRight {

    from {
        transform: translate3d(-50%,0,0);
    }

    to {
        transform: translate3d(0,0,0);
    }

}

.gallery-marquee-hint {
    margin-top: 26px;

    text-align: center;

    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .16em;

    color: rgba(93,11,11,.45);
}


/* =====================================================
   TOP GALLERY FULL PHOTO VIEWER
===================================================== */

.gallery-marquee-viewer {
    position: fixed;
    inset: 0;

    z-index: 32000;

    display: grid;
    place-items: center;

    padding: 28px;

    background: rgba(20,4,4,.97);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.gallery-marquee-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-marquee-viewer-close {
    position: absolute;

    top: 24px;
    right: 28px;

    z-index: 3;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;

    background: transparent;
    color: #FFFFFF;

    font-size: 24px;

    cursor: pointer;
}

.gallery-marquee-viewer-inner {
    width: min(1220px, 94vw);
    height: min(850px, 90vh);

    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
}

.gallery-marquee-viewer-meta {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px;

    padding-bottom: 12px;

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

.gallery-marquee-viewer-meta span {
    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .16em;

    color: rgba(255,255,255,.42);
}

.gallery-marquee-viewer-meta h3 {
    margin: 0;

    font-family: "Lora", serif;
    font-size: 26px;
    font-weight: 400;

    color: #FFFFFF;
}

.gallery-marquee-viewer-meta p {
    margin-top: 5px;

    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(255,255,255,.55);
}

.gallery-marquee-viewer-media {
    min-height: 0;

    display: grid;
    place-items: center;
}

.gallery-marquee-viewer-media img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 1;
    transform: scale(1);

    transition:
        opacity .25s ease,
        transform .4s cubic-bezier(.2,.8,.2,1);
}

.gallery-marquee-viewer.is-changing
.gallery-marquee-viewer-media img {
    opacity: .25;
    transform: scale(.985);
}

body.gallery-marquee-lock {
    overflow: hidden;
}


/* MOBILE */

@media (max-width: 700px) {

    .gallery-marquee-hero {
        padding: 90px 0 70px;
    }

    .gallery-marquee-heading {
        margin-bottom: 34px;
    }

    .gallery-marquee-heading h1 {
        font-size: 47px;
    }

    .gallery-marquee-desc {
        font-size: 11px;
    }

    .gallery-marquee-card {
        width: 220px;
        flex-basis: 220px;
        height: 165px;
    }

    .gallery-marquee-card:nth-child(4n + 2) {
        width: 270px;
        flex-basis: 270px;
    }

    .gallery-marquee-card:nth-child(5n + 3) {
        width: 190px;
        flex-basis: 190px;
    }

    .gallery-marquee-overlay {
        opacity: .58;
    }

    .gallery-marquee-overlay h3,
    .gallery-marquee-overlay p {
        opacity: 1;
        transform: none;
    }

    .gallery-marquee-overlay h3 {
        font-size: 18px;
    }

    .gallery-marquee-left
    .gallery-marquee-track {
        animation-duration: 34s;
    }

    .gallery-marquee-right
    .gallery-marquee-track {
        animation-duration: 38s;
    }

    .gallery-marquee-viewer {
        padding: 18px;
    }

    .gallery-marquee-viewer-inner {
        width: 100%;
        height: 88vh;
    }

    .gallery-marquee-viewer-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gallery-marquee-track {
        animation: none !important;
    }
}


/* =====================================================
   GALLERY PERFORMANCE OPTIMIZATION
===================================================== */

/* GPU-friendly transforms on the few elements that actually animate */
.gallery-3d-card,
.gallery-marquee-track,
.story-explorer-panel,
.story-explorer-media img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Avoid expensive filter effects on moving 3D cards */
.gallery-3d-card {
    filter: none !important;
}

/* Let browser skip paint/layout work when sections are off-screen */
.gallery-marquee-hero,
.gallery-3d-hero,
.story-explorer {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
}

/* Avoid fixed texture repaint cost */
.gallery-3d-page,
.gallery-marquee-hero,
.story-explorer {
    background-attachment: scroll !important;
}

/* Keep marquee animation lightweight */
.gallery-marquee-track {
    will-change: transform;
}

/* Do not keep will-change on every card permanently */
.gallery-3d-card {
    will-change: transform, opacity;
}

/* Reduce shadow cost slightly */
.gallery-3d-card-inner,
.story-explorer-panel {
    box-shadow: 0 18px 40px rgba(0,0,0,.26);
}

/* Keep hover polish without heavy filters */
.story-explorer-panel:not(.is-active)
.story-explorer-media img {
    filter: brightness(.82) saturate(.90);
}

/* On smaller devices, simplify even more */
@media (max-width: 900px) {

    .gallery-3d-card {
        filter: none !important;
    }

    .gallery-marquee-card:hover img,
    .story-explorer-panel:hover img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gallery-marquee-track {
        animation: none !important;
    }

    .gallery-3d-card,
    .story-explorer-panel,
    .story-explorer-media img {
        transition: none !important;
    }
}


/* =====================================================
   GALLERY — PHOTO-ONLY SECTION OVERRIDES
   No section headers. Keep only imagery / photo captions.
===================================================== */

/* TOP MOVING PHOTO STRIPS */
.gallery-marquee-hero {
    padding:
        0 0 8px !important;

    background:
        #FFFDF8
        url("assets/bg.texture.jpg")
        repeat
        center top / 900px auto !important;
}

.gallery-marquee-heading,
.gallery-marquee-hint {
    display: none !important;
}

.gallery-marquee-wrap {
    gap: 8px !important;
}


/* =====================================================
   FRAMES IN MOTION — BG.TEXTURE
===================================================== */

.gallery-3d-page {
    background-color: #FFFDF8 !important;

    background-image:
        linear-gradient(
            rgba(255, 253, 248, .88),
            rgba(255, 253, 248, .88)
        ),
        url("assets/bg.texture.jpg") !important;

    background-repeat:
        repeat,
        repeat !important;

    background-position:
        center top,
        center top !important;

    background-size:
        auto,
        900px auto !important;

    background-attachment:
        scroll !important;

    color: #2A201D !important;
}

.gallery-3d-page::before {
    content: none !important;
}

.gallery-3d-hero {
    min-height: auto !important;

    padding:
        24px 0 44px !important;

    background:
        transparent !important;
}

.gallery-3d-topbar,
.gallery-3d-copy,
.gallery-3d-info {
    display: none !important;
}

.gallery-3d-stage {
    margin-top: 0 !important;

    height:
        min(
            720px,
            78vh
        ) !important;

    min-height:
        540px !important;
}

.gallery-3d-hero::before,
.gallery-3d-hero::after {
    display: none !important;
}


/* =====================================================
   CLICK-EXPAND PHOTO SECTION
===================================================== */

.story-explorer {
    padding:
        8px 5vw
        90px !important;

    background:
        #FFFDF8
        url("assets/bg.texture.jpg")
        repeat
        center top / 900px auto !important;
}

.story-explorer-head,
.story-explorer-bottom {
    display: none !important;
}

.story-explorer-panels {
    margin-top: 0 !important;
}


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

@media (max-width: 700px) {

    .gallery-marquee-hero {
        padding:
            0 0 7px !important;
    }

    .gallery-3d-hero {
        padding:
            18px 0 30px !important;
    }

    .gallery-3d-stage {
        height:
            470px !important;

        min-height:
            0 !important;
    }

    .story-explorer {
        padding:
            7px 5vw
            70px !important;
    }
}


/* =====================================================
   TOP HORIZONTAL GALLERY — MANUAL SLIDE ONLY
   Keeps the existing card design, removes all auto motion.
===================================================== */

.gallery-manual-hero .gallery-marquee-row {
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    cursor: grab;
    touch-action: pan-x;
}

.gallery-manual-hero .gallery-marquee-row::-webkit-scrollbar {
    display: none;
}

.gallery-manual-hero .gallery-marquee-row.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.gallery-manual-hero .gallery-marquee-track,
.gallery-manual-hero .gallery-marquee-left .gallery-marquee-track,
.gallery-manual-hero .gallery-marquee-right .gallery-marquee-track {
    width: max-content !important;
    min-width: max-content;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
    contain: layout paint;
}

/* A little side breathing room while swiping */
.gallery-manual-hero .gallery-marquee-track {
    padding-left: 5vw;
    padding-right: 5vw;
}

/* Keep the existing editorial card sizing/design */
.gallery-manual-hero .gallery-marquee-card {
    scroll-snap-align: start;
}

/* Viewer becomes an album viewer */
.gallery-marquee-viewer-media {
    position: relative;
}

.gallery-marquee-viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;

    background: rgba(20,4,4,.38);
    color: #FFFFFF;

    font-size: 18px;
    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.gallery-marquee-viewer-nav:hover {
    background: #FFFDF8;
    color: #5D0B0B;
}

.gallery-marquee-viewer-prev {
    left: 18px;
}

.gallery-marquee-viewer-next {
    right: 18px;
}

#galleryMarqueeViewerCounter {
    min-width: 62px;
}

@media (max-width: 700px) {

    .gallery-manual-hero .gallery-marquee-track {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .gallery-marquee-viewer-nav {
        width: 40px;
        height: 40px;
    }

    .gallery-marquee-viewer-prev {
        left: 6px;
    }

    .gallery-marquee-viewer-next {
        right: 6px;
    }

}


/* =====================================================
   OUR WORK — REFERENCE STYLE / MANUAL SLIDE
===================================================== */

.work-gallery-section {
    padding:
        105px 0
        35px;

    overflow: hidden;

    background: #5D0B0B;
    color: #FFFDF8;
}

.work-gallery-intro {
    width:
        min(
            1380px,
            90vw
        );

    margin:
        0 auto
        58px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        50px;

    align-items:
        end;
}

.work-gallery-kicker {
    margin:
        0 0
        15px;

    font-size:
        8px;

    letter-spacing:
        .16em;

    color:
        rgba(255,253,248,.55);

    text-transform:
        uppercase;
}

.work-gallery-copy h1 {
    margin:
        0;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        clamp(
            48px,
            5.5vw,
            82px
        );

    font-weight:
        600;

    line-height:
        .92;

    letter-spacing:
        -.045em;

    color:
        #FFFDF8;
}

.work-gallery-desc {
    max-width:
        430px;

    margin-top:
        19px;

    font-size:
        11px;

    line-height:
        1.7;

    color:
        rgba(255,253,248,.62);
}

.work-gallery-side {
    display:
        flex;

    gap:
        28px;

    padding-bottom:
        7px;

    font-size:
        8px;

    letter-spacing:
        .14em;

    color:
        rgba(255,253,248,.48);
}

.work-gallery-rows {
    display:
        grid;

    gap:
        8px;
}

.work-gallery-row {
    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;

    -webkit-overflow-scrolling:
        touch;

    overscroll-behavior-x:
        contain;

    cursor:
        grab;

    touch-action:
        pan-x;

    user-select:
        none;
}

.work-gallery-row::-webkit-scrollbar {
    display:
        none;
}

.work-gallery-row.is-dragging {
    cursor:
        grabbing;
}

.work-gallery-track {
    width:
        max-content;

    display:
        flex;

    gap:
        8px;

    padding:
        0 5vw;
}

.work-gallery-card {
    position:
        relative;

    flex:
        0 0 auto;

    width:
        clamp(
            210px,
            19vw,
            310px
        );

    height:
        clamp(
            230px,
            22vw,
            355px
        );

    padding:
        0;

    border:
        0;

    overflow:
        hidden;

    background:
        #3C0707;

    cursor:
        pointer;

    text-align:
        left;
}

/* editorial rhythm like the reference */
.work-gallery-row:first-child
.work-gallery-card:nth-child(3n + 2) {
    width:
        clamp(
            190px,
            16vw,
            260px
        );
}

.work-gallery-row:first-child
.work-gallery-card:nth-child(3n + 3) {
    width:
        clamp(
            245px,
            22vw,
            360px
        );
}

.work-gallery-row:last-child
.work-gallery-card:nth-child(3n + 1) {
    width:
        clamp(
            250px,
            23vw,
            375px
        );
}

.work-gallery-row:last-child
.work-gallery-card:nth-child(3n + 2) {
    width:
        clamp(
            195px,
            17vw,
            270px
        );
}

.work-gallery-card img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .45s ease,
        filter .35s ease;
}

.work-gallery-card:hover img {
    transform:
        scale(1.035);

    filter:
        brightness(.78);
}

.work-gallery-card-overlay {
    position:
        absolute;

    inset:
        0;

    padding:
        18px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        linear-gradient(
            to top,
            rgba(35,0,0,.82),
            transparent 58%
        );

    opacity:
        0;

    transition:
        opacity .28s ease;
}

.work-gallery-card:hover
.work-gallery-card-overlay {
    opacity:
        1;
}

.work-gallery-card-overlay h3 {
    margin:
        0;

    font-family:
        "Lora",
        serif;

    font-size:
        19px;

    font-weight:
        400;

    color:
        #FFFFFF;
}

.work-gallery-card-overlay p {
    margin-top:
        4px;

    font-size:
        8px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.62);
}

.work-gallery-card-overlay > span {
    align-self:
        flex-end;

    font-size:
        7px;

    letter-spacing:
        .14em;

    color:
        rgba(255,255,255,.72);
}


/* =====================================================
   ALBUM POPUP
===================================================== */

.work-album-viewer {
    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    padding:
        28px 4vw
        22px;

    display:
        grid;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto;

    gap:
        18px;

    background:
        rgba(20,3,3,.97);

    color:
        #FFFFFF;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.work-album-viewer.is-open {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}

.work-album-viewer-top {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        30px;
}

.work-album-viewer-top span {
    display:
        block;

    margin-bottom:
        8px;

    font-size:
        8px;

    letter-spacing:
        .15em;

    color:
        rgba(255,255,255,.48);
}

.work-album-viewer-top h3 {
    margin:
        0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            25px,
            2.8vw,
            42px
        );

    font-weight:
        400;
}

.work-album-viewer-top p {
    margin-top:
        5px;

    font-size:
        8px;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.48);
}

.work-album-close {
    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:
        50%;

    background:
        transparent;

    color:
        #FFFFFF;

    font-size:
        25px;

    cursor:
        pointer;
}

.work-album-stage {
    position:
        relative;

    min-height:
        0;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;
}

.work-album-stage img {
    max-width:
        min(
            1100px,
            83vw
        );

    max-height:
        69vh;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    opacity:
        1;

    transform:
        scale(1);

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.work-album-viewer.is-changing
.work-album-stage img {
    opacity:
        .45;

    transform:
        scale(.992);
}

.work-album-nav {
    position:
        absolute;

    top:
        50%;

    z-index:
        3;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.3);

    border-radius:
        50%;

    background:
        rgba(60,7,7,.46);

    color:
        #FFFFFF;

    cursor:
        pointer;

    transform:
        translateY(-50%);
}

.work-album-prev {
    left:
        0;
}

.work-album-next {
    right:
        0;
}

.work-album-strip {
    width:
        100%;

    display:
        flex;

    gap:
        6px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

    padding-bottom:
        2px;
}

.work-album-strip::-webkit-scrollbar {
    display:
        none;
}

.work-album-thumb {
    flex:
        0 0 auto;

    width:
        54px;

    height:
        54px;

    padding:
        0;

    border:
        1px solid
        transparent;

    background:
        transparent;

    opacity:
        .42;

    cursor:
        pointer;

    transition:
        opacity .2s ease,
        border-color .2s ease;
}

.work-album-thumb img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}

.work-album-thumb.is-active {
    opacity:
        1;

    border-color:
        rgba(255,255,255,.8);
}

body.work-album-lock {
    overflow:
        hidden;
}

@media (max-width: 700px) {

    .work-gallery-section {
        padding-top:
            80px;
    }

    .work-gallery-intro {
        grid-template-columns:
            1fr;

        gap:
            22px;

        margin-bottom:
            38px;
    }

    .work-gallery-side {
        justify-content:
            space-between;
    }

    .work-gallery-card,
    .work-gallery-row:first-child
    .work-gallery-card:nth-child(3n + 2),
    .work-gallery-row:first-child
    .work-gallery-card:nth-child(3n + 3),
    .work-gallery-row:last-child
    .work-gallery-card:nth-child(3n + 1),
    .work-gallery-row:last-child
    .work-gallery-card:nth-child(3n + 2) {
        width:
            62vw;

        height:
            78vw;

        max-width:
            285px;

        max-height:
            365px;
    }

    .work-gallery-card-overlay {
        opacity:
            1;

        background:
            linear-gradient(
                to top,
                rgba(35,0,0,.74),
                transparent 52%
            );
    }

    .work-album-viewer {
        padding:
            20px 4vw
            15px;
    }

    .work-album-stage img {
        max-width:
            88vw;

        max-height:
            62vh;
    }

    .work-album-nav {
        width:
            39px;

        height:
            39px;
    }

    .work-album-thumb {
        width:
            46px;

        height:
            46px;
    }

}


/* =====================================================
   REFERENCE GRID LOOK — BLACK HORIZONTAL ALBUM ROWS
===================================================== */

.work-gallery-section {
    padding: 70px 0 36px !important;
    background: #0A0A0A !important;
    color: #FFFFFF !important;
}

.work-gallery-intro {
    width: min(1380px, 92vw) !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px;
    border-bottom: 1px dotted rgba(255,255,255,.55);
}

.work-gallery-copy h1 {
    color: #FFFFFF !important;
    font-size: clamp(42px, 4.4vw, 68px) !important;
}

.work-gallery-kicker,
.work-gallery-desc,
.work-gallery-side {
    color: rgba(255,255,255,.6) !important;
}

.work-gallery-rows {
    gap: 22px !important;
}

.work-gallery-row {
    overflow-x: auto !important;
    scrollbar-width: none;
    cursor: grab;
}

.work-gallery-row::-webkit-scrollbar {
    display: none;
}

.work-gallery-track {
    gap: 16px !important;
    padding: 0 4.5vw 2px !important;
}

.work-gallery-card {
    width: 380px !important;
    height: 315px !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: 0 !important;
}

.work-gallery-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    border-bottom: 1px dotted rgba(255,255,255,.5);
}

.work-gallery-card img {
    height: 255px !important;
    border-radius: 10px;
    object-fit: cover;
    filter: saturate(.75) contrast(1.04);
}

.work-gallery-card:hover img {
    transform: none !important;
    filter: saturate(.95) contrast(1.02);
}

.work-gallery-card-overlay {
    position: relative !important;
    inset: auto !important;
    height: 60px;
    padding: 10px 8px 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 14px;
    color: #FFFFFF;
}

.work-gallery-card-overlay::before {
    content: "WEDDING";
    font-family: "Red Hat Display", sans-serif;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .12em;
    color: rgba(255,255,255,.72);
}

.work-gallery-card-overlay > div {
    min-width: 0;
}

.work-gallery-card-overlay h3 {
    font-family: "Red Hat Display", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-gallery-card-overlay p {
    margin-top: 3px !important;
    font-size: 7px !important;
    color: rgba(255,255,255,.48) !important;
}

.work-gallery-card-overlay > span {
    align-self: start !important;
    font-size: 7px !important;
    color: rgba(255,255,255,.8) !important;
    white-space: nowrap;
}

.work-gallery-row:first-child .work-gallery-card:nth-child(3n + 2),
.work-gallery-row:first-child .work-gallery-card:nth-child(3n + 3),
.work-gallery-row:last-child .work-gallery-card:nth-child(3n + 1),
.work-gallery-row:last-child .work-gallery-card:nth-child(3n + 2) {
    width: 380px !important;
}

@media (max-width: 700px) {
    .work-gallery-card,
    .work-gallery-row:first-child .work-gallery-card:nth-child(3n + 2),
    .work-gallery-row:first-child .work-gallery-card:nth-child(3n + 3),
    .work-gallery-row:last-child .work-gallery-card:nth-child(3n + 1),
    .work-gallery-row:last-child .work-gallery-card:nth-child(3n + 2) {
        width: 78vw !important;
        max-width: 340px;
        height: 290px !important;
    }

    .work-gallery-card img {
        height: 230px !important;
    }
}


/* =====================================================
   FINAL GALLERY — BG.TEXTURE + 4 HORIZONTAL ALBUM ROWS
===================================================== */

.work-gallery-section {
    padding:
        82px 0
        48px !important;

    background-color:
        #5D0B0B !important;

    background-image:
        url("/nxa.cowebsite/assets/bg.texture.jpg") !important;

    background-repeat:
        repeat !important;

    background-position:
        center top !important;

    background-size:
        900px auto !important;

    background-blend-mode:
        multiply;

    color:
        #FFFFFF !important;
}


/* INTRO */

.work-gallery-intro {
    width:
        min(
            1380px,
            92vw
        ) !important;

    margin:
        0 auto
        34px !important;

    padding-bottom:
        18px;

    border-bottom:
        1px dotted
        rgba(255,255,255,.50);
}


.work-gallery-copy h1 {
    color:
        #FFFFFF !important;
}


.work-gallery-kicker,
.work-gallery-desc,
.work-gallery-side {
    color:
        rgba(255,255,255,.62) !important;
}


/* FOUR ROWS */

.work-gallery-rows {
    display:
        grid !important;

    gap:
        24px !important;
}


.work-gallery-row {
    width:
        100%;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;

    -webkit-overflow-scrolling:
        touch;

    overscroll-behavior-x:
        contain;

    cursor:
        grab;

    touch-action:
        pan-x;
}


.work-gallery-row::-webkit-scrollbar {
    display:
        none;
}


.work-gallery-row.is-dragging {
    cursor:
        grabbing;
}


/* TRACK */

.work-gallery-track {
    width:
        max-content !important;

    display:
        flex !important;

    gap:
        16px !important;

    padding:
        0 4.5vw
        2px !important;

    transform:
        none !important;

    animation:
        none !important;
}


/* ALBUM CARD */

.work-gallery-card,
.work-gallery-row:first-child
.work-gallery-card:nth-child(3n + 2),
.work-gallery-row:first-child
.work-gallery-card:nth-child(3n + 3),
.work-gallery-row:last-child
.work-gallery-card:nth-child(3n + 1),
.work-gallery-row:last-child
.work-gallery-card:nth-child(3n + 2) {

    position:
        relative;

    flex:
        0 0 auto;

    width:
        clamp(
            310px,
            24vw,
            390px
        ) !important;

    height:
        320px !important;

    padding:
        0;

    overflow:
        visible !important;

    border:
        0;

    background:
        transparent !important;

    text-align:
        left;

    cursor:
        pointer;
}


/* dotted divider under each album */

.work-gallery-card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -15px;

    border-bottom:
        1px dotted
        rgba(255,255,255,.46);
}


/* IMAGE */

.work-gallery-card img {
    width:
        100%;

    height:
        255px !important;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        8px;

    filter:
        saturate(.88)
        contrast(1.02);

    transition:
        transform .35s ease,
        filter .35s ease;
}


.work-gallery-card:hover img {
    transform:
        scale(1.01) !important;

    filter:
        saturate(1)
        contrast(1.02);
}


/* META BELOW IMAGE */

.work-gallery-card-overlay {
    position:
        relative !important;

    inset:
        auto !important;

    height:
        65px;

    padding:
        10px 6px
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        auto
        1fr
        auto;

    gap:
        14px;

    align-items:
        start;

    background:
        transparent !important;

    opacity:
        1 !important;

    color:
        #FFFFFF;
}


.work-gallery-card-overlay::before {
    content:
        "WEDDING";

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        .13em;

    color:
        rgba(255,255,255,.66);
}


.work-gallery-card-overlay > div {
    min-width:
        0;
}


.work-gallery-card-overlay h3 {
    margin:
        0;

    font-family:
        "Red Hat Display",
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1.15;

    letter-spacing:
        .01em;

    text-transform:
        uppercase;

    color:
        #FFFFFF !important;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.work-gallery-card-overlay p {
    margin-top:
        4px !important;

    font-size:
        7px !important;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.48) !important;
}


.work-gallery-card-overlay > span {
    align-self:
        start !important;

    font-size:
        7px !important;

    letter-spacing:
        .10em;

    white-space:
        nowrap;

    color:
        rgba(255,255,255,.74) !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .work-gallery-section {
        padding-top:
            66px !important;
    }


    .work-gallery-intro {
        margin-bottom:
            28px !important;
    }


    .work-gallery-rows {
        gap:
            22px !important;
    }


    .work-gallery-card,
    .work-gallery-row:first-child
    .work-gallery-card:nth-child(3n + 2),
    .work-gallery-row:first-child
    .work-gallery-card:nth-child(3n + 3),
    .work-gallery-row:last-child
    .work-gallery-card:nth-child(3n + 1),
    .work-gallery-row:last-child
    .work-gallery-card:nth-child(3n + 2) {

        width:
            78vw !important;

        max-width:
            340px;

        height:
            292px !important;
    }


    .work-gallery-card img {
        height:
            225px !important;
    }

}


/* =====================================================
   ALBUM POPUP — VERTICAL SCROLL VERSION
===================================================== */

.work-album-viewer {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: block !important;

    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: rgba(19, 3, 3, .985) !important;
    color: #FFFFFF;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .28s ease,
        visibility .28s ease;

    scrollbar-width: thin;
}

.work-album-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.work-album-viewer-top {
    position: sticky !important;
    top: 0;

    z-index: 30;

    width: 100%;

    padding:
        22px 4vw
        18px !important;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;

    background:
        linear-gradient(
            to bottom,
            rgba(19,3,3,.98),
            rgba(19,3,3,.92)
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(10px);
}

.work-album-viewer-top span {
    display: block;

    margin-bottom: 8px;

    font-size: 8px;
    letter-spacing: .15em;

    color:
        rgba(255,255,255,.50);
}

.work-album-viewer-top h3 {
    margin: 0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            26px,
            3vw,
            44px
        );

    font-weight: 400;
}

.work-album-viewer-top p {
    margin-top: 5px;

    font-size: 8px;

    letter-spacing: .14em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.50);
}

.work-album-close {
    position: sticky;
    top: 18px;

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    background:
        rgba(255,255,255,.04);

    color: #FFFFFF;

    font-size: 25px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease;
}

.work-album-close:hover {
    background: #FFFDF8;
    color: #5D0B0B;
}


/* Scrollable album body */

.work-album-scroll {
    width:
        min(
            1180px,
            92vw
        );

    margin:
        0 auto;

    padding:
        26px 0
        80px;

    display:
        grid;

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

    gap:
        12px;
}


/* photos */

.work-album-scroll-item {
    position: relative;

    overflow: hidden;

    background: #2B0A0A;
}

.work-album-scroll-item img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: cover;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.work-album-scroll-item:hover img {
    transform: scale(1.01);
}


/* Editorial varied sizing */

.work-album-scroll-item:nth-child(5n + 1) {
    grid-column: span 2;
}

.work-album-scroll-item:nth-child(5n + 1) img {
    max-height: 78vh;
    object-fit: cover;
}

.work-album-scroll-item:nth-child(5n + 4) {
    grid-column: span 2;
}

.work-album-scroll-item:nth-child(5n + 4) img {
    max-height: 72vh;
    object-fit: cover;
}


/* Small photo index */

.work-album-photo-index {
    position: absolute;

    right: 10px;
    bottom: 9px;

    z-index: 2;

    padding:
        5px 7px;

    background:
        rgba(20,3,3,.56);

    color:
        rgba(255,255,255,.78);

    font-size: 7px;

    letter-spacing: .12em;
}


/* remove old single-image viewer pieces if they exist */

.work-album-stage,
.work-album-strip,
.work-album-nav,
.work-album-prev,
.work-album-next {
    display: none !important;
}


body.work-album-lock {
    overflow: hidden;
}


/* MOBILE */

@media (max-width: 700px) {

    .work-album-viewer-top {
        padding:
            18px 4vw
            15px !important;
    }

    .work-album-viewer-top h3 {
        font-size:
            28px;
    }

    .work-album-close {
        width: 40px;
        height: 40px;
    }

    .work-album-scroll {
        width: 94vw;

        padding:
            14px 0
            55px;

        grid-template-columns:
            1fr;

        gap:
            9px;
    }

    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(5n + 1),
    .work-album-scroll-item:nth-child(5n + 4) {
        grid-column:
            auto;
    }

    .work-album-scroll-item img,
    .work-album-scroll-item:nth-child(5n + 1) img,
    .work-album-scroll-item:nth-child(5n + 4) img {
        max-height:
            none;

        object-fit:
            cover;
    }

}


/* =====================================================
   REMOVE LEGACY 3D GALLERY SECTION
===================================================== */

.gallery-3d-hero,
.gallery-3d-stage,
.gallery-3d-wheel,
.gallery-3d-info {
    display: none !important;
}


/* =====================================================
   CURVED WEDDING SHOWCASE
   Reference-inspired perspective strip
===================================================== */

.curved-showcase {
    position: relative;

    padding:
        90px 0
        105px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(36, 12, 12, .92),
            rgba(20, 7, 7, .96)
        ),
        url("/nxa.cowebsite/assets/bg.texture.jpg");

    background-repeat:
        repeat;

    background-position:
        center top;

    background-size:
        auto,
        900px auto;

    color:
        #FFFFFF;
}


.curved-showcase-head {
    width:
        min(
            1380px,
            90vw
        );

    margin:
        0 auto
        38px;

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        40px;
}


.curved-showcase-head p {
    margin:
        0 0
        10px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.46);
}


.curved-showcase-head h2 {
    margin:
        0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    font-weight:
        400;

    line-height:
        .94;

    letter-spacing:
        -.04em;

    color:
        #FFFFFF;
}


.curved-showcase-head h2 em {
    color:
        rgba(255,255,255,.50);

    font-weight:
        400;
}


.curved-showcase-head > span {
    padding-bottom:
        6px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .14em;

    color:
        rgba(255,255,255,.42);
}


/* VIEWPORT */

.curved-showcase-viewport {
    position:
        relative;

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding:
        25px 0
        38px;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;

    -webkit-overflow-scrolling:
        touch;

    overscroll-behavior-x:
        contain;

    cursor:
        grab;

    perspective:
        1500px;

    touch-action:
        pan-x;

    user-select:
        none;
}


.curved-showcase-viewport::-webkit-scrollbar {
    display:
        none;
}


.curved-showcase-viewport.is-dragging {
    cursor:
        grabbing;
}


/* TRACK */

.curved-showcase-track {
    width:
        max-content;

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

    padding:
        0 11vw;

    transform-style:
        preserve-3d;
}


/* CARD */

.curved-showcase-card {
    --curve-x:
        0px;

    --curve-y:
        0px;

    --curve-rotate:
        0deg;

    --curve-scale:
        1;

    --curve-opacity:
        1;

    position:
        relative;

    flex:
        0 0 auto;

    width:
        clamp(
            220px,
            20vw,
            320px
        );

    height:
        clamp(
            315px,
            29vw,
            445px
        );

    overflow:
        hidden;

    background:
        #220909;

    opacity:
        var(--curve-opacity);

    transform:
        translateY(
            var(--curve-y)
        )
        rotateY(
            var(--curve-rotate)
        )
        scale(
            var(--curve-scale)
        );

    transform-origin:
        center center;

    transition:
        transform .24s ease-out,
        opacity .24s ease-out;

    box-shadow:
        0 24px 58px
        rgba(0,0,0,.30);

    will-change:
        transform,
        opacity;
}


/* no rounded corners */
.curved-showcase-card,
.curved-showcase-card img {
    border-radius:
        0 !important;
}


.curved-showcase-card img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    pointer-events:
        none;
}


.curved-showcase-shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(20,2,2,.78),
            rgba(20,2,2,.06) 58%,
            transparent
        );

    pointer-events:
        none;
}


.curved-showcase-copy {
    position:
        absolute;

    z-index:
        2;

    left:
        18px;

    right:
        18px;

    bottom:
        18px;
}


.curved-showcase-copy > span {
    display:
        block;

    margin-bottom:
        7px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .16em;

    color:
        rgba(255,255,255,.45);
}


.curved-showcase-copy h3 {
    margin:
        0;

    font-family:
        "Lora",
        serif;

    font-size:
        clamp(
            20px,
            1.7vw,
            27px
        );

    font-weight:
        400;

    line-height:
        1;

    color:
        #FFFFFF;
}


.curved-showcase-copy p {
    margin-top:
        6px;

    font-family:
        "Red Hat Display",
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    color:
        rgba(255,255,255,.54);
}


/* edge fades like the reference */
.curved-showcase::before,
.curved-showcase::after {
    content:
        "";

    position:
        absolute;

    z-index:
        7;

    top:
        170px;

    bottom:
        65px;

    width:
        7vw;

    pointer-events:
        none;
}


.curved-showcase::before {
    left:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(20,7,7,.94),
            transparent
        );
}


.curved-showcase::after {
    right:
        0;

    background:
        linear-gradient(
            -90deg,
            rgba(20,7,7,.94),
            transparent
        );
}


/* MOBILE */

@media (max-width: 700px) {

    .curved-showcase {
        padding:
            68px 0
            72px;
    }


    .curved-showcase-head {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;

        margin-bottom:
            22px;
    }


    .curved-showcase-head h2 {
        font-size:
            43px;
    }


    .curved-showcase-track {
        gap:
            14px;

        padding:
            0 8vw;
    }


    .curved-showcase-card {
        width:
            62vw;

        max-width:
            250px;

        height:
            82vw;

        max-height:
            355px;
    }


    .curved-showcase::before,
    .curved-showcase::after {
        display:
            none;
    }

}


/* =====================================================
   CURVED SHOWCASE — TEXTURE BACKGROUND + VIDEO VERSION
===================================================== */

.curved-showcase {
    background-color:
        #FFFDF8 !important;

    background-image:
        url("/nxa.cowebsite/assets/bg.texture.jpg") !important;

    background-repeat:
        repeat !important;

    background-position:
        center top !important;

    background-size:
        900px auto !important;

    color:
        #2A201D !important;
}


/* remove the large title area */
.curved-showcase-head-minimal {
    justify-content:
        flex-end !important;

    margin-bottom:
        18px !important;
}


.curved-showcase-head-minimal > span {
    color:
        rgba(93,11,11,.56) !important;
}


/* edge fades now blend into the texture */
.curved-showcase::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,253,248,.96),
            transparent
        ) !important;
}


.curved-showcase::after {
    background:
        linear-gradient(
            -90deg,
            rgba(255,253,248,.96),
            transparent
        ) !important;
}


/* VIDEO */

.curved-showcase-video {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    pointer-events:
        none;

    border-radius:
        0 !important;

    background:
        #2A201D;
}


/* keep cards square / sharp */
.curved-showcase-card,
.curved-showcase-video {
    border-radius:
        0 !important;
}


/* lighter card shadow on cream texture */
.curved-showcase-card {
    box-shadow:
        0 24px 55px
        rgba(60,34,27,.18) !important;
}


/* softer caption shade */
.curved-showcase-shade {
    background:
        linear-gradient(
            to top,
            rgba(30,4,4,.78),
            rgba(30,4,4,.10) 56%,
            transparent
        ) !important;
}


@media (max-width: 700px) {

    .curved-showcase-head-minimal {
        align-items:
            flex-end !important;

        margin-bottom:
            12px !important;
    }

}


/* =====================================================
   STORY EXPLORER — VIDEO VERSION
===================================================== */

.story-explorer-video {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.04);

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1),
        filter .45s ease;

    pointer-events:
        none;

    border-radius:
        0 !important;

    background:
        #2A201D;
}


.story-explorer-panel.is-active
.story-explorer-video {
    transform:
        scale(1);
}


.story-explorer-panel:not(.is-active)
.story-explorer-video {
    filter:
        brightness(.72)
        saturate(.72);
}


/* Full video viewer */

.story-photo-viewer-video {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    background:
        #000000;

    border-radius:
        0 !important;
}


/* Old image-specific viewer rule no longer needed visually */
.story-photo-viewer-media img {
    display:
        none !important;
}


@media (max-width: 700px) {

    .story-explorer-video {
        transform:
            none;
    }

}


/* =====================================================
   FINAL ALBUM SET — 25 ALBUMS / 5 HORIZONTAL ROWS
===================================================== */

.work-gallery-rows {
    display: grid !important;
    gap: 24px !important;
}

.work-gallery-card,
.work-gallery-card img,
.work-album-scroll-item,
.work-album-scroll-item img {
    border-radius: 0 !important;
}


/* =====================================================
   ALBUM POPUP — MASONRY / EDITORIAL PHOTO GRID
   20 photos, regular sizing, no oversized feature images
===================================================== */

.work-album-scroll {
    width: min(1240px, 94vw) !important;

    margin: 0 auto !important;

    padding:
        24px 0
        70px !important;

    display: block !important;

    column-count: 4;
    column-gap: 10px;
}


/* Every photo follows its natural aspect ratio */
.work-album-scroll-item,
.work-album-scroll-item:nth-child(5n + 1),
.work-album-scroll-item:nth-child(5n + 4) {
    width: 100% !important;

    margin:
        0 0
        10px !important;

    display: inline-block !important;

    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    grid-column: auto !important;

    overflow: hidden;

    background: transparent !important;

    vertical-align: top;
}


/* No huge feature images */
.work-album-scroll-item img,
.work-album-scroll-item:nth-child(5n + 1) img,
.work-album-scroll-item:nth-child(5n + 4) img {
    width: 100% !important;
    height: auto !important;

    display: block !important;

    max-height: none !important;

    object-fit: contain !important;

    border-radius: 0 !important;

    transform: none !important;
}


/* Keep hover subtle */
.work-album-scroll-item:hover img {
    transform: none !important;
    filter: brightness(.94);
}


/* Small image number, less distracting */
.work-album-photo-index {
    right: 7px !important;
    bottom: 7px !important;

    padding:
        4px 6px !important;

    font-size:
        6px !important;

    background:
        rgba(20,3,3,.48) !important;
}


/* Tablet */
@media (max-width: 1000px) {

    .work-album-scroll {
        column-count: 3;
        column-gap: 9px;
    }

    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(5n + 1),
    .work-album-scroll-item:nth-child(5n + 4) {
        margin-bottom: 9px !important;
    }

}


/* Mobile — still collage-like, not one giant image */
@media (max-width: 700px) {

    .work-album-scroll {
        width: 94vw !important;

        padding:
            12px 0
            45px !important;

        column-count: 2;
        column-gap: 7px;
    }

    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(5n + 1),
    .work-album-scroll-item:nth-child(5n + 4) {
        margin-bottom: 7px !important;
    }

}


/* =====================================================
   ALBUM POPUP — 30 PHOTOS / UNIFORM ALIGNED GRID
   Desktop = 5 columns x 6 rows exactly.
   Tablet = 3 columns x 10 rows.
   Mobile = 2 columns x 15 rows.
===================================================== */

.work-album-scroll {
    width:
        min(
            1380px,
            94vw
        ) !important;

    margin:
        0 auto !important;

    padding:
        24px 0
        72px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        ) !important;

    gap:
        10px !important;

    column-count:
        initial !important;

    column-gap:
        initial !important;
}


/* Every tile has the exact same size */
.work-album-scroll-item,
.work-album-scroll-item:nth-child(5n + 1),
.work-album-scroll-item:nth-child(5n + 4) {
    width:
        100% !important;

    aspect-ratio:
        4 / 5;

    margin:
        0 !important;

    display:
        block !important;

    grid-column:
        auto !important;

    break-inside:
        auto !important;

    overflow:
        hidden !important;

    background:
        #2B0A0A !important;

    vertical-align:
        initial !important;
}


/* Crop neatly so every card aligns perfectly */
.work-album-scroll-item img,
.work-album-scroll-item:nth-child(5n + 1) img,
.work-album-scroll-item:nth-child(5n + 4) img {
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    max-height:
        none !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    border-radius:
        0 !important;

    transform:
        none !important;
}


/* Keep hover simple and clean */
.work-album-scroll-item:hover img {
    transform:
        none !important;

    filter:
        brightness(.94);
}


/* Photo number */
.work-album-photo-index {
    right:
        7px !important;

    bottom:
        7px !important;

    padding:
        4px 6px !important;

    font-size:
        6px !important;
}


/* TABLET — 30 divides perfectly into 3 columns */
@media (max-width: 1000px) {

    .work-album-scroll {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            9px !important;
    }

}


/* MOBILE — 30 divides perfectly into 2 columns */
@media (max-width: 700px) {

    .work-album-scroll {
        width:
            94vw !important;

        padding:
            12px 0
            48px !important;

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

        gap:
            7px !important;
    }

}


/* =====================================================
   ALBUM POPUP — REFERENCE MASONRY LAYOUT
   Vertical photo columns like the supplied reference.
   No giant wide landscape spans.
===================================================== */

.work-album-scroll {
    width:
        min(
            1220px,
            92vw
        ) !important;

    margin:
        0 auto !important;

    padding:
        28px 0
        72px !important;

    display:
        block !important;

    column-count:
        4 !important;

    column-gap:
        10px !important;
}


/* Every image stays inside one vertical column */
.work-album-scroll-item,
.work-album-scroll-item:nth-child(5n + 1),
.work-album-scroll-item:nth-child(5n + 4),
.work-album-scroll-item:nth-child(n) {
    width:
        100% !important;

    height:
        auto !important;

    aspect-ratio:
        auto !important;

    margin:
        0 0
        10px !important;

    display:
        inline-block !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    break-inside:
        avoid !important;

    -webkit-column-break-inside:
        avoid !important;

    page-break-inside:
        avoid !important;

    overflow:
        hidden !important;

    background:
        transparent !important;

    vertical-align:
        top !important;
}


/* Natural photo proportions — no forced giant crops */
.work-album-scroll-item img,
.work-album-scroll-item:nth-child(5n + 1) img,
.work-album-scroll-item:nth-child(5n + 4) img,
.work-album-scroll-item:nth-child(n) img {
    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    display:
        block !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    border-radius:
        0 !important;

    transform:
        none !important;
}


/* subtle interaction */
.work-album-scroll-item:hover img {
    transform:
        none !important;

    filter:
        brightness(.95);
}


/* less distracting photo numbers */
.work-album-photo-index {
    right:
        6px !important;

    bottom:
        6px !important;

    padding:
        4px 5px !important;

    font-size:
        6px !important;

    background:
        rgba(20,3,3,.42) !important;
}


/* TABLET */
@media (max-width: 1000px) {

    .work-album-scroll {
        width:
            94vw !important;

        column-count:
            3 !important;

        column-gap:
            9px !important;
    }

    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(n) {
        margin-bottom:
            9px !important;
    }

}


/* MOBILE */
@media (max-width: 700px) {

    .work-album-scroll {
        width:
            94vw !important;

        padding:
            14px 0
            50px !important;

        column-count:
            2 !important;

        column-gap:
            7px !important;
    }

    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(n) {
        margin-bottom:
            7px !important;
    }

}


/* =====================================================
   FINAL ALBUM POPUP — 32 PHOTO EDITORIAL GRID
   Masonry-inspired look using CSS Grid (NOT column-count).
   This keeps the bottom row perfectly aligned.
===================================================== */

.work-album-scroll {
    width:
        min(
            1380px,
            94vw
        ) !important;

    margin:
        0 auto !important;

    padding:
        26px 0
        78px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    grid-auto-flow:
        row dense !important;

    grid-auto-rows:
        clamp(
            120px,
            9vw,
            170px
        ) !important;

    gap:
        9px !important;

    column-count:
        initial !important;

    column-gap:
        initial !important;
}


/* RESET ALL OLD MASONRY / FEATURE RULES */

.work-album-scroll-item,
.work-album-scroll-item:nth-child(n),
.work-album-scroll-item:nth-child(5n + 1),
.work-album-scroll-item:nth-child(5n + 4) {
    position:
        relative;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        0 !important;

    aspect-ratio:
        auto !important;

    margin:
        0 !important;

    display:
        block !important;

    overflow:
        hidden !important;

    grid-column:
        auto !important;

    grid-row:
        auto !important;

    break-inside:
        auto !important;

    background:
        #2B0A0A !important;

    vertical-align:
        initial !important;
}


.work-album-scroll-item img,
.work-album-scroll-item:nth-child(n) img,
.work-album-scroll-item:nth-child(5n + 1) img,
.work-album-scroll-item:nth-child(5n + 4) img {
    width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    max-height:
        none !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    border-radius:
        0 !important;

    transform:
        none !important;

    transition:
        transform .32s ease,
        filter .32s ease;
}


/* =====================================================
   MIXED EDITORIAL RHYTHM
   Wide + tall + normal tiles.
   Layout remains controlled because it is CSS Grid.
===================================================== */


/* 01–08 */

.work-album-scroll-item:nth-child(1) {
    grid-column:
        span 2 !important;

    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(2) {
    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(3) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(4) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(5) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(6) {
    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(7) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(8) {
    grid-column:
        span 1 !important;
}


/* 09–16 */

.work-album-scroll-item:nth-child(9) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(10) {
    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(11) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(12) {
    grid-column:
        span 1 !important;

    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(13) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(14) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(15) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(16) {
    grid-row:
        span 2 !important;
}


/* 17–24 */

.work-album-scroll-item:nth-child(17) {
    grid-column:
        span 2 !important;

    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(18) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(19) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(20) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(21) {
    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(22) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(23) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(24) {
    grid-column:
        span 1 !important;
}


/* 25–28 — final mixed block */

.work-album-scroll-item:nth-child(25) {
    grid-column:
        span 2 !important;
}

.work-album-scroll-item:nth-child(26) {
    grid-row:
        span 2 !important;
}

.work-album-scroll-item:nth-child(27) {
    grid-column:
        span 1 !important;
}

.work-album-scroll-item:nth-child(28) {
    grid-column:
        span 1 !important;
}


/* =====================================================
   29–32 — FINAL PERFECT BOTTOM ROW
   Four equal tiles, one clean full row.
===================================================== */

.work-album-scroll-item:nth-child(29),
.work-album-scroll-item:nth-child(30),
.work-album-scroll-item:nth-child(31),
.work-album-scroll-item:nth-child(32) {
    grid-column:
        span 1 !important;

    grid-row:
        span 2 !important;

    min-height:
        clamp(
            260px,
            23vw,
            360px
        ) !important;
}


/* Hover remains subtle */
.work-album-scroll-item:hover img {
    transform:
        scale(1.012) !important;

    filter:
        brightness(.95);
}


/* Small index */
.work-album-photo-index {
    right:
        7px !important;

    bottom:
        7px !important;

    padding:
        4px 6px !important;

    font-size:
        6px !important;

    background:
        rgba(20,3,3,.48) !important;
}


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

@media (max-width: 1000px) {

    .work-album-scroll {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        grid-auto-rows:
            155px !important;

        gap:
            8px !important;
    }


    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(n) {
        grid-column:
            span 1 !important;

        grid-row:
            span 2 !important;

        min-height:
            0 !important;
    }


    .work-album-scroll-item:nth-child(1),
    .work-album-scroll-item:nth-child(7),
    .work-album-scroll-item:nth-child(13),
    .work-album-scroll-item:nth-child(19),
    .work-album-scroll-item:nth-child(25) {
        grid-column:
            span 2 !important;
    }


    /* final photos stay neat */
    .work-album-scroll-item:nth-child(n+29) {
        grid-column:
            span 1 !important;
    }

}


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

@media (max-width: 700px) {

    .work-album-scroll {
        width:
            94vw !important;

        padding:
            14px 0
            52px !important;

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

        grid-auto-rows:
            115px !important;

        gap:
            7px !important;
    }


    .work-album-scroll-item,
    .work-album-scroll-item:nth-child(n) {
        grid-column:
            span 1 !important;

        grid-row:
            span 2 !important;

        min-height:
            0 !important;
    }


    .work-album-scroll-item:nth-child(1),
    .work-album-scroll-item:nth-child(9),
    .work-album-scroll-item:nth-child(17),
    .work-album-scroll-item:nth-child(25) {
        grid-column:
            span 2 !important;
    }


    /* 31 + 32 = final full mobile row */
    .work-album-scroll-item:nth-child(31),
    .work-album-scroll-item:nth-child(32) {
        grid-column:
            span 1 !important;
    }

}


/* =====================================================
   FINAL FIX — EDITORIAL GRID + GUARANTEED FULL LAST ROW
   Photos 01–28 live in the collage.
   Photos 29–32 live in a separate 4-column final row.
   This prevents CSS Grid dense packing from moving them upward.
===================================================== */

.work-album-scroll {
    display: block !important;
    width: min(1380px, 94vw) !important;
    margin: 0 auto !important;
    padding: 26px 0 78px !important;
}


/* MAIN EDITORIAL COLLAGE */

.work-album-editorial-grid {
    display: grid !important;

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

    grid-auto-flow:
        row dense;

    grid-auto-rows:
        clamp(
            120px,
            9vw,
            170px
        );

    gap:
        9px;
}


/* default tile */

.work-album-editorial-grid
.work-album-scroll-item {
    position: relative;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    overflow: hidden;

    background: #2B0A0A;
}


/* mixed editorial rhythm */

.work-album-editorial-grid
.work-album-scroll-item:nth-child(1),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(9),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(17),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(25) {
    grid-column: span 2;
    grid-row: span 2;
}


.work-album-editorial-grid
.work-album-scroll-item:nth-child(2),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(6),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(10),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(14),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(18),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(22),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(26) {
    grid-row: span 2;
}


.work-album-editorial-grid
.work-album-scroll-item:nth-child(5),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(8),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(13),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(16),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(21),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(24),
.work-album-editorial-grid
.work-album-scroll-item:nth-child(28) {
    grid-column: span 2;
}


/* image behavior */

.work-album-editorial-grid
.work-album-scroll-item img,
.work-album-final-row
.work-album-scroll-item img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 0 !important;
}


/* =====================================================
   GUARANTEED FINAL ROW — 29, 30, 31, 32
===================================================== */

.work-album-final-row {
    display: grid !important;

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

    gap:
        9px;

    margin-top:
        9px;
}


.work-album-final-row
.work-album-scroll-item {
    position: relative;

    width: 100% !important;

    aspect-ratio:
        4 / 5;

    margin:
        0 !important;

    overflow:
        hidden;

    background:
        #2B0A0A;
}


/* no old nth-child rule can affect final row */
.work-album-final-row
.work-album-scroll-item:nth-child(n) {
    grid-column:
        auto !important;

    grid-row:
        auto !important;

    height:
        auto !important;

    min-height:
        0 !important;
}


/* TABLET */

@media (max-width: 1000px) {

    .work-album-editorial-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        grid-auto-rows:
            150px;
    }


    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(n) {
        grid-column:
            span 1;

        grid-row:
            span 2;
    }


    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(1),
    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(8),
    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(15),
    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(22) {
        grid-column:
            span 2;
    }


    .work-album-final-row {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .work-album-scroll {
        width:
            94vw !important;

        padding:
            14px 0
            52px !important;
    }


    .work-album-editorial-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-auto-rows:
            110px;

        gap:
            7px;
    }


    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(n) {
        grid-column:
            span 1;

        grid-row:
            span 2;
    }


    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(1),
    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(9),
    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(17),
    .work-album-editorial-grid
    .work-album-scroll-item:nth-child(25) {
        grid-column:
            span 2;
    }


    .work-album-final-row {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            7px;

        margin-top:
            7px;
    }

}


/* =====================================================
   FINAL PATTERN LAYOUT — 8 ITEMS REPEATED x4 = 32 PHOTOS
   Based on user's sketch layout
===================================================== */

.work-album-scroll {
    width: min(1380px, 94vw) !important;
    margin: 0 auto !important;
    padding: 20px 0 70px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.work-album-pattern-block {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: clamp(130px, 11vw, 190px) clamp(130px, 11vw, 190px) clamp(130px, 11vw, 190px);
    gap: 12px;
}

.work-album-pattern-item {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.work-album-pattern-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transform: scale(1.01);
    transition: transform .4s ease;
}

.work-album-pattern-item:hover img {
    transform: scale(1.04);
}

/* 8-tile pattern */
.work-album-pattern-block .pattern-item-1 { grid-column: 1; grid-row: 1; }
.work-album-pattern-block .pattern-item-2 { grid-column: 2; grid-row: 1; }
.work-album-pattern-block .pattern-item-3 { grid-column: 3; grid-row: 1; }
.work-album-pattern-block .pattern-item-4 { grid-column: 4; grid-row: 1 / span 2; }
.work-album-pattern-block .pattern-item-5 { grid-column: 1; grid-row: 2 / span 2; }
.work-album-pattern-block .pattern-item-6 { grid-column: 2 / span 2; grid-row: 2; }
.work-album-pattern-block .pattern-item-7 { grid-column: 2; grid-row: 3; }
.work-album-pattern-block .pattern-item-8 { grid-column: 3 / span 2; grid-row: 3; }

/* override previous old item styles */
.work-album-scroll-item,
.work-album-editorial-grid,
.work-album-final-row {
    all: unset;
}

@media (max-width: 900px) {
    .work-album-scroll {
        width: 94vw !important;
        gap: 10px !important;
    }

    .work-album-pattern-block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, 180px);
        gap: 8px;
    }

    .work-album-pattern-block .pattern-item-1 { grid-column: 1; grid-row: 1; }
    .work-album-pattern-block .pattern-item-2 { grid-column: 2; grid-row: 1; }
    .work-album-pattern-block .pattern-item-3 { grid-column: 1; grid-row: 2; }
    .work-album-pattern-block .pattern-item-4 { grid-column: 2; grid-row: 2 / span 2; }
    .work-album-pattern-block .pattern-item-5 { grid-column: 1; grid-row: 3 / span 2; }
    .work-album-pattern-block .pattern-item-6 { grid-column: 1 / span 2; grid-row: 5; }
    .work-album-pattern-block .pattern-item-7 { grid-column: 1; grid-row: 4; }
    .work-album-pattern-block .pattern-item-8 { grid-column: 2; grid-row: 4; }
}

@media (max-width: 560px) {
    .work-album-pattern-block {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 8px;
    }

    .work-album-pattern-block .work-album-pattern-item,
    .work-album-pattern-block [class*="pattern-item-"] {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 4 / 5;
    }
}


/* =====================================================
   FINAL USER LAYOUT — TALLER 8-TILE PATTERN × 4
   8 photos per block × 4 blocks = 32 photos

   Pattern:
   [ 1 TALL ][ 2 ][   3 WIDE   ]
   [ 1 TALL ][   4 WIDE   ][ 5 ]
   [   6    ][   7 WIDE   ][ 8 ]
===================================================== */

.work-album-scroll {
    width:
        min(
            1180px,
            92vw
        ) !important;

    margin:
        0 auto !important;

    padding:
        26px 0
        78px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        18px !important;
}


/* Each block is taller and less horizontally stretched */
.work-album-pattern-block {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    grid-template-rows:
        repeat(
            3,
            clamp(
                190px,
                16vw,
                255px
            )
        ) !important;

    gap:
        10px !important;

    width:
        100% !important;
}


/* Common tile style */
.work-album-pattern-item {
    position:
        relative !important;

    overflow:
        hidden !important;

    background:
        #2B0A0A !important;

    box-shadow:
        none !important;

    border-radius:
        0 !important;
}


.work-album-pattern-item img {
    width:
        100% !important;

    height:
        100% !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    border-radius:
        0 !important;

    transform:
        none !important;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.work-album-pattern-item:hover img {
    transform:
        scale(1.018) !important;

    filter:
        brightness(.96);
}


/* =====================================================
   EXACT 8-PHOTO PATTERN
===================================================== */

/* 1 — tall left */
.work-album-pattern-block
.pattern-item-1 {
    grid-column:
        1 !important;

    grid-row:
        1 / span 2 !important;
}


/* 2 — top middle small */
.work-album-pattern-block
.pattern-item-2 {
    grid-column:
        2 !important;

    grid-row:
        1 !important;
}


/* 3 — top right wide */
.work-album-pattern-block
.pattern-item-3 {
    grid-column:
        3 / span 2 !important;

    grid-row:
        1 !important;
}


/* 4 — middle wide */
.work-album-pattern-block
.pattern-item-4 {
    grid-column:
        2 / span 2 !important;

    grid-row:
        2 !important;
}


/* 5 — middle right */
.work-album-pattern-block
.pattern-item-5 {
    grid-column:
        4 !important;

    grid-row:
        2 !important;
}


/* 6 — bottom left */
.work-album-pattern-block
.pattern-item-6 {
    grid-column:
        1 !important;

    grid-row:
        3 !important;
}


/* 7 — bottom middle wide */
.work-album-pattern-block
.pattern-item-7 {
    grid-column:
        2 / span 2 !important;

    grid-row:
        3 !important;
}


/* 8 — bottom right */
.work-album-pattern-block
.pattern-item-8 {
    grid-column:
        4 !important;

    grid-row:
        3 !important;
}


/* Keep photo numbers subtle */
.work-album-photo-index {
    right:
        7px !important;

    bottom:
        7px !important;

    padding:
        4px 6px !important;

    font-size:
        6px !important;

    background:
        rgba(20,3,3,.42) !important;
}


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

@media (max-width: 900px) {

    .work-album-scroll {
        width:
            94vw !important;

        gap:
            12px !important;
    }


    .work-album-pattern-block {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        grid-template-rows:
            repeat(
                6,
                170px
            ) !important;

        gap:
            8px !important;
    }


    .work-album-pattern-block .pattern-item-1 {
        grid-column:
            1 !important;

        grid-row:
            1 / span 2 !important;
    }

    .work-album-pattern-block .pattern-item-2 {
        grid-column:
            2 !important;

        grid-row:
            1 !important;
    }

    .work-album-pattern-block .pattern-item-3 {
        grid-column:
            2 !important;

        grid-row:
            2 !important;
    }

    .work-album-pattern-block .pattern-item-4 {
        grid-column:
            1 / span 2 !important;

        grid-row:
            3 !important;
    }

    .work-album-pattern-block .pattern-item-5 {
        grid-column:
            1 !important;

        grid-row:
            4 !important;
    }

    .work-album-pattern-block .pattern-item-6 {
        grid-column:
            2 !important;

        grid-row:
            4 !important;
    }

    .work-album-pattern-block .pattern-item-7 {
        grid-column:
            1 / span 2 !important;

        grid-row:
            5 !important;
    }

    .work-album-pattern-block .pattern-item-8 {
        grid-column:
            1 / span 2 !important;

        grid-row:
            6 !important;
    }

}


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

@media (max-width: 560px) {

    .work-album-scroll {
        width:
            94vw !important;

        padding:
            14px 0
            48px !important;

        gap:
            8px !important;
    }


    .work-album-pattern-block {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            none !important;

        gap:
            7px !important;
    }


    .work-album-pattern-block
    .work-album-pattern-item,
    .work-album-pattern-block
    [class*="pattern-item-"] {
        grid-column:
            auto !important;

        grid-row:
            auto !important;

        aspect-ratio:
            4 / 5 !important;
    }

}


/* =====================================================
   FINAL ALBUM LAYOUT — REFERENCE 2:3 + 5:4
   8 photos per block × 4 blocks = 32 photos

   DESKTOP:
   ┌──────┬──────┬──────┬──────┐
   │  01  │  02  │  03  │  04  │
   │ TALL │ TALL │SHORT │ TALL │
   │      │      ├──────┤      │
   │      │      │  07  │      │
   ├──────┼──────┤ TALL ├──────┤
   │  05  │  06  │      │  08  │
   │SHORT │SHORT │      │SHORT │
   └──────┴──────┴──────┴──────┘
===================================================== */

.work-album-scroll {
    width: min(1180px, 92vw) !important;
    margin: 0 auto !important;
    padding: 28px 0 80px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;

    column-count: initial !important;
}


/* One block = 8 photos */
.work-album-pattern-block {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    /* 6 equal mini rows:
       TALL = 4 rows
       SHORT = 2 rows
    */
    grid-template-rows:
        repeat(
            6,
            clamp(
                82px,
                7vw,
                105px
            )
        ) !important;

    gap: 10px !important;

    align-items: stretch !important;
}


/* Reset old pattern rules */
.work-album-pattern-block
.work-album-pattern-item {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    background: #2B0A0A !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    aspect-ratio: auto !important;
}


.work-album-pattern-block
.work-album-pattern-item img {
    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: none !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 0 !important;

    transform: none !important;

    transition:
        transform .35s ease,
        filter .35s ease !important;
}


.work-album-pattern-block
.work-album-pattern-item:hover img {
    transform: scale(1.015) !important;
    filter: brightness(.96) !important;
}


/* =====================================================
   EXACT 8-IMAGE POSITIONING
===================================================== */

/* COLUMN 1 — tall top, short bottom */
.work-album-pattern-block
.pattern-item-1 {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
}

.work-album-pattern-block
.pattern-item-5 {
    grid-column: 1 !important;
    grid-row: 5 / span 2 !important;
}


/* COLUMN 2 — tall top, short bottom */
.work-album-pattern-block
.pattern-item-2 {
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
}

.work-album-pattern-block
.pattern-item-6 {
    grid-column: 2 !important;
    grid-row: 5 / span 2 !important;
}


/* COLUMN 3 — short top, tall bottom */
.work-album-pattern-block
.pattern-item-3 {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
}

.work-album-pattern-block
.pattern-item-7 {
    grid-column: 3 !important;
    grid-row: 3 / span 4 !important;
}


/* COLUMN 4 — tall top, short bottom */
.work-album-pattern-block
.pattern-item-4 {
    grid-column: 4 !important;
    grid-row: 1 / span 4 !important;
}

.work-album-pattern-block
.pattern-item-8 {
    grid-column: 4 !important;
    grid-row: 5 / span 2 !important;
}


/* Small photo numbers */
.work-album-pattern-block
.work-album-photo-index {
    right: 7px !important;
    bottom: 7px !important;

    padding: 4px 6px !important;

    font-size: 6px !important;

    color: rgba(255,255,255,.84) !important;

    background:
        rgba(20,3,3,.46) !important;
}


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

@media (max-width: 900px) {

    .work-album-scroll {
        width: 94vw !important;
        gap: 12px !important;
    }


    /*
       Keep the same visual rhythm,
       but split into 2 columns.
    */
    .work-album-pattern-block {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        grid-template-rows:
            repeat(
                12,
                75px
            ) !important;

        gap: 8px !important;
    }


    .work-album-pattern-block
    .pattern-item-1 {
        grid-column: 1 !important;
        grid-row: 1 / span 4 !important;
    }

    .work-album-pattern-block
    .pattern-item-2 {
        grid-column: 2 !important;
        grid-row: 1 / span 4 !important;
    }

    .work-album-pattern-block
    .pattern-item-5 {
        grid-column: 1 !important;
        grid-row: 5 / span 2 !important;
    }

    .work-album-pattern-block
    .pattern-item-6 {
        grid-column: 2 !important;
        grid-row: 5 / span 2 !important;
    }

    .work-album-pattern-block
    .pattern-item-3 {
        grid-column: 1 !important;
        grid-row: 7 / span 2 !important;
    }

    .work-album-pattern-block
    .pattern-item-4 {
        grid-column: 2 !important;
        grid-row: 7 / span 4 !important;
    }

    .work-album-pattern-block
    .pattern-item-7 {
        grid-column: 1 !important;
        grid-row: 9 / span 4 !important;
    }

    .work-album-pattern-block
    .pattern-item-8 {
        grid-column: 2 !important;
        grid-row: 11 / span 2 !important;
    }

}


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

@media (max-width: 560px) {

    .work-album-scroll {
        width: 94vw !important;

        padding:
            14px 0
            50px !important;

        gap: 8px !important;
    }


    .work-album-pattern-block {
        display: grid !important;

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

        grid-template-rows:
            none !important;

        gap: 7px !important;
    }


    .work-album-pattern-block
    .work-album-pattern-item,
    .work-album-pattern-block
    [class*="pattern-item-"] {
        grid-column: auto !important;
        grid-row: auto !important;

        height: auto !important;

        aspect-ratio: 2 / 3 !important;
    }


    .work-album-pattern-block
    .pattern-item-3,
    .work-album-pattern-block
    .pattern-item-5,
    .work-album-pattern-block
    .pattern-item-6,
    .work-album-pattern-block
    .pattern-item-8 {
        aspect-ratio: 5 / 4 !important;
    }

}


/* =====================================================
   32-PHOTO RELIABLE LOADING FIX
   All 32 tiles exist immediately.
   Browser loads photos 9-32 lazily.
===================================================== */

.work-album-pattern-block {
    contain:
        layout paint style;
}


.work-album-pattern-item {
    background:
        rgba(255,255,255,.035) !important;
}


.work-album-pattern-item img {
    transition:
        none !important;

    will-change:
        auto !important;
}


.work-album-pattern-item:hover img {
    transform:
        none !important;

    filter:
        none !important;
}



/* =====================================================
   10 CLIENTS / 20 PHOTOS — FINAL 4 PHOTO BLOCK
   20 photos = 8 + 8 + 4.
   The last four are shown as a clean equal row.
===================================================== */

.work-album-pattern-block:last-child:nth-child(3) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: clamp(260px, 28vw, 390px) !important;
}

.work-album-pattern-block:last-child:nth-child(3)
.work-album-pattern-item {
    grid-row: 1 !important;
    height: 100% !important;
}

.work-album-pattern-block:last-child:nth-child(3)
.pattern-item-1 {
    grid-column: 1 !important;
}

.work-album-pattern-block:last-child:nth-child(3)
.pattern-item-2 {
    grid-column: 2 !important;
}

.work-album-pattern-block:last-child:nth-child(3)
.pattern-item-3 {
    grid-column: 3 !important;
}

.work-album-pattern-block:last-child:nth-child(3)
.pattern-item-4 {
    grid-column: 4 !important;
}

@media (max-width: 900px) {

    .work-album-pattern-block:last-child:nth-child(3) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 260px) !important;
    }

    .work-album-pattern-block:last-child:nth-child(3)
    .pattern-item-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .work-album-pattern-block:last-child:nth-child(3)
    .pattern-item-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .work-album-pattern-block:last-child:nth-child(3)
    .pattern-item-3 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .work-album-pattern-block:last-child:nth-child(3)
    .pattern-item-4 {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}

@media (max-width: 560px) {

    .work-album-pattern-block:last-child:nth-child(3) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
    }

    .work-album-pattern-block:last-child:nth-child(3)
    .work-album-pattern-item {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 4 / 5 !important;
        height: auto !important;
    }
}




/* =========================================================
   FINAL GALLERY SPACING FIX — 40PX GAP
========================================================= */
.curved-showcase {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.curved-showcase-head,
.curved-showcase-viewport,
.curved-showcase-track {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

.work-gallery-section {
    margin-bottom: 0 !important;
    padding-bottom: 40px !important;
}

.story-explorer {
    margin-top: 0 !important;
    padding-top: 40px !important;
}