@media (max-width:2560px){
/* ==========================
       HERO
    ========================== */

    .section-1{
        width: 100%;
        background-size: 110%;
        height:clamp(1160px,85vh,860px);
    }

    .hero-content h1 {
    font-size: clamp(7.141rem, 5.917vw, 9.589rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: -30px;
    margin-bottom: 24px;
    color: #ffffff;

    text-shadow: 0 0 40px rgba(0, 0, 0, 0.571), 0 4px 12px rgba(0, 0, 0, 0.347);
    transition: font-size 0.3s ease;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.3),  /* Смягченный ближний ореол */
        0 0 35px rgba(255, 255, 255, 0.2),  /* Нежное промежуточное сияние */
        0 0 65px rgba(255, 255, 255, 0.12), /* Широкое воздушное облако */
        0 20px 50px rgba(0, 0, 0, 0.15);    /* Глубокий, незаметный задний план */

        
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.075);
}


.hero-content p {
    font-size: clamp(1.786rem, 1.49vw, 2.398rem);
    line-height: 1.6;
    letter-spacing: clamp(0.18em, 1.5vw, 0.38em);
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95); 
    z-index: 3;
    

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.2);

    /* Корректируем тень параграфа для деликатного размытия границ */
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.15), 
        0 0 20px rgba(255, 255, 255, 0.08),  
        0 8px 25px rgba(0, 0, 0, 0.25); /* Задняя темная вуаль усилена для читаемости */
}
    /* ==========================
       SECTION 4
    ========================== */

    .artwork-caption{
        margin-top: clamp(20px, 18.15vw, 215px);
    }
}

@media (max-width:1920px){

    .section-1 {
    position: relative;
    width: 100%;
    height:clamp(960px,85vh,860px);


    overflow: hidden;

    background-image: url("../image/art3.png");
    background-size: 120%;
    background-position: calc(50% + 29px) 58%;
    background-repeat: no-repeat;
    background-color: #d0c4be; /* Базовый холст */
}

.artwork-display{
    display:flex;
    flex-direction:column;
    align-items:center;

    width:100%;

    gap:clamp(24px,3vw,36px);

    margin-top:clamp(180px,18vw,350px);
}

.artwork-caption{
    text-align:center;

    color:#3f3f3f;

    font-size:clamp(.82rem,.9vw,.92rem);

    line-height:1.7em;

    letter-spacing:.08em;

    margin-top:clamp(50px,8vw,120px);
}

.hero-content h1 {
    font-size: clamp(3.4rem, 6.5vw, 8.2rem);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: -30px;
    margin-bottom: 24px;
    color: #ffffff;

    text-shadow: 0 0 40px rgba(0, 0, 0, 0.571), 0 4px 12px rgba(0, 0, 0, 0.347);
    transition: font-size 0.3s ease;


    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.3),  /* Смягченный ближний ореол */
        0 0 35px rgba(255, 255, 255, 0.2),  /* Нежное промежуточное сияние */
        0 0 65px rgba(255, 255, 255, 0.12), /* Широкое воздушное облако */
        0 20px 50px rgba(0, 0, 0, 0.15);    /* Глубокий, незаметный задний план */

        
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.075);
}

.hero-content p {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95); 
    z-index: 3;
    

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.2);

    /* Корректируем тень параграфа для деликатного размытия границ */
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.15), 
        0 0 20px rgba(255, 255, 255, 0.08),  
        0 8px 25px rgba(0, 0, 0, 0.25); /* Задняя темная вуаль усилена для читаемости */
}


}

@media (max-width:1600px){

.section-1{
    height:clamp(760px, 50vw, 860px);
}


.section-3-right-column{

width:85%;

}

.section-3-image-wrapper{
    width: clamp(200px, 22vw, 320px); 
}

.section-3-content{
        max-width:620px;
    }

.section-2 .section-3-container{

gap:clamp(40px,4vw,70px) clamp(40px,5vw,80px);

}



.project-footer{
    position: relative;
    border-top: none;
    transform: translateX(20px);
}

.project-footer::before{
    content: "";
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-55%);

    width:min(80%,1200px);
    height: 1px;

    background: rgba(0,0,0,.08);
}
}




@media (max-width: 1440px) {

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

    .section-1{
        height:clamp(720px, 50vw, 820px);
    }

    /* ==========================
       ABOUT
    ========================== */

    .section-2 .section-3-container{
        max-width:1220px;
        gap:clamp(40px,4vw,70px);
    }

    .section-3-content{
        max-width:540px;
    }

    .section-3-image-wrapper{
        width: clamp(175px, 18.9vw, 273px);
    }

    /* ==========================
       DANCE CODE
    ========================== */

    .section-3{
        min-height:clamp(680px, 48vw, 760px);
        height:auto;
    }

    /* ==========================
       SECTION 4
    ========================== */

    .section-4{
        padding:90px 40px;

        min-height:700px;
        height:auto;
    }

    .artwork-display{
        margin-top:clamp(180px,18vw,280px);
    }

    /* ==========================
       PAINTINGS
    ========================== */

        /* Основной блок */
    .section-6-container{
        max-width: 1320px;
        gap:clamp(40px,4vw,70px);
    }

    /* Вторая картина */
    .section-6-container.reverse{
        max-width: 1320px;
        gap:clamp(40px,4vw,70px);
    }

    /* Все картины */
    .painting-image{
        width: 90%;
    }

    /* Только вторая */
    .section-6-container.reverse .painting-image{
        width: 90%;
        max-width: 580px;
    }

}



@media (max-width:1366px){

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

    .section-1{
        background-size:116%;
        height:clamp(700px, 50vw, 780px);
    }

    .section-4 {
        padding:90px 40px;
        min-height:720px;
        height:auto;
    }

    .section-5{
        padding: 80px 0 70px;
    }

    /* =========================
       FOOTER
    ========================= */

    .project-footer{
        max-width:1280px;
        gap:70px;
    }

    /* =========================
       SECTION 6
    ========================= */

    .section-6-container{
        gap:55px;
    }

    .section-6-container.reverse{
        gap:55px;
    }

    .painting-image{
        width:86%;
    }

    .section-6-container.reverse .painting-image{
        width:86%;
    }

    .painting-description, .section-6-container.reverse .painting-description{
        font-size:1.15rem;
        line-height:1.8;
    }

    .qr-image{
        width:125px;
        height:125px;
    }

    .qr-text{
        font-size:.5rem;
    }

    .video-link{
        font-size:.55rem;
    }

    .artwork-display{
        margin-top:320px;
    }

    .artwork-caption{
        margin-top:60px;
        font-size:.84rem;
        line-height:1.6;
    }

}



@media (max-width:1280px){

    /* Hero */
    .hero-content p{
        font-size:1rem;
    }

    .section-1{
        background-size:116%;
        background-position:calc(50% + 23px) 55%;
        height:clamp(670px, 50vw, 760px);
    }

    /* ABOUT */

    .section-3-container{
        gap:clamp(35px,4vw,55px);
    }

    .section-3-content h3{
        font-size:3rem;
    }

    .section-3-content{
        width: 90%;
        max-width: 600px;
        margin-left: auto;
    }

    .content-lead{
        font-size:1.1rem;
    }

    .content-text{
        font-size:.95rem;
    }

    .section-3-image-wrapper{
        width: clamp(192px, 20.8vw, 288px);
    }

    .section-4{
        min-height:610px;
        height:auto;
    }

    /* Dance Code */

    .statement{
        max-width:900px;
    }

    .statement-title{
        font-size:4rem;
    }

    .statement-text{
        font-size:1rem;
    }

    /* Картины */

    .section-6-container{
        gap:70px;
    }

    .painting-image{
        max-width:540px;
    }

    .painting-title{
        font-size:3rem;
    }

    .painting-description, .section-6-container.reverse .painting-description{
        font-size:1rem;
    }

    .qr-image{
        width:110px;
        height:110px;
    }

    /* Footer */

    .project-footer{
        max-width:1180px;
        gap:60px;
        padding:110px 50px 60px;
    }

    .artwork-caption{
        font-size:.72rem;
        margin-top: 15px;
    }

     .footer-label{
        font-size:.68rem;
    }

    .footer-item h4{
        font-size:.92rem;
    }

    .footer-item p,
    .practice-list li,
    .contact-list a{
        font-size:.90rem;
    }

    .site-ending{
        font-size:.62rem;
    }
}

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

    /* ==========================
       SECTION 1
    ========================== */

    .section-1{
        height:clamp(640px, 52vw, 720px);
        background-size: cover;
        margin-top: -60px;
        background-position:calc(50% + 19px) 48%;
    }

    .hero-content h1{
        font-size: 3.95rem;
        margin-top: -25px;
        margin-bottom: 14px;
    }

    .hero-content p{
        font-size: 1.1rem;
        letter-spacing:.38em;
    }


    /* ==========================
       ABOUT
    ========================== */

    .section-3-container{
        gap:clamp(35px,4vw,60px);
    }

    .section-3-content{
        max-width:540px;
    }

    .content-lead{
        font-size:1.05rem;
    }

    .content-text{
        font-size:.93rem;
        line-height:1.8;
    }

    .section-3-image-wrapper{
        width: clamp(181px, 23.1vw, 264px);
    }

        .section-2 .intro-content{
            margin-top:85px;
        }
    
    .section-4 {
        padding:90px 40px;
        min-height:560px;
        height:auto;
    }
    /* ==========================
       SECTION 4
    ========================== */

    .section-4{
        background-size:108%;
    }


    /* ==========================
       SECTION 5
    ========================== */

    .statement{
        max-width:820px;
    }

    .statement-text{
        font-size:1rem;
    }

    .statement-subtitle{
        font-size:1.3rem;
    }

    .concept-subtitle{
        font-size:1.3rem;
    }


    /* ==========================
       SECTION 6
    ========================== */

    .painting-number{
        font-size:1.15rem;
    }

    .painting-title{
        font-size:2.55rem;
        margin-bottom: 18px;
    }

    .painting-line{
        width:70px;
        margin-bottom: 24px;
    }

    .painting-description{
        font-size: 0.94rem;
        line-height: 1.75;
        margin-bottom: 14px;
    }

    .painting-info{
        width:100%;
        max-width: 360px;
    }

    .qr-image{
        width:100px;
        height:100px;

    }

    .qr-block{
        gap: 12px;
    }

    .qr-text{
        font-size:.48rem;
    }

    .video-link{
        font-size:.52rem;
    }


    .project-footer{
        max-width:980px;
        gap:45px;

        margin-top: 150px;
        padding: 90px 50px 60px;
        
    }

    .footer-label{
        font-size:.62rem;
    }

    .footer-year{
        font-size:.72rem;
    }

    .footer-item h4{
        font-size:.85rem;
    }

    .footer-item p,
    .practice-list li,
    .contact-list a{
        font-size:.82rem;
        line-height:1.6;
    }

    .contact-label{
        font-size:.62rem;
    }

    .site-ending{
        font-size:.66rem;
    }

    .section-6-container{
        gap:clamp(20px,3vw,40px);
    }

    .section-6-container.reverse{
        grid-template-columns: .9fr 1.1fr;
        gap:clamp(25px,4vw,45px);
    }
}

@media (max-width:900px){

    .back-to-top{
        display: none;
    }

    .section-1{
        height:clamp(560px,56vw,650px);
        background-size:130%;
    }

    .hero-content h1{
        font-size: clamp(2.97rem, 7.2vw, 4.23rem);
        margin-top: -25px;
        margin-bottom: 14px;
    }

    .hero-content p{
        font-size: clamp(0.8446rem, 1.339vw, 0.9785rem);
    }


    .section-2 .section-3-container{ 
        display:flex;
        flex-direction:column;
        gap:20px;
        align-items:center;
    }

    .section-3-content{
        order:1;
        width:100%;
    }

    .section-3-content h3{
        font-size:clamp(2.6rem,5vw,3.2rem);
        margin-bottom:28px;
    }

    .content-tag{
        font-size:clamp(.75rem,1vw,.95rem);
        margin-bottom:14px;
    }

    .section-3-right-column{
        order:2;
        width:100%;
        max-width:380px;
        margin:0 auto;
        gap: 4px;
    }

    .philosophy-label{
        margin-bottom:2px;
    }

    .philosophy-quote{
        line-height:1.7;
        font-size:.92rem;
    }

    .section-2 .intro-content{
        order:3;
        margin-top:155px
    }

    .section-3-image-wrapper{
        width: clamp(176px, 44vw, 240px);
        max-width:300px;
        height:auto;   
        margin:20px auto;
    }

    .about-text-wrapper{
        margin-bottom:0;
    }

    .content-lead{
        font-size:clamp(1rem,1.6vw,1.15rem);
    }

    .content-text{
        font-size:clamp(.92rem,1.2vw,1rem);
        line-height:1.9;
    }

    /* --------------------------
       Section 5
    ---------------------------*/

    .section-5-container{
        max-width:680px;       /* делаем уже */
        padding:0 35px;
    }

    .statement-text{
        font-size:.97rem;
        font-size:clamp(.88rem,1.2vw,.97rem);
    }

    .statement-subtitle{
        font-size:clamp(1rem,2vw,1.2rem);
    }

    .concept-subtitle{
        font-size:clamp(1rem,2vw,1.18rem);
    }

    .concept-text{
        font-size:.96rem;
    }

    .interaction-block{
        padding:35px 30px;
    }

    .interaction-block p{
        font-size:1rem;
    }

    .section-4 {
        min-height:380px;
        height: auto;
        background-size:118%;
    }


     /* ==========================
       SECTION 6
    ========================== */

    .section-6-container,
    .section-6-container.reverse{
        display:flex;
        flex-direction:column;

        align-items:center;

        max-width:660px;
        margin:20px auto;

        padding:0 25px;
        gap:50px;
    }

    .section-6-container.reverse{
        margin-top: 100px;
    }

    .section-6-container .painting-info,
    .section-6-container.reverse .painting-info{
        order:1;

        width:100%;
        max-width:100%;

        padding:0;

        text-align:left;

        align-items:start;
    }

    .section-6-container .painting-column,
    .section-6-container.reverse .painting-column{
        order:2;

        width:100%;

        display:flex;
        justify-content:center;
        margin-bottom:35px;
    }

    .section-6-container .painting-wrapper,
    .section-6-container.reverse .painting-wrapper{
        justify-content:center;
    }

    /* Картины */

    

    .painting-image,
    .section-6-container.reverse .painting-image{
        width:clamp(430px,78vw,760px);
        max-width:100%;
        height:auto;
    }


    /* ==========================
       Заголовки
    ========================== */

    .painting-number, .section-6-container.reverse .painting-number{
        font-size:clamp(.82rem,1.2vw,1rem);
        margin-bottom:12px;
    }

    .painting-title, .section-6-container.reverse .painting-title{
        font-size:2.15rem;
        margin-bottom:16px;
    }

    .painting-line, .section-6-container.reverse .painting-line{
        width:60px;
        margin-bottom:20px;
    }

    /* ==========================
       Основной текст
    ========================== */

    .painting-description, .section-6-container.reverse .painting-description{
        font-size:clamp(.82rem,1.2vw,1rem);
        line-height:1.8;
        margin-bottom:10px;
    }

    /* ==========================
       QR
    ========================== */

    .qr-image, .section-6-container.reverse .qr-image{
        width:78px;
        height:78px;
        padding:6px;

        display:block;
        margin:0 auto;
    }


    .qr-text, .section-6-container.reverse .qr-text{
        font-size:.48rem;

        width:100%;
        text-align:center;
    }

    .video-link, .section-6-container.reverse .video-link{
        font-size:.52rem;
        letter-spacing:.18em;
        margin-top:-5px;

        display:block;
        text-align:center;
    }

    .qr-block,
    .section-6-container.reverse .qr-block{

        width:100%;

        display:flex;
        flex-direction:column;

        justify-content:center;
        align-items:center;

        text-align:center;

        margin: 32px auto -20px;
    }

    .section-6-container.reverse .qr-block{
        margin:32px auto -20px;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    
    .project-footer{
        max-width: 980px; /* Оставляем прежней, чтобы держать общую сетку сайта */
        gap: 28px;        /* Было: 45px */

        margin-top: 120px;        /* Было: 150px */
        padding: 90px 40px 35px;  /* Было: 90px 50px 60px */

        left: 0;
    }

    .footer-label{
        font-size: .55rem; /* Было: .62rem */
    }

    .footer-year{
        font-size: .65rem; /* Было: .72rem */
    }

    .footer-item h4{
        font-size: .75rem; /* Было: .85rem */
    }

    .footer-item p,
    .practice-list li,
    .contact-list a{
        font-size: .72rem; /* Было: .82rem */
        line-height: 1.5;  /* Было: 1.6 */
    }

    .contact-list{
        gap: clamp(0.85px, 6.8vw, 8.6px);
    }

    .contact-label{
        font-size: .55rem; /* Было: .62rem */
    }

    .site-ending{
        font-size: .60rem; /* Было: .66rem */
        margin-bottom: -40px;
    }

}


@media (max-width: 768px){

        /* ==========================
    HERO
    ========================== */
    .section-1{
        height:clamp(490px,56vw,560px);
    }

    .hero-content h1{
        font-size: clamp(2.717rem, 7.315vw, 3.971rem);
        margin-top: -10px;
        margin-bottom: 14px;
    }

    .hero-content p{
        font-size: clamp(0.888rem, 2.09vw, 0.993rem);
    }


    /* ==========================
    ABOUT
    ========================== */

    .section-3-content h3{
        font-size:2.6rem;
    }

    .content-tag{
        font-size:.82rem;
    }

    .content-lead{
        font-size:1rem;
    }

    .content-text{
        font-size:.92rem;
        line-height:1.8;
    }

    .section-3-image-wrapper{
        width:clamp(210px,58%,280px);
    }


    /* ==========================
    SECTION 4
    ========================== */

    .section-4{
        min-height:350px;
        max-height: 350px;
        background-size:130%;
    }

    .artwork-display{
        margin-top:225px;
    }

    .artwork-caption{
        font-size:.58rem;
        line-height:1.45;
        margin-top:8px;
    }


    /* ==========================
    SECTION 5
    ========================== */

    .section-5-container{
        padding:0 28px;
    }

    .statement-title{
        font-size:3rem;
    }

    .statement-text{
        font-size:.92rem;
    }

    .statement-subtitle,
    .concept-subtitle{
        font-size:1.05rem;
    }

    .concept-text{
        font-size:.9rem;
    }

    .interaction-block{
        padding:30px 24px;
    }

    .interaction-block p{
        font-size:.92rem;
    }


    /* ==========================
    SECTION 6
    ========================== */

    .section-6-container,
    .section-6-container.reverse{
        max-width:560px;
        gap:36px;
    }

    .painting-image,
    .section-6-container.reverse .painting-image{
        width:108%;
        max-width:680px;
    }

    .painting-number{
        font-size:.9rem;
    }

    .painting-title{
        font-size:1.9rem;
    }

    .painting-description{
        font-size:.9rem;
    }

    .qr-image{
        width:72px;
        height:72px;
    }

    .qr-text{
        font-size:.45rem;
    }

    .video-link{
        font-size:.48rem;
    }


    /* ==========================
    FOOTER
    ========================== */

    .project-footer{
        padding:80px 25px 30px;
        gap:24px;
    }

    .footer-label{
        font-size:.52rem;
    }

    .footer-year{
        font-size:.6rem;
    }

    .footer-item h4{
        font-size:.72rem;
    }

    .footer-item p,
    .practice-list li,
    .contact-list a{
        font-size:.68rem;
    }

    .site-ending{
        font-size:.56rem;
    }


}


@media (max-width:576px){

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

    .section-1{
        min-height:450px;
        height:auto;
        padding:110px 0 80px;
        background-size:155%;
    }

    .hero-content h1{
        font-size: clamp(2.76rem, 8.51vw, 3.83rem);
    }

    .hero-content p{
        font-size: 0.957rem;
        letter-spacing: 0.30em;
    }


    /* ==========================
    ABOUT
    ========================== */

    .section-3-content h3{
        font-size: clamp(2.07rem, 6.9vw, 3.11rem);
    }

    .content-tag{
        font-size: clamp(0.86rem, 2.07vw, 0.98rem);
    }

    .content-lead{
        font-size:.95rem;
    }

    .content-text{
        font-size:.88rem;
        line-height:1.8;
    }

    .section-3-image-wrapper{
        width:clamp(190px,55%,250px);
        max-width:250px;
    }


    /* ==========================
    SECTION 4
    ========================== */

    .section-4{
        min-height:300px;
        height:auto;
        background-size:125%;
    }

    .artwork-display{
        margin-top: 190px;
    }

    .artwork-caption{
        font-size: clamp(0.56rem, 1.8vw, 0.72rem);
        line-height:1.45;
        margin-top:8px;
    }


    /* ==========================
    SECTION 5
    ========================== */

    .statement-title{
        font-size:clamp(2.5rem,7vw,3rem);
    }

    .statement-text{
        font-size:clamp(.84rem,2vw,.9rem);
    }

    .section-5-container .statement-subtitle,
    .section-5-container .concept-subtitle{
        font-size: clamp(0.92rem, 2.5vw, 1.05rem);
    }

    .section-5-container .concept-text {
        font-size: clamp(1.025rem, 2.53vw, 1.139rem);
    }


    .interaction-block{
        padding:28px 24px;
    }

    .section-5-container .concept-block{
        padding: 38px 20px;
    }


    /* ==========================
    SECTION 6
    ========================== */

    .section-6-container,
    .section-6-container.reverse{
        max-width:520px;
        gap:40px;
    }

    .painting-image,
    .section-6-container.reverse .painting-image{
        width:95%;
        max-width:640px;
        height:auto;
    }

    .painting-number{
        font-size:.92rem;
    }

    .painting-title{
        font-size:clamp(1.7rem,5vw,1.95rem);
    }

    .painting-description{
        font-size:clamp(.82rem,2vw,.92rem);
        line-height:1.7;
    }

    .qr-image{
        width:72px;
        height:72px;
    }

    .qr-text{
        font-size:.44rem;
    }

    .video-link{
        font-size:.48rem;
    }

    .section-6-container .painting-info, .section-6-container.reverse .painting-info{
        padding: 0 24px;
    }


    /* ==========================
    FOOTER
    ========================== */

    .project-footer{
        gap:18.5px;
        padding:60px 28px 23px;
    }

    .footer-label{
        font-size: clamp(0.44rem, 1.2vw, 0.481rem);
    }

    .footer-year{
        font-size: clamp(0.52rem, 1.5vw, 0.574rem);
    }

    .footer-item h4{
        font-size: clamp(0.6rem, 1.8vw, 0.666rem);
    }

    .footer-item p,
    .practice-list li,
    .contact-list a{
        font-size: clamp(0.56rem, 1.7vw, 0.629rem);
    }

    .contact-label{
        font-size: clamp(0.44rem, 1.2vw, 0.481rem);
    }

    .site-ending{
        font-size: clamp(0.48rem, 1.4vw, 0.518rem);
    }

}


@media (max-width:480px){

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

    .section-1{
        min-height:clamp(340px,86vw,400px);
        height:clamp(340px, 86vw, 400px);
        padding:clamp(70px,18.75vw,90px) 0 clamp(55px,14.6vw,70px);
        background-size:clamp(165%,175vw,175%);
        background-position:calc(44% - clamp(0px,1.8vw,8px)) center;
        transform:translateY(clamp(10px,4.5vw,20px));
    }

    .hero-content h1{
        font-size: clamp(2rem, 9.64vw, 3.26rem);
        line-height:1.08;
    }

    .hero-content p{
        font-size: clamp(0.72rem, 1.964vw, 0.924rem);
        letter-spacing: clamp(0.14em, 1.836em, 0.22em);
    }


    /* ==========================
    ABOUT
    ========================== */

    .section-3{
        padding:clamp(80px,22.9vw,110px) clamp(8px,2.5vw,0);
    }

    .section-3-content{ 
        padding-left:clamp(8px,2.5vw,0); 
        padding-right:clamp(8px,2.5vw,0); 
    }

    .section-3-content h3{
        font-size:clamp(1.65rem,6.4vw,2.05rem);
        margin-bottom:clamp(17px,4.6vw,22px);
    }

    .content-tag{
        font-size:clamp(.62rem,2.35vw,.75rem);
        letter-spacing:clamp(.20em,2.7vw,.28em);
    }

    .content-lead{
        font-size:clamp(.78rem,2.8vw,.90rem);
        line-height:1.7;
    }

    .content-text{
        font-size:clamp(.72rem,2.63vw,.84rem);
        line-height:1.75;
    }

    .section-3-image-wrapper{
        width:clamp(170px,56%,230px);
        max-width:230px;
    }

    .philosophy-label{
        font-size:clamp(.54rem,2.03vw,.65rem);
    }

    .philosophy-quote{
        font-size:clamp(.68rem,2.5vw,.80rem);
        line-height:1.6;
    }


    /* ==========================
    SECTION 4
    ========================== */

    .section-4{
        min-height:clamp(190px,50vw,240px);
        height:clamp(190px,50vw,240px);
        background-size:clamp(118%,128vw,140%);
        
    }

    .artwork-display{
        margin-top:clamp(20px,35vw,150px);

    }

    .artwork-caption{
        font-size:clamp(.30rem,1.1vw,.558rem);
        line-height:1.4;
    }


    /* ==========================
    SECTION 5
    ========================== */

    .section-5-container{
        width:100%;
        padding-left:clamp(8px,2vw,12px);
        padding-right:clamp(8px,2vw,12px);
    }

    .statement{
        width:100%;
        max-width:100%;
        padding:0 clamp(6px,2.9vw,14px);
    }

    .statement-title{
        font-size:clamp(1.75rem,8vw,2.6rem);
        margin-bottom:clamp(35px,10.4vw,50px);
    }

    .statement-text{
        font-size:clamp(.66rem,2.45vw,.84rem);
        line-height:1.8;
    }

    .section-5 .statement-ending{
        font-size: clamp(0.756rem, 2.94vw, 1.103rem);
    }

    .section-5-container .statement-subtitle,
    .section-5-container .concept-subtitle{
        font-size: clamp(0.756rem, 2.94vw, 1.103rem);
        line-height:1.6;
    }

    .concept-block{ 
        width:100%; 
        max-width:clamp(280px,91vw,680px); 
        margin-left:auto; 
        margin-right:auto; 
    }

    .section-5-container .concept-text{
        font-size: clamp(0.732rem, 2.596vw, 1.061rem);
        line-height:1.75;
    }

    .section-5{
        padding: 60px 0px 10px;
    }

    .interaction-block{
        width:100%;
        max-width:clamp(275px,90vw,680px);

        padding: clamp(15px,4.6vw,22px) clamp(11px,3.75vw,18px); 
        margin: clamp(35px,10.4vw,50px) auto;
    }

    .interaction-block p{
        font-size:clamp(.68rem,2.75vw,.88rem);
    }


    /* ==========================
    SECTION 6
    ========================== */

    .section-6{
        padding: 0px 0px 60px;
    }

    .section-6-container,
    .section-6-container.reverse{
        max-width:430px;
        width: 100%;
        padding:0 clamp(10px,3.75vw,18px);
        gap:clamp(22px,5.8vw,30px);
    }

    .painting-image,
    .section-6-container.reverse .painting-image{
        width:92%;
        max-width:560px;
        height: auto;
    }

    .painting-number, .section-6-container.reverse .painting-number{
        font-size:clamp(.65rem,2.56vw,.82rem);
    }

    .painting-title, .section-6-container.reverse .painting-title{
        font-size:clamp(1.28rem,6vw,1.8rem);
        margin-bottom:clamp(8px,2.5vw,12px);
    }

    .painting-line, .section-6-container.reverse .painting-line{
        width:clamp(38px,10vw,48px);
        margin-bottom:clamp(11px,3.3vw,16px);
    }

    .painting-description, .section-6-container.reverse .painting-description{
        font-size:clamp(.67rem,2.56vw,.82rem);
        line-height:1.65;
    }

    .qr-image, .section-6-container.reverse .qr-image{
        width:clamp(50px,13.3vw,64px); 
        height:clamp(50px,13.3vw,64px); 
        padding:clamp(4px,1.05vw,5px);
        border-radius: clamp(4.2px, 1.575vw, 14.7px);
    }

    .qr-text, .section-6-container.reverse .qr-text{
        font-size:clamp(.34rem,1.3vw,.40rem);
    }

    .video-link, .section-6-container.reverse .video-link{
        font-size:clamp(.37rem,1.45vw,.44rem);
        letter-spacing:clamp(.11em,1.8vw,.15em);
    }


    /* ==========================
    FOOTER
    ========================== */

    .project-footer{
        width: 100%;
        

        max-width:clamp(270px,72vw,400px);

        gap:clamp(8px,2.2vw,12px);

        padding: clamp(24px,6.4vw,45px) 
                 clamp(6px,1.7vw,12px) 
                 clamp(9px,2.5vw,18px);

        margin-top:clamp(45px,12vw,80px);
    }

    .footer-label{
        font-size:clamp(.34rem,1.25vw,.46rem);
        margin-bottom:clamp(12px,3.5vw,34px);
    }

    .footer-year{
        font-size:clamp(.34rem,1.23vw,.53rem);
    }

    .footer-item{
        margin-bottom:clamp(13px,4vw,24px);
    }

    .footer-item h4{
        font-size:clamp(.42rem,1.68vw,.63rem);
        margin-bottom:clamp(2px,.9vw,8px);
    }

    .footer-item p,
    .practice-list li,
    .contact-list a{
        font-size:clamp(.39rem,1.43vw,.61rem);
        line-height:1.34;
    }

    .contact-list{
        gap: clamp(3px, 0.8vw, 8px);
    }

    .practice-list {
        gap: clamp(3px, 0.8vw, 8px);
    }

    .contact-label{
        font-size:clamp(.29rem,1.06vw,.46rem);
        margin-bottom: clamp(1.35px, 0.608vw, 5.4px);
    }

    .site-ending{
        font-size:clamp(.32rem,1.15vw,.49rem);
        padding: clamp(38px,10vw,70px) 0 5px;
    }



    /* ========================== INTRO CONTENT ========================== */ 
    .section-2 .intro-content{ 
        width:100%; 
        max-width:clamp(280px,88vw,600px); 
        margin-left:auto; 
        margin-right:auto; 
        padding:0 clamp(8px,3vw,14px); 
        margin: 90px 0px 40px;
    } 
    
    .section-2 .intro-content h2{ 
        font-size:clamp(1.42rem,9.5vw,3.789rem); 
        margin-bottom:clamp(6px,3.5vw,12.6px); 
        white-space: nowrap;
    } 
    
    .section-2 .intro-year{ 
        font-size:clamp(.54rem,3.1vw,.909rem); 
        margin-bottom:clamp(9px,5vw,27.9px); 
    } 
    
    .section-2 .intro-subtitle{ 
        font-size:clamp(.72rem,4.4vw,1.458rem); 
        margin-bottom:clamp(8px,4.2vw,16.2px); 
    } 
    
    .section-2 .intro-description{ 
        font-size:clamp(.60rem,3.5vw,1.17rem); 
        line-height:1.6; 
    }
}
    /* ============================================================================
    RESPONSIVE STABILITY LAYER
    Added without touching style.css.
    The existing breakpoint design remains intact; these rules only smooth the
    gaps between breakpoints and prevent content from forcing horizontal/vertical
    breakage on intermediate devices.
    ============================================================================ */

    /* Never let intrinsic content make a grid/flex track wider than the viewport. */
    .section-2 .section-3-container > *,
    .section-6-container > *,
    .section-6-container.reverse > *,
    .project-footer > * {
        min-width: 0;
    }

    .section-3-content,
    .section-3-right-column,
    .intro-content,
    .statement,
    .statement-text,
    .painting-info {
        min-width: 0;
    }

 /* 
    @media (min-width: 769px) and (max-width: 1366px) {
        .section-2 .section-3-container {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        }

        .section-6-container {
            grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        }

        .section-6-container.reverse {
            grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        }

        .project-footer {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
        }

        .painting-image,
        .section-6-container.reverse .painting-image {
            max-width: 100%;
            height: auto;
        }
    }
*/
    /* --------------------------------------------------------------------------
    1025–1279: smooth the jump between the 1280 and 1024 presets.
    Values stay inside the existing visual range instead of introducing a new
    design.
    -------------------------------------------------------------------------- */
/*
    @media (min-width: 1025px) and (max-width: 1279px) {
        .section-3-container,
        .section-2 .section-3-container {
            gap: clamp(48px, 5vw, 60px);
        }

        .section-3-content {
            width: clamp(82%, calc(6vw + 6%), 90%);
            max-width: clamp(540px, calc(7vw + 500px), 600px);
        }

        .section-3-image-wrapper {
            width: clamp(58%, calc(8vw + 48%), 62%);
            height: clamp(330px, 37vh, 53vh);
        }

        .section-6-container,
        .section-6-container.reverse {
            gap: clamp(50px, 7vw, 70px);
        }

        .painting-title {
            font-size: clamp(2.55rem, 3.4vw, 3rem);
        }

        .project-footer {
            gap: clamp(45px, 5vw, 60px);
            padding-left: clamp(40px, 4vw, 50px);
            padding-right: clamp(40px, 4vw, 50px);
        }
    }
*/
    /* --------------------------------------------------------------------------
    769–900: tablets are too narrow for the desktop painting/about grids.
    Switch only these heavy two-column areas to the same stacked composition
    already used below 768px, so the transition is not a cliff.
    -------------------------------------------------------------------------- */
/*
    @media (min-width: 769px) and (max-width: 900px) {
        .section-2 .section-3-container {
            display: flex;
            flex-direction: column;
            gap: 28px;
            align-items: center;
        }

        .section-3-content {
            order: 1;
            width: 100%;
            max-width: 680px;
            margin-left: 0;
        }

        .section-3-right-column {
            order: 2;
            width: min(100%, 420px);
            max-width: 420px;
            margin: 0 auto;
        }

        .section-2 .intro-content {
            order: 3;
            width: 100%;
            margin-top: clamp(90px, 12vw, 130px);
        }

        .section-3-image-wrapper {
            width: 82%;
            height: clamp(360px, 47vh, 500px);
            margin: 0 auto;
        }

        .section-3-content h3 {
            font-size: clamp(2.8rem, 5vw, 3.5rem);
        }

        .section-6-container,
        .section-6-container.reverse {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            padding-left: clamp(24px, 5vw, 40px);
            padding-right: clamp(24px, 5vw, 40px);
            gap: 32px;
        }

        .section-6-container.reverse {
            margin-top: 110px;
        }

        .section-6-container .painting-info,
        .section-6-container.reverse .painting-info {
            order: 1;
            width: 100%;
            max-width: 100%;
            padding: 0;
            text-align: left;
            align-items: flex-start;
        }

        .section-6-container .painting-column,
        .section-6-container.reverse .painting-column {
            order: 2;
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
        }

        .section-6-container .painting-wrapper,
        .section-6-container.reverse .painting-wrapper {
            width: 100%;
            justify-content: center;
        }

        .painting-image,
        .section-6-container.reverse .painting-image {
            width: min(100%, 680px);
            max-width: 100%;
            height: auto;
        }

        .section-6-container.reverse .qr-block {
            padding-right: 0;
            margin-left: 0;
            width: min(100%, 430px);
        }
    }
*/

    /* --------------------------------------------------------------------------
    481–767: the old 768px preset was being stretched over almost 300px of
    different device widths. Make the mobile composition scale continuously.
    -------------------------------------------------------------------------- */
/*
    @media (min-width: 481px) and (max-width: 767px) {
        .section-1 {
            height: clamp(45vh, 50vw, 47vh);
            background-size: clamp(140%, calc(31vw + 110%), 150%);
        }

        .hero-content {
            width: 100%;
            padding: 0 22px;
        }

        .hero-content h1 {
            width: 100%;
            margin-left: 0;
            font-size: clamp(2.45rem, 6.9vw, 3.3rem);
            letter-spacing: clamp(.08em, calc(.2vw + .04em), .14em);
            white-space: nowrap;
        }

        .hero-content p {
            font-size: clamp(.86rem, 1.8vw, 1.05rem);
            letter-spacing: clamp(.26em, .8vw, .4em);
        }

        .section-3-content h3 {
            font-size: clamp(2.7rem, 6.3vw, 3.2rem);
        }

        .content-tag {
            font-size: clamp(.8rem, 1.7vw, .95rem);
        }

        .content-lead {
            font-size: clamp(1rem, 2.05vw, 1.15rem);
        }

        .content-text {
            font-size: clamp(.88rem, 1.8vw, 1rem);
            line-height: 1.8;
        }

        .section-3-right-column {
            width: min(100%, 380px);
            max-width: 380px;
        }

        .section-2 .intro-content {
            margin-top: clamp(100px, 18vw, 155px);
        }

        .section-3-image-wrapper {
            width: clamp(80%, calc(7vw + 72%), 85%);
            height: clamp(430px, 55vh, 560px);
            max-height: 560px;
            min-height: 430px;
            transform: scale(.80);
        }

        .statement-title {
            font-size: clamp(2.5rem, 5.8vw, 3.3rem);
        }

        .statement-subtitle {
            font-size: clamp(1rem, 2.2vw, 1.2rem);
        }

        .statement-text,
        .concept-text,
        .interaction-block p {
            font-size: clamp(.88rem, 1.8vw, .97rem);
        }

        .painting-title,
        .section-6-container.reverse .painting-title {
            font-size: clamp(1.8rem, 4.2vw, 2.15rem);
        }

        .painting-description,
        .section-6-container.reverse .painting-description {
            font-size: clamp(.88rem, 1.65vw, 1rem);
        }

        .project-footer {
            left: clamp(-20px, -3vw, -5px);
            gap: clamp(26px, 4.5vw, 32px);
            padding-left: clamp(20px, 3.5vw, 28px);
            padding-right: clamp(20px, 3.5vw, 28px);
        }
    }
*/
    /* Tiny phones: remove only the known sources of horizontal overflow. */
/*
    @media (max-width: 480px) {
        .hero-content {
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
        }

        .section-2 .section-3-container,
        .section-6-container,
        .section-6-container.reverse {
            width: 100%;
            min-width: 0;
        }

        .section-3-content,
        .section-3-right-column,
        .intro-content,
        .statement,
        .statement-text,
        .painting-info,
        .project-footer {
            min-width: 0;
        }

        .philosophy-quote {
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }
*/