/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BODY ===== */
body {
    background-color: #fafbfd;
    color: #111111;
    overflow-x: hidden;
}

/* ===== FIXED ELEMENTS ===== */
.name {
    position: fixed;
    left: 2.8vw;
    top: 3.9vh;
    font-family: "Lora", serif;
    font-size: 14.4px; /* 18 * 0.8 */
    line-height: 1.3;
}

.cv {
    position: fixed;
    left: 2.8vw;
    top: 45vh;
    font-family: "Inter", sans-serif;
    font-size: 8.8px;
    letter-spacing: 1.6px;
    line-height: 1.2;
    z-index: 3000; /* ⬅️ NAJWAŻNIEJSZE */
    pointer-events: auto; /* ⬅️ KLIKALNOŚĆ */
    text-decoration: none;
    color: #111111;
    cursor: pointer;
}

        .cv:hover {
            color: #111111; /* nic się wizualnie nie zmienia */
        }


.here {
    color: #1a00e9;
    opacity: 1;
    animation: pulseOpacity 4s ease-in-out infinite;
    cursor: pointer;
}


    @keyframes pulseOpacity {
        0% {
            opacity: 1;
        }

        10% {
            opacity: 1;
        }

        50% {
            opacity: 0.30;
        }

        95% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

.menu {
    position: fixed;
    top: 4.7vh;
    right: 5vw;
    display: flex;
    gap: 1.6vw; /* 2 * 0.8 */
    font-family: "Inter", sans-serif;
    font-size: 12px; /* 15 * 0.8 */
    letter-spacing: 1.6px; /* 2 * 0.8 */
    z-index: 1000;
}

    .menu a {
        text-decoration: none;
        color: #111111;
    }

        .menu a:not(.active):hover, .menu a.active:hover {
            color: #1a00e9;
        }

        .menu a.active {
            text-decoration: underline;
        }

.lorem {
    position: fixed;
    left: 2.8vw;
    bottom: 3vh;
    font-family: "Inter", sans-serif;
    font-size: 9.6px; /* 12 * 0.8 */
    letter-spacing: 1.6px; /* 2 * 0.8 */
    z-index: 2000;
}

.back-to-top {
    cursor: pointer;
    text-decoration: underline;
    transition: font-weight 0.2s;
}

    .back-to-top:hover {
        font-weight: 500;
    }

/* ===== SCROLL LAYER ===== */
.scroll-layer {
    position: relative;
    min-height: 1200vh;
}

/* ===== SCROLLING TEXT ===== */
.portfolio-title {
    position: absolute;
    top: 15vh;
    left: 22.8vw;
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 46.4px; /* 58 * 0.8 */
}

.subtitle {
    position: absolute;
    top: 23vh;
    left: 41.9vw;
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-size: 9.6px; /* 12 * 0.8 */
    letter-spacing: 2.4px; /* 3 * 0.8 */
    line-height: 1.1;
    text-align: right;
}

.multidisciplinary {
    position: absolute;
    top: 61vh;
    left: 36vw;
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-size: 9.6px; /* 12 * 0.8 */
    letter-spacing: 1.6px; /* 2 * 0.8 */
    text-align: right;
}

.collection {
    position: absolute;
    top: 67.3vh;
    left: 43vw;
    font-family: "Lora", serif;
    font-size: 12px; /* 15 * 0.8 */
    line-height: 1.1;
}

/* ===== IMAGES ===== */
.collection-image {
    position: absolute;
    top: 74.3vh;
    left: 39.2vw;
}

    .collection-image img {
        width: 80%; /* przywrócone oryginalne wymiary */
        height: auto;
    }

.collection-image-right {
    position: absolute;
    top: 61vh;
    left: 48vw;
}

    .collection-image-right img {
        width: 80%; /* przywrócone oryginalne wymiary */
        height: auto;
    }

.between {
    position: absolute;
    top: 54vh;
    left: 58vw;
    font-family: "Lora", serif;
    font-weight: 400;
    font-size: 16.8px; /* 21 * 0.8 */
    line-height: 1.2;
}
.section1-title {
    position: absolute;
    top: 125vh;
    left: 76vw;
    font-family: "Lora", serif;
    font-size: 13px; /* 21 * 0.8 */
    font-weight: 500;
    line-height: 1.2;
}
/*PROJECT1*/
.element1 {
    position: absolute;
    top: 140vh;
    left: 37vw;
}
.element1 img {
    width: 50%;
    height: 50%;
    object-fit: fill;
}
.project1-title {
    position: absolute;
    top: 145vh;
    left: 38.3vw;
    font-family: "Lora", serif;
    font-size: 16px; /* 21 * 0.8 */
    line-height: 1.2;
    text-align:right;
}
.project1-type {
    top: 135vh;
    left: 36vw;
    font-family: "Inter", serif;
    font-size: 11px; /* 21 * 0.8 */
    line-height: 1.2;
}
.project1-description {
    position: absolute;
    top: 150vh;
    left: 28vw;
    font-family: "Inter", serif;
    font-size: 10px; /* 21 * 0.8 */
    line-height: 1.2;
    letter-spacing: 1.6px;
    text-align: right;
}
.project1-photo1 {
    position: absolute;
    top: 146vh;
    left: 57.5vw;
    width: 330px;
    height: 310px;
}
.project1-photo1 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
}
.project1-photo1scan {
    position: absolute;
    top: 348vh;
    left: 30vw;
    width: 280px;
    height: 310px;
    opacity:80%
}
.project1-photo1scan img {
        width: 140%;
        height: 140%;
        object-fit: fill;
}

.project1-photo2 {
    position: absolute;
    top: 163vh;
    left: 24.5vw;
    width: 288px;
    height: 150px;
}
  .project1-photo2 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
  }

.project1-photo3 {
    position: absolute;
    top: 183vh;
    left: 38.5vw;
    width: 248px;
    height: 313px;
}
    .project1-photo3 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.project1-photo4 {
    position: absolute;
    top: 234vh;
    left: 44vw;
    width: 178px;
    height: 65px;
}
    .project1-photo4 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.project1-photo5 {
    position: absolute;
    top: 245vh;
    left: 38.5vw;
    width: 481px;
    height: 533px;
}
    .project1-photo5 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
.project1-video1 {
    position: absolute;
    top: 317vh;
    left: 59.5vw;
    width: 231px;
    height: 133px;
    object-fit: cover; /* wypełnia ramkę bez rozciągania */
    display: block;
    z-index: 5;
    filter: saturate(85%);
}

/*PROJECT2*/
.element2 {
    position: absolute;
    top: 440vh;
    left: 37vw;
}
    .element2 img {
        width: 50%;
        height: 50%;
        object-fit: fill;
    }
.project2-title {
    position: absolute;
    top: 445vh;
    left: 37.3vw;
    font-family: "Lora", serif;
    font-size: 16px; /* 21 * 0.8 */
    line-height: 1.2;
    text-align: right;
}
.project2-photo1 {
    position: absolute;
    top: 452vh;
    left: 30vw;
    width: 744px;
    height: 526,2px;
}

    .project2-photo1 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.project2-description {
    position: absolute;
    top: 536vh;
    left: 62vw;
    font-family: "Inter", serif;
    font-size: 10px; /* 21 * 0.8 */
    line-height: 1.2;
    letter-spacing: 1.6px;
}

.project2-photo2 {
    position: absolute;
    top: 539vh;
    left: 30vw;
    width: 744px;
    height: 526,2px;
}

    .project2-photo2 img {
        width: 60%;
        height: 60%;
        object-fit: fill;
    }
.project2-photo3 {
    position: absolute;
    top: 551.5vh;
    left: 62vw;
    width: 744px;
    height: 526,2px;
}

    .project2-photo3 img {
        width: 40%;
        height: 40%;
        object-fit: fill;
    }
.project2-video1 {
    position: absolute;
    top: 619vh;
    left: 49vw;
    width: 231px;
    height: 133px;
    object-fit: cover;
    display: block;
    z-index: 5;
    filter: saturate(85%);
}
.project2-photo4 {
    position: absolute;
    top: 680vh;
    left: 25vw;
    width: 981px;
    height: 179px;
    display:none;
}

    .project2-photo4 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
.project2-scan1 {
    position: absolute;
    top: 610.5vh;
    left: 18vw;
    width: 744px;
    height: 526,2px;
}

    .project2-scan1 img {
        width: 20%;
        height: 20%;
        object-fit: fill;
    }
.section2-title {
    position: absolute;
    top: 668vh;
    left: 76vw;
    font-family: "Lora", serif;
    font-size: 13px; /* 21 * 0.8 */
    font-weight: 500;
    line-height: 1.2;
}
/* ===== PROJECT 3 ===== */
.element3 {
    position: absolute;
    top: 680vh;
    left: 37vw;
}

    .element3 img {
        width: 50%;
    }

.project3-title {
    position: absolute;
    top: 685vh;
    left: 37.3vw;
    font-family: "Lora", serif;
    font-size: 16px;
    line-height: 1.2;
    text-align: right;
}

.project3-description {
    position: absolute;
    top: 692vh;
    left: 37.3vw;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 1.6px;
}
.project3-photo1 {
    position: absolute;
    top: 722vh;
    left: 22vw;
    width: 260px;
}

.project3-photo2 {
    position: absolute;
    top: 722vh;
    left: 41vw;
    width: 260px;
}

.project3-photo3 {
    position: absolute;
    top: 722vh;
    left: 60vw;
    width: 260px;
}

    .project3-photo1 img,
    .project3-photo2 img,
    .project3-photo3 img {
        width: 100%;
        height: auto;
    }

.project3-caption {
    position: absolute;
    top: 740vh;
    left: 87vw;
    font-family: "Inter", sans-serif;
    font-size: 9.6px;
    text-align:center;
    letter-spacing: 1.6px;
    text-decoration: underline;
    cursor: pointer;
    color: #111111;
    transition: font-weight 0.2s;
}

    .project3-caption:hover {
        font-weight: 500;
    }


.project3-scan1 {
    position: absolute;
    top: 773vh;
    left: 72vw;
    width: 200px;
}
    .project3-scan1 img {
        width: 100%;
    }

.project3-scan2 {
    position: absolute;
    top: 770vh;
    left: 29vw;
    width: 200px;
}

    .project3-scan2 img {
        width: 140%;
    }

.project3-scan-text {
    position: absolute;
    top: 775vh;
    left: 58vw;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 1.6px;
}
    .project3-scan-text span {
        display: block;
        margin-top: 12px;
        font-size: 9px;
    }

.section3-title {
    position: absolute;
    top: 848vh;
    left: 76vw;
    font-family: "Lora", serif;
    font-size: 13px; /* 21 * 0.8 */
    font-weight: 500;
    line-height: 1.2;
}
/* PROJECT 4 */
.element4 {
    position: absolute;
    top: 860vh;
    left: 37vw;
}

    .element4 img {
        width: 50%;
        height: 50%;
        object-fit: fill;
    }
.project4-title {
    position: absolute;
    top: 865vh;
    left: 37.3vw;
    font-family: "Lora", serif;
    font-size: 16px; /* 21 * 0.8 */
    line-height: 1.2;
    text-align: right;
}
.project4-description {
    position: absolute;
    top: 870vh;
    left: 37.3vw;
    font-family: "Inter", serif;
    font-size: 10px; /* 21 * 0.8 */
    line-height: 1.2;
    letter-spacing: 1.6px;
}
.project4-description2 {
    position: absolute;
    top: 929vh;
    left: 28vw;
    font-family: "Inter", serif;
    font-size: 10px; /* 21 * 0.8 */
    line-height: 1.2;
    letter-spacing: 1.6px;
}
.project4-description3 {
    position: absolute;
    top: 970vh;
    left: 58vw;
    font-family: "lora", serif;
    font-size: 14px; /* 21 * 0.8 */

}
.project4-description4 {
    position: absolute;
    top: 1008vh;
    left: 25vw;
    font-family: Inter, serif;
    font-size: 10px; /* 21 * 0.8 */
      line-height: 1.2;
    letter-spacing: 1.6px;
}
.project4-photo1 {
    position: absolute;
    z-index: 1;
    top: 865vh;
    left: 62vw;
    width: 202px;
    height: 359px;
}

    .project4-photo1 img {
        width: 120%;
        height: 120%;
        object-fit: fill;
    }
.project4-photo2 {
    position: absolute;
    z-index: 3;
    top: 886vh;
    left: 59.3vw;
    width: 283px;
    height: 218px;
}

    .project4-photo2 img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

.project4-video1 {
    position: absolute;
    top: 994vh;
    left: 35vw;
    width: 363px;
    height: 200px;
    object-fit: cover;
    display: block;
}
.project4-video2 {
    position: absolute;
    z-index: 1;
    top: 912vh;
    left: 55vw;
    width: 81px;
    height: 142.8px;
    object-fit: cover;
    display: block;
}

.section5-title {
    position: absolute;
    top: 1080vh;
    left: 76vw;
    font-family: "Lora", serif;
    font-size: 13px; /* 21 * 0.8 */
    font-weight: 500;
    line-height: 1.2;
}
/* ===== METAL WORKS ===== */

.metal-divider {
    position: absolute;
    top: 1070vh; /* lekko nad METAL WORKS – możesz dopasować */
    left: 19vw; /* skraca linię z lewej */
    width: 76vw;
    border-top: 1px dashed #111111;
    opacity: 0.6;
    z-index: 2;
}

.metal-item {
    position: absolute;
    top: 1100vh;
}

    .metal-item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
.metal-caption {
    top: 1100vh;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    letter-spacing: 1.6px;
}
.metal-1 {
    top: 1100vh;
    left: 37vw;
    width: 178px;
    height: 267px;
}
.metal-2 {
    top: 1100vh;
    left: 20vw;
    width: 220px;
    height: 267px;
}
.metal-3 {
    top: 1100vh;
    left: 71.5vw;
    width: 169px;
    height: 110px;
}
.metal-4 {
    top: 1155vh;
    left: 20vw;
    width: 169px;
    height: 110px;
}
.metal-4 img{
    width:200%;
    height: 200%;
}
.metal-5 {
    top: 1125vh;
    left: 71.5vw;
    width: 169px;
    height: 110px;
}

    .metal-5 img {
        width: 120%;
        height: 120%;
    }
/* ===== METAL WORKS IMAGE POPUP ===== */
.metal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(250, 251, 253, 0.75); /* faded tło */
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.25s ease;
}

    .metal-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .metal-overlay img {
        max-width: 75vw;
        max-height: 85vh;
        object-fit: contain;
        transform: scale(0.95);
        transition: transform 0.02s ease;
        box-shadow: 0px 20px 60px rgba(0.002, 0, 0, 0.002);
    }

    .metal-overlay.active img {
        transform: scale(1);
    }

/* kursor lupy na metal */
.metal-item img {
    cursor: zoom-in;
}

/* ===== RIGHT COLUMN ===== */
.right-column {
    position: absolute;
    top: 34vh;
    right: 5vw;
    display: flex;
    flex-direction: column;
}

.pair {
    position: relative;
    margin-block: -2.5vh;
}
.pair-4{
    display:none;
}
.pair-thumb {
        width: 57.6px; /* 72 * 0.8 */
        height: 65.6px; /* 82 * 0.8 */
        position: relative;
    }

    .pair-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pair-text {
    position: absolute;
    bottom: 0;
    right: 64px; /* 80 * 0.8 */
    white-space: nowrap;
    font-family: "Inter", sans-serif;
    font-size: 8.8px; /* 11 * 0.8 */
    letter-spacing: 1.6px; /* 2 * 0.8 */
    pointer-events: none;
}

.pair + .pair {
    margin-top: 3.2vh;
}
/* 4 * 0.8 */
.pair:last-child {
    margin-top: 18vh;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .scroll-layer {
        position: relative;
        min-height: 1190vh;
    }
    
.menu {
    position: fixed;
    top: 4.7vh;
    right: 5vw;
    display: flex;
    gap: 1.6vw; /* 2 * 0.8 */
    font-family: "Inter", sans-serif;
    font-size: 12px; /* 15 * 0.8 */
    letter-spacing: 1.6px; /* 2 * 0.8 */
    z-index: 1000;
}

    .menu a {
        text-decoration: none;
        color: #111111;
    }

        .menu a:not(.active):hover, .menu a.active:hover {
            color: #1a00e9;
        }

        .menu a.active {
            text-decoration: underline;
        }

    .subtitle, .collection, .collection-image-right, .between {
        display: none;
    }

    .right-column {
        flex-direction: column;
        align-items: flex-end;
    }

    .pair-text {
        right: 48px;
    }
    /* 60 * 0.8 */
    /*PROJECT1*/
    .element1 {
        position: absolute;
        top: 140vh;
        left: 37vw;
    }

        .element1 img {
            width: 30%;
            height: 30%;
            object-fit: fill;
        }

    .project1-title {
        position: absolute;
        top: 145vh;
        left: 38.3vw;
        font-family: "Lora", serif;
        font-size: 16px; /* 21 * 0.8 */
        line-height: 1.2;
        text-align: right;
    }

    .project1-type {
        top: 135vh;
        left: 20vw;
        font-family: "Inter", serif;
        font-size: 11px; /* 21 * 0.8 */
        line-height: 1.2;
    }

    .project1-description {
        position: absolute;
        top: 150vh;
        left: 20vw;
        font-family: "Inter", serif;
        font-size: 8px; /* 21 * 0.8 */
        line-height: 1.2;
        letter-spacing: 1.6px;
        text-align: right;
    }


    .project1-photo1 {
        position: absolute;
        top: 165vh;
        left: 25.5vw;
        width: 330px;
        height: 310px;
    }

        .project1-photo1 img {
            width: 80%;
            height: 80%;
            object-fit: fill;
        }

    .project1-photo1scan {
        position: absolute;
        top: 366vh;
        left: 25vw;
        width: 280px;
        height: 310px;
        opacity: 80%
    }

        .project1-photo1scan img {
            width: 80%;
            height: 80%;
            object-fit: fill;
        }

    .project1-photo2 {
        display: none;
    }

    .project1-photo3 {
        position: absolute;
        top: 211vh;
        left: 38.5vw;
        width: 248px;
        height: 313px;
    }

        .project1-photo3 img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

    .project1-photo4 {
        display: none;
    }

    .project1-photo5 {
        position: absolute;
        top: 263vh;
        left: 16.5vw;
        width: 481px;
        height: 533px;
    }

        .project1-photo5 img {
            width: 85%;
            height: 85%;
            object-fit: fill;
        }

    .project1-video1 {
        position: absolute;
        top: 339vh;
        left: 46.5vw;
        width: 231px;
        height: 133px;
        object-fit: cover; /* wypełnia ramkę bez rozciągania */
        display: block;
        z-index: 5;
        filter: saturate(85%);
    }
    /*PROJECT2*/
    .element2 {
        position: absolute;
        top: 430vh;
        left: 37vw;
    }

        .element2 img {
            width: 30%;
            height: 30%;
            object-fit: fill;
        }

    .project2-title {
        position: absolute;
        top: 435vh;
        left: 37.3vw;
        font-family: "Lora", serif;
        font-size: 16px; /* 21 * 0.8 */
        line-height: 1.2;
        text-align: right;
    }

    .project2-photo1 {
        position: absolute;
        top: 442vh;
        left: 28vw;
        width: 744px;
        height: 526.2px;
    }

        .project2-photo1 img {
            width: 75%;
            height: 45%;
            object-fit: fill;
        }

    .project2-description {
        position: absolute;
        top: 483vh;
        left: 55vw;
        font-family: "Inter", serif;
        font-size: 8px; /* 21 * 0.8 */
        line-height: 1.2;
        letter-spacing: 1.6px;
    }


    .project2-photo2 {
        position: absolute;
        top: 495vh;
        left: 28vw;
        width: 744px;
        height: 526,2px;
    }

        .project2-photo2 img {
            width: 40%;
            height: 40%;
            object-fit: fill;
        }

    .project2-photo3 {
        position: absolute;
        top: 521.5vh;
        left: 28vw;
        width: 744px;
        height: 526,2px;
    }

        .project2-photo3 img {
            width: 40%;
            height: 40%;
            object-fit: fill;
        }

    .project2-video1 {
        position: absolute;
        top: 572vh;
        left: 35vw;
        width: 231px;
        height: 133px;
        object-fit: cover;
        display: block;
        z-index: 5;
        filter: saturate(85%);
    }

    .project2-photo4 {
        position: absolute;
        top: 650vh;
        left: 25vw;
        width: 981px;
        height: 179px;
    }

        .project2-photo4 img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

    .project2-scan1 {
        position: absolute;
        top: 550vh;
        left: 70vw;
        width: 150px;
        height: 179px;
        display: none;
    }

        .project2-scan1 img {
            width: 70%;
            height: 70%;
            object-fit: fill;
        }


    .element3 {
        position: absolute;
        top: 640vh;
        left: 37vw;
    }

        .element3 img {
            width: 50%;
        }

    .section2-title {
        position: absolute;
        top: 628vh;
        left: 76vw;
        font-family: "Lora", serif;
        font-size: 13px; /* 21 * 0.8 */
        font-weight: 500;
        line-height: 1.2;
    }

    .project3-title {
        position: absolute;
        top: 645vh;
        left: 37.3vw;
        font-family: "Lora", serif;
        font-size: 16px;
        line-height: 1.2;
        text-align: right;
    }

    .project3-description {
        position: absolute;
        top: 652vh;
        left: 30.3vw;
        font-family: "Inter", sans-serif;
        font-size: 8px;
        letter-spacing: 1.6px;
    }

    .project3-photo1 {
        position: absolute;
        top: 672vh;
        left: 30.3vw;
        width: 260px;
    }

    .project3-photo2 {
        position: absolute;
        top: 695vh;
        left: 30.3vw;
        width: 260px;
    }

    .project3-photo3 {
        position: absolute;
        top: 718vh;
        left: 30.3vw;
        width: 260px;
    }

        .project3-photo1 img,
        .project3-photo2 img,
        .project3-photo3 img {
            width: 100%;
            height: auto;
        }

    .project3-caption {
        position: absolute;
        top: 745vh;
        left: 69vw;
        font-family: "Inter", sans-serif;
        font-size: 9.6px;
        text-align: right;
        letter-spacing: 1.6px;
        text-decoration: underline;
        cursor: pointer;
        color: #111111;
        transition: font-weight 0.2s;
    }

        .project3-caption:hover {
            font-weight: 500;
        }


    .project3-scan1 {
        position: absolute;
        top: 773vh;
        left: 30.3vw;
        width: 200px;
        display: none;
    }

        .project3-scan1 img {
            width: 100%;
        }

    .project3-scan2 {
        position: absolute;
        top: 786vh;
        left: 25.3vw;
        width: 200px;
    }

        .project3-scan2 img {
            width: 140%;
        }

    .project3-scan-text {
        position: absolute;
        top: 768vh;
        left: 30.3vw;
        font-family: "Inter", sans-serif;
        font-size: 8px;
        letter-spacing: 1.6px;
    }

        .project3-scan-text span {
            display: none;
            margin-top: 12px;
            font-size: 9px;
        }

    .section3-title {
        position: absolute;
        top: 878vh;
        left: 76vw;
        font-family: "Lora", serif;
        font-size: 13px; /* 21 * 0.8 */
        font-weight: 500;
        line-height: 1.2;
    }

    .element4 {
        position: absolute;
        top: 890vh;
        left: 37vw;
    }

        .element4 img {
            width: 50%;
            height: 50%;
            object-fit: fill;
        }

    .project4-title {
        position: absolute;
        top: 895vh;
        left: 37.3vw;
        font-family: "Lora", serif;
        font-size: 16px; /* 21 * 0.8 */
        line-height: 1.2;
        text-align: right;
    }

    .project4-description {
        position: absolute;
        top: 900vh;
        left: 37.3vw;
        font-family: "Inter", serif;
        font-size: 8px; /* 21 * 0.8 */
        line-height: 1.2;
        letter-spacing: 1.6px;
    }

    .project4-description2 {
        position: absolute;
        top: 977vh;
        left: 37.3vw;
        font-family: "Inter", serif;
        font-size: 8px; /* 21 * 0.8 */
        line-height: 1.2;
        letter-spacing: 1.6px;
    }

    .project4-description3 {
        position: absolute;
        top: 999vh;
        left: 61vw;
        font-family: "lora", serif;
        font-size: 12px; /* 21 * 0.8 */
        display: none;
    }

    .project4-description4 {
        position: absolute;
        top: 1013vh;
        left: 37.7vw;
        font-family: Inter, serif;
        font-size: 8px; /* 21 * 0.8 */
        line-height: 1.2;
        letter-spacing: 1.6px;
    }

    .project4-photo1 {
        position: absolute;
        z-index: 1;
        top: 915vh;
        left: 37vw;
        width: 202px;
        height: 359px;
    }

        .project4-photo1 img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

    .project4-photo2 {
        position: absolute;
        z-index: 3;
        top: 1006vh;
        left: 59.3vw;
        width: 283px;
        height: 218px;
        display: none;
    }

        .project4-photo2 img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

    .project4-video1 {
        position: absolute;
        top: 1007vh;
        left: 55vw;
        width: 201px;
        height: 105px;
        object-fit: cover;
        display: block;
    }

    .project4-video2 {
        position: absolute;
        z-index: 1;
        top: 964vh;
        left: 75vw;
        width: 61px;
        height: 108.8px;
        object-fit: cover;
        display: block;
    }

    .section5-title {
        position: absolute;
        top: 1058vh;
        left: 73vw;
        font-family: "Lora", serif;
        font-size: 13px; /* 21 * 0.8 */
        font-weight: 500;
        line-height: 1.2;
    }
    /* ===== METAL WORKS ===== */

    .metal-divider {
        position: absolute;
        top: 1050vh; /* lekko nad METAL WORKS – możesz dopasować */
        left: 19vw; /* skraca linię z lewej */
        width: 76vw;
        border-top: 1px dashed #111111;
        opacity: 0.6;
        z-index: 2;
    }

    .metal-item {
        position: absolute;
        top: 1050vh;
    }

        .metal-item img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

    .metal-caption {
        top: 1050vh;
        font-family: "Inter", sans-serif;
        font-size: 8px;
        letter-spacing: 1.6px;
    }

    .metal-1 {
        top: 1070vh;
        left: 67vw;
        width: 178px;
        height: 267px;
    }

        .metal-1 img {
            width: 70%;
            height: 70%;
        }

    .metal-2 {
        top: 1070vh;
        left: 20vw;
        width: 220px;
        height: 267px;
    }

        .metal-2 img {
            width: 70%;
            height: 70%;
        }

    .metal-3 {
        top: 1140vh;
        left: 20vw;
        width: 169px;
        height: 110px;
    }

    .metal-4 {
        top: 1102vh;
        left: 20vw;
        width: 169px;
        height: 110px;
    }

        .metal-4 img {
            width: 140%;
            height: 130%;
        }

    .metal-5 {
        top: 1160vh;
        left: 20vw;
        width: 169px;
        height: 110px;
    }

        .metal-5 img {
            width: 120%;
            height: 120%;
        }
}

.here,
.menu a,
.back-to-top,
.pair,
.pair-thumb,
.project1-title,
.project2-title,
.cv{
    cursor: pointer;

}