/* ===== Editorial Floating Artwork Display ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --w:#fff;--ow:#f9f8f6;--lg:#f0efec;--mg:#b5b3ae;--dg:#3a3937;--nb:#1a1918;
    --shadow-soft: 0 8px 40px rgba(0,0,0,0.06);
    --shadow-hover: 0 16px 60px rgba(0,0,0,0.1);
    --fs:'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
    --fr:'Georgia','Times New Roman',serif;
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--fs);background:var(--w);color:var(--nb);line-height:1.6;overflow-x:hidden}

/* ========== FLOATING GALLERY ========== */
.float-gallery{
    position:relative;
    width:100%;
    height:220vh;
    overflow:visible;
}

/* Individual floating artwork */
.float-art{
    position:absolute;
    cursor:default;
    will-change:transform;
    transition:box-shadow 0.6s ease;
    border-radius:2px;
    overflow:hidden;
    background:var(--lg);
}

.float-art img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:2px;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}

/* 三级页没有加载自定义光标脚本，样式文件却把光标藏了 → 恢复系统光标，否则看不到鼠标 */
body, a, button, input, select, textarea, [role="button"]{
    cursor:auto !important;
}

/* 桌面端：悬浮框高度自动跟随图片比例 —— 图完整显示，不裁切、不留灰边 */
.float-art{
    height:auto !important;
}
.float-art img{
    height:auto !important;
    width:100% !important;
    object-fit:contain !important;
}

/* Hover: subtle scale + soft shadow */
.float-art:hover{
    box-shadow: var(--shadow-hover);
    z-index:10 !important;
}
.float-art:hover img{
    transform:scale(1.04);
}

/* ========== FLOATING TEXT ELEMENTS ========== */
.float-label{
    position:absolute;
    font-family:var(--fs);
    font-weight:300;
    letter-spacing:0.06em;
    color:var(--nb);
    white-space:nowrap;
    pointer-events:none;
    will-change:transform;
    opacity:0.85;
}

.float-number{
    font-size:clamp(4rem,8vw,7rem);
    font-weight:200;
    letter-spacing:-0.03em;
    color:var(--mg);
    line-height:1;
    opacity:0.4;
}

.float-name{
    font-size:clamp(1.8rem,3.5vw,2.8rem);
    font-weight:200;
    letter-spacing:-0.01em;
    color:var(--nb);
    line-height:1.15;
}

.float-meta{
    font-size:clamp(0.7rem,0.9vw,0.8rem);
    font-weight:400;
    letter-spacing:0.12em;
    color:var(--dg);
    text-transform:uppercase;
}

.float-desc{
    font-family:var(--fr);
    font-size:clamp(0.9rem,1.1vw,1rem);
    font-weight:400;
    line-height:1.8;
    color:var(--dg);
    max-width:380px;
    white-space:normal;
}

/* ========== BACK TO PROJECTS — minimal text link ========== */
.back-link{
    position:fixed;
    top:50px;
    left:50px;
    z-index:999;
    text-decoration:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:0;
    overflow:hidden;
    white-space:nowrap;
    font-family:var(--fs);
    font-size:0.72rem;
    font-weight:300;
    letter-spacing:0.14em;
    color:var(--mg);
    text-transform:uppercase;
    transition:color 0.4s ease;
}

.back-link:hover{
    color:var(--dg);
}

.back-link__arrow{
    display:inline-block;
    transition:transform 0.35s cubic-bezier(0.25,0.1,0.25,1);
    flex-shrink:0;
    font-size:1em;
    line-height:1;
}

.back-link:hover .back-link__arrow{
    transform:translateX(-4px);
}

.back-link__text{
    display:inline-block;
    width:0;
    overflow:hidden;
    white-space:nowrap;
    transition:width 0.35s cubic-bezier(0.25,0.1,0.25,1);
    vertical-align:middle;
}

.back-link:hover .back-link__text{
    width:10.5em; /* width of " BACK TO PROJECTS" */
}

/* ========== PROJECT HEADER — minimal, visible ========== */
.project-header{
    position:relative;
    max-width:1200px;
    margin:0 auto;
    padding:5rem 4rem 1rem;
}
.project-number{
    font-family:var(--fs);
    font-size:0.75rem;
    font-weight:400;
    letter-spacing:.2em;
    color:var(--mg);
    margin-bottom:1rem;
}
.project-name{
    font-family:var(--fs);
    font-size:clamp(2.5rem,5vw,4rem);
    font-weight:200;
    letter-spacing:-.02em;
    color:var(--nb);
    line-height:1.1;
    margin-bottom:.8rem;
}
.project-detail{
    display:flex;
    gap:.5rem;
    align-items:center;
    margin-bottom:.5rem;
}
.project-type,.project-year{
    font-family:var(--fs);
    font-size:.7rem;
    font-weight:400;
    letter-spacing:.15em;
    color:var(--dg);
    text-transform:uppercase;
}
.project-dot{color:var(--mg);font-size:.6rem}
.project-tags{
    font-family:var(--fs);
    font-size:.65rem;
    font-weight:400;
    letter-spacing:.1em;
    color:var(--mg);
}
.project-tags span:not(:last-child)::after{content:' / '}
.project-desc{
    display:none;
}

.project-meta{
    display:flex;
    gap:2rem;
    align-items:flex-start;
    margin-bottom:1.5rem;
}

.project-number{
    font-family:var(--fs);
    font-size:0.8rem;
    font-weight:400;
    letter-spacing:.15em;
    color:var(--mg);
    padding-top:.4rem;
    flex-shrink:0;
}

.project-info{flex:1}

.project-name{
    font-family:var(--fs);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:200;
    letter-spacing:-.01em;
    color:var(--nb);
    line-height:1.15;
    margin-bottom:.6rem;
}

.project-detail{
    display:flex;
    gap:.5rem;
    align-items:center;
    margin-bottom:.5rem;
}

.project-type,.project-year{
    font-family:var(--fs);
    font-size:.75rem;
    font-weight:400;
    letter-spacing:.12em;
    color:var(--dg);
    text-transform:uppercase;
}

.project-dot{color:var(--mg);font-size:.6rem}

.project-tags{
    font-family:var(--fs);
    font-size:.7rem;
    font-weight:400;
    letter-spacing:.1em;
    color:var(--mg);
}
.project-tags span:not(:last-child)::after{content:' / '}

.project-desc{
    font-family:var(--fr);
    font-size:.95rem;
    font-weight:400;
    line-height:1.8;
    color:var(--dg);
    max-width:480px;
}

/* ========== FLOATING ANIMATION — driven by JS via transform ========== */
/* (no CSS keyframes — JS rAF drives all transforms for parallax + float combined) */

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
    .float-gallery{
        position:relative;
        display:flex;
        flex-direction:column;
        gap:2.5rem;
        padding:0 1.5rem;
        min-height:auto;
    }
    .float-art{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        animation:none !important;
        transform:none !important;
    }
    .float-art img{
        position:relative !important;
        height:auto !important;
    }
    .float-label{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        transform:none !important;
        animation:none !important;
        margin-bottom:.5rem;
    }
    .project-header{
        padding:4rem 1.5rem 1.5rem;
    }
    .float-desc{max-width:100%}
}

@media(max-width:600px){
    .project-header{padding:3rem 1rem 1rem}
    .float-gallery{padding:0 1rem;gap:2rem}
}

/* 移动端：第三级项目页 —— 图片纵向全宽、完整显示(不裁切)、去掉浮动动画，减少卡顿 */
@media(max-width:600px){
    .float-gallery{
        height:auto !important;
        display:flex;
        flex-direction:column;
        gap:1.5rem;
        padding:0 1rem 2rem;
    }
    .float-art{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        margin-bottom:0;
        overflow:visible;
        will-change:auto;
    }
    .float-art img{
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
    }
}