/*   DROWNING PROJECT PAGE  左侧固定信息 + 右侧全屏滚动页面 + 图片灯箱  */
/* #region 页面控制变量 */

:root {
    /*  导航栏高度。 如果你的全局导航高度不同，可以修改这里。 */
    --global-nav-height: ;

    --header-height: 64px;
  /* 一键改成高级感十足的金色，全站所有标签瞬间同步变色！ */
    --section-label-color:  #cbb842;
    /* 左侧介绍框的位置。 修改这两个数字，就可以整体移动介绍框。 */
    --sidebar-left: clamp(60px, 3vw, 155px);
    --sidebar-top: clamp(80px, 1vh, 155px);


    /* 左侧介绍框宽度。  */
    --sidebar-width: clamp(160px, 23vw, 690px);


    /* 左侧介绍框内部留白。 */
    --sidebar-padding-x: clamp(20px, 2.2vw, 34px);
    --sidebar-padding-y: clamp(22px, 3vh, 38px);


    /* 半透明程度。 最后一个数字越接近 1，背景越黑。 越接近 0，背景越透明。  */
    --sidebar-background: rgba(7, 7, 7, 0);

    --text-primary: rgba(255,255,255,.94);
    --text-secondary: rgba(255,255,255,.58);

    --line-color: rgba(255, 255, 255, 0);
    --soft-text: rgba(255, 255, 255, 0.68);
}

/* #region 全局基础 */

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

html {
        /* 去掉 height: 100%，让 html 跟随内容自由延展 */
    min-height: 100%; 
    scroll-behavior: smooth;

    background: #05050544;

    scroll-snap-type: y proximity;
}

body {
    min-height: 100vh;

    background: #050505;
    color: #ffffff;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    overflow-x: hidden;
    /* ✨ 核心修改：利用 Flex 布局的自适应能力 */
    display: flex;
    flex-direction: column; 

    overflow-x: hidden;
    position: relative;
}

/* 单独建立一个固定背景层。 无论页面滑到视频还是剧照区，背景图都不会移动。*/
body::before {

    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;

}

/* 全网页统一暗色遮罩 */
body::after {

    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.041) 45%,
            rgba(0, 0, 0, 0.154) 100%
        ),
        rgba(0, 0, 0, 0);
}

a {
    color: inherit;
    text-decoration: none;
}

button { font: inherit;}

.film-grain {
    position: fixed;
    inset: 0;

    z-index: 500;

    pointer-events: none;

    opacity: 0.055;

    mix-blend-mode: soft-light;

    background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100=%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.55'/%3E%3C/svg%3E"),

}

/* #region 全屏吸附滚动容器 */
.scroll-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;

    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    /* Firefox */
    scrollbar-color: #777 #111;
    scrollbar-width: thin;
}
/* Chrome / Edge / Safari */
.scroll-container::-webkit-scrollbar {
    width: 14px;   /* 你的截图比 8px 稍宽，建议 12~14px */
}

.scroll-container::-webkit-scrollbar-track {
    background: #111;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 999px;

    /* 做出截图里两边留黑边的效果 */
    border: 3px solid #111;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}/* #endregion */

/* #endregion */




/* 背景 */
.project-backdrop {
    position: fixed;

    inset: 0;

    z-index: 0;

    background-image:url("https://cdn.liuxinzhu.info/images/For-Adeline/thumb-3.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


/* #endregion */


/* #region 全局导航 */

.global-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 80px;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.205) 0%, rgba(0, 0, 0, 0.198) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 导航栏 LOGO 样式及多语言微调 */
.nav-logo a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
}
:lang(zh-CN).nav-logo a {
    letter-spacing: 1px;
}
:lang(en).nav-logo a {
    letter-spacing: 2px;
}


/* 导航栏链接文字及装饰 */
    .nav-links{
    margin-left: auto;
    }
    .nav-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-left: 30px;
    transition: color 0.3s ease;
}
    .nav-links a:hover, 
    .nav-links a.active {
    color: #ffffff;
}

/* #region 语言切换按钮*/
/* 语言切换按钮核心样式 */ 
.lang-toggle { 
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    /*按钮多圆*/
    border-radius:900px;
    transition: all 0.3s ease;
    margin-left: 15px;
    vertical-align: middle;
    }
    .lang-toggle:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}
/* #endregion */

/* #endregion */



/* #region Sidebar*/

/* #region side 悬浮介绍 */
.project-sidebartext {
    /* 固定在浏览器画面中。页面向下滚动时不移动。*/
    position: fixed;
    left: 3rem;
    top: 9rem;
    z-index: 800;
    width: 26%;
   
    color: #ffffff;

    background: transparent;
    max-height: calc( 100vh - var(--sidebar-top) - 300px );
    padding: var(--sidebar-padding-y) var(--sidebar-padding-x);
  

    /* 背景模糊。*/
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    /* 边框。*/
    border: 0px solid  rgba(255, 255, 255, 0.11);
    box-shadow: 0 25px 70px  rgba(0, 0, 0, 0);
}

.project-number {
    margin-bottom: 12px;
    color: #cbb842;
    font-size: 10px;
    letter-spacing: .15em;
}
.project-year {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 00;
    letter-spacing: .12em;
}
/* #endregion */


/* #region  side 名称*/
/* side 名称 */
.project-heading h1 {

    font-size: clamp(24px, 2.25vw, 37px);
    font-weight: 500;
        letter-spacing: -1px;
        line-height: 1.2;
}


.project-title-zh {
    margin-top: 12px;
    color: rgba(255,255,255,.76);
    font-size: 15px;
    font-weight:200;
    letter-spacing: .08em;
}
/* #endregion */

/* #region 三页导航*//* */
.project-index {
    margin-top: clamp(28px, 5vh, 55px);

    display: grid;
    gap: 19px;
}

.project-index a {
    width: fit-content;

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

    font-size: 9px;
    letter-spacing: 0.25em;

    transition:
        color 250ms ease,
        transform 250ms ease;
}

.project-index a:hover,
.project-index a.is-active {
    color: #ffffff;

    transform: translateX(4px);
}
/* #endregion */


/* #region about 和 工作人员*/
.project-about,
.project-credits {    /* 简介 */
    margin-top: 49px;
    margin-bottom: 50px;
}

.project-about h2,
.project-credits h2 {
    margin-bottom: 15px;
    
    font-size: 17px;
    font-weight: 600;

    color: var(--soft-text);
    letter-spacing: 0.05em;
}

.project-about p {
    color: var(--soft-text);
    font-weight: 200;
    max-width: 450px ;
    font-size: clamp(11px, 0.92vw, 17px);
    line-height: 1.55;
}
.en-mode .project-about p {
    color: var(--soft-text);
    font-weight: 300;
    max-width: 450px ;
    font-size: clamp(10px, 0.92vw, 14px);
    line-height: 1.55;
}



/* 工作人员表 */
.project-credits dl {
    display: grid;
    margin-top: 10px;
}


/* 每一行（职位 + 人名）的外壳 */
.project-credits dl > div {
   display: grid;
    /* 【高级修改】左列宽度也会根据屏幕优雅缩放，大屏下绝不撞车 */
    grid-template-columns: clamp(100px, 11vw, 170px) minmax(0, 2fr);
    gap: 26px; 
    padding: 6px 0px;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05); 
}

/* 职位（左列） */
.project-credits dt {
    color: rgba(255, 255, 255, 0.43);
    font-weight: 300;
    /* 优化字号区间，小屏幕 9px，普通屏幕动态算，大屏幕卡死在 11px */
    font-size: clamp(9px, 0.8vw, 11px);
    letter-spacing: 2px;
    line-height: 1.4;
    /* 删除了多余的内部 grid */
}

/* 职位具体人（右列） */
.project-credits dd {
    /* 核心：清除浏览器自带的默认左边距（dd默认自带大空白） */
    margin: 0; 
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    /* 中间改为 1.1vw，让它在 1200px 左右的屏幕上刚好能完美展现中间值 */
    font-size: clamp(10px, 1.1vw, 13px);
    letter-spacing: 2px;
    line-height: 1.4;
    /* 删除了带 Bug 的内部 grid 和不需要的 padding */
}
/* #endregion */

/* #region 返回按钮*/

.back-button {
    display: inline-block;

    margin-top: 88px;
    align-items: center;
    gap: 8px;
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,.75);

    font-size: 10px;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        color 250ms ease,
        transform 250ms ease;
}

.back-button:hover {
    color: #ffffff;

    
    transform: translateX(-3px);
}
/* #endregion */

/* #endregion */







/* #region 第一页 */

/* 页面滚动内容 */
.project-pages {
    /*
     * 这里不能再添加 margin-left。
     * 否则背景就不能铺满整个窗口。
     */
    width: 100%;
}

/* 第一屏暗角。 它不会影响原图，只是在图片上覆盖一层渐变。*/
.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.14) 40%,
            rgba(0, 0, 0, 0.03) 100%
        ),
        linear-gradient(
            1deg,
            rgba(0, 0, 0, 0.42) 0%,
            transparent 0%
        );

    pointer-events: none;
}

/* 第一屏背景 */ 
.hero-panel {

    background: transparent;
}


/* 推荐清爽流写法 */
.section-label,
.section-label span {
    color: var( --section-label-color);
    font-weight: 500;
    letter-spacing: .16em;
}
/* 介绍文字整体 */
.intro-panel {

    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 100svh;

    /* 整个画面分成 12 列。左侧 3 列留给固定侧边信息，中间和右侧分别放正文。*/
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));

    column-gap: clamp(22px, 2.5vw, 52px);
    align-items: start;

    /* 顶部避开导航栏。左右边距随窗口变化。*/
    padding:  clamp(115px, 13vh, 165px)  clamp(28px, 4vw, 72px)  clamp(70px, 8vh, 120px);

    font-family:  "Courier New",  Courier,    monospace;
    font-size:  clamp(11px, 0.92vw, 17px);
    font-weight: 400;
    line-height: 1.95;
    text-align: left;

    color: rgba(217, 217, 217, 0.88);

}



/* 中间介绍 */
.intro-text1 {

    grid-column: 5 / span 3;
    
    font-weight: 200;
    line-height: 2.5;
    width: 120%;
    margin-top: 0px;
    max-height: none;
    overflow: visible;

}

.intro-text1 .lang-en {

    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    color: #e3e3e3f4;
    width: 110%;
    margin-top: 0px;
    max-height: none;
    overflow: visible;

}

.intro-text2 {

    grid-column: 9 / span 3;


    font-weight: 200;
    line-height: 2.5;
    width: 120%;
    align-self: start;
    margin-top: 30px;
    max-height: none;
    overflow: visible;

}

.intro-text2 .lang-en {

    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    color:  #e3e3e3f4;
    width: 110%;
    margin-top: 0px;
    max-height: none;
    overflow: visible;

}


/* 滚动提示 */
.scroll-cue {
    position: absolute;

    right: clamp(20px, 3vw, 52px);
    bottom: clamp(22px, 4vh, 46px);

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 9px;
    letter-spacing: 0.15em;

    animation:
        scrollCueMove
        2.6s
        ease-in-out
        infinite;
}
@keyframes scrollCueMove {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }

}
/* #endregion */




/* #region 第二页 */
.project-panel {
    position: relative;

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

    scroll-snap-align: start;
}


.film-panel {
 
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100svh;

    padding:
        calc(var(--global-nav-height) + 45px)
        clamp(24px, 5vw, 80px) 55px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.14) 40%,
            rgba(0, 0, 0, 0.03) 75%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.42) 0%,
            transparent 0%
        );
    
}



.film-content {
    /*
     * 因为左侧悬浮介绍会遮住部分视频，
     * 所以桌面端让视频略微向右。
     */
    width: min(72vw, 1250px);

    margin-left: clamp(230px, 18vw, 350px);
}


.video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000000;

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.55);
}




/*影节*/
.video-text {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.35);
    letter-spacing: 0.14em;
}

.film-description {
    margin: 18px 0 8px;
    color: rgba(255, 255, 255, 0.72);
}

.film-description > p:first-child {
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(18px, 1.45vw, 23px);
    font-weight: 500;
    letter-spacing: 0.16em;
}

.film-description > p:nth-child(2) {
    width: min(100%, 720px);
    margin: 0 auto;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.8;
    letter-spacing: 0.04em;
}

.film-description > div {
    margin-top: 8px;
}


.video-frame iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


.film-footer {
    display: flex;
    justify-content: space-between;

    padding-top: 12px;

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

    font-size: 8px;
    letter-spacing: 0.14em;
}

/* #endregion */






/* #region  第三屏画廊 */

.gallery-panel {
    position: relative;

    min-height: 100svh;

    padding:
        calc(var(--global-nav-height) + 70px)
        clamp(24px, 3vw, 52px)
        100px;
    
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.14) 40%,
            rgba(0, 0, 0, 0.03) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.42) 0%,
            transparent 0%
        );



}




.film-panel,
.gallery-panel {

    pointer-events: auto;

}


/*为了避免悬浮信息遮住画廊标题和图片，桌面端让画廊内容整体向右。*/
.gallery-heading,
.image-grid {
    margin-left:  calc(  var(--sidebar-left) + var(--sidebar-width) + clamp(30px, 4vw, 75px) );
}

.gallery-heading {
    margin-bottom: clamp(35px, 6vw, 75px);
}

.gallery-heading p {
    margin-bottom: 12px;
    color: var(--soft-text);
    font-size: 8px;
    letter-spacing: 0.16em;
}

.gallery-heading h2 {

    font-size: clamp(20px, 5vw, 62px);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: -0.05em;
}

.image-grid {
    display: grid;

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

    gap: clamp(10px, 1.4vw, 22px);

    align-items: start;
}


.gallery-item {
    grid-column: span 6;

    margin-bottom: clamp(24px, 4vw, 55px);
}

.gallery-item--wide {
    grid-column: 1 / -1;
}

.gallery-item--portrait {
    grid-column: span 7;
}

.gallery-item > button[data-lightbox] {

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: zoom-in;

    overflow: hidden;

}

.gallery-item img {
    width: 100%;
    height: auto;

    display: block;

    transition:
        transform
        650ms
        cubic-bezier(0.2, 0.75, 0.2, 1),

        filter
        400ms
        ease;
}


.gallery-item button:hover img {
    transform: scale(1.018);
    filter: brightness(0.86);
}


.gallery-item p {
    margin-top: 9px;

    color: var(--soft-text);

    font-size: 8px;
    letter-spacing: 0.12em;
}

/* #region 画廊滚动进入动画 !!!!!!!!!!!!!!!!!!!!*/

/* 初始状态：还没有进入屏幕 */
.gallery-item {

    opacity: 0;

    transform: translateY(45px);

    transition:

        opacity 900ms ease,

        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);

}

/* 滚动进入屏幕后 */
.gallery-item.is-visible {

    opacity: 1;

    transform: translateY(0);

}

/* 每张图片本身增加轻微缩放 */
.gallery-item img {

    transform: scale(1.035);

    transition:

        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),

        filter 400ms ease;

}

.gallery-item.is-visible img {

    transform: scale(1);

}

/* 轮播图片切换动画 */
.gallery-slider .gallery-slide {

    display: none;

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: zoom-in;

}

.gallery-slider .gallery-slide.is-active {

    display: block;

    animation: gallerySlideEnter 700ms

        cubic-bezier(0.22, 1, 0.36, 1);

}

@keyframes gallerySlideEnter {

    from {

        opacity: 0;

        transform: scale(1.025);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* 尊重系统“减少动态效果”设置 */

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

    .gallery-item,

    .gallery-item img,

    .gallery-slider .gallery-slide.is-active {

        animation: none;

        transition: none;

        transform: none;

        opacity: 1;

    }

}

/* #endregion */




/* #region 页面内独立图片进行轮播 */

.gallery-slider {
    position: relative;
}

.gallery-slider-images {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;

}

.gallery-slider .gallery-slide {
    display: none;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;

}

.gallery-slider .gallery-slide.is-active {
    display: block;
}

.gallery-slider .gallery-slide img {
    display: block;
    width: 100%;
    height: auto;
}


/*左右箭头*/ 
.gallery-slider-prev,
.gallery-slider-next {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 42px;
    height: 60px;

    padding: 0;
    border: 0;

    background: rgba(0, 0, 0, 0.15);
    color: #fff;

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

    cursor: pointer;

    transform: translateY(-50%);
    opacity: 0;

    transition:
        opacity 250ms ease,
        background 250ms ease;
}

.gallery-slider-prev {
    left: 0;
}

.gallery-slider-next {
    right: 0;
}

.gallery-slider:hover .gallery-slider-prev,
.gallery-slider:hover .gallery-slider-next {
    opacity: 1;
}

.gallery-slider-prev:hover,
.gallery-slider-next:hover {
    background: rgba(0, 0, 0, 0.55);
}

.gallery-slider-count {
    position: absolute;
    right: 12px;
    bottom: 30px;
    z-index: 10;

    padding: 5px 8px;

    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.82);

    font-size: 9px;
    letter-spacing: 0.12em;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}





/* 手机端箭头常驻显示 */
@media (max-width: 850px) {

    .gallery-slider-prev,
    .gallery-slider-next {
        width: 36px;
        height: 52px;
        font-size: 28px;
        opacity: 1;
    }

}

/* #endregion */


/* #endregion */




/* #region 图片灯箱 */

body.lightbox-open {
    overflow: hidden;
}

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: rgba(0, 0, 0, 0.96);
    color: #fff;
    overflow: hidden;
}

.lightbox[open] {
    display: grid;
    place-items: center;
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.96);
}

.lightbox figure {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin: 0;
}

.lightbox img {
    display: block;
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
}

.lightbox figcaption {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: center;
}

.lightbox-close,
.lightbox-nav {
    position: fixed;
    z-index: 10;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.lightbox-close {
    top: 18px;
    right: 24px;
    font-size: 32px;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* #endregion */


/* #region 语言切换  */
/* ==========================================================================
5. 中英文语言切换显隐控制逻辑
========================================================================== */
    /* 块级/段落元素控制 */
    .lang-zh { display: block; }
    .lang-en { display: none; }   
    body.en-mode .lang-zh { display: none !important; }   
    body.en-mode .lang-en { display: block; }   

    /* 行内元素控制 */
    span.lang-zh { display: inline; }
    span.lang-en { display: none; }
    body.en-mode span.lang-zh { display: none !important; }
    body.en-mode span.lang-en { display: inline; 
}
/* #endregion */


/* 手机端*/
/* #region 手机端 */

@media (max-width: 850px) {

    html {
        scroll-snap-type: none;
    }

    /* #region 手机端导航 */
    .global-nav {
        padding: 10px 10px 10px 6px; 
        flex-wrap: wrap; /* 空间不足时自动换行，防组件溢出屏幕 */
        justify-content: space-between;
        align-items: center; 
    } 

    /* 手机端导航 LOGO 微调 */
        .nav-logo a {
        display: flex;
        align-items: center;
        justify-content: center;
        }   
        :lang(zh-CN) .nav-logo a,
        :lang(en) .nav-logo a { 
        font-size: 8px; 
        letter-spacing: 1px; 
        margin-left: 0px; 
    }
    
    /*导航文字*/
        .nav-links { 
        display: flex !important; /* 强制保持原导航显示状态 */
        flex-wrap: wrap; 
        align-items: center;
        text-align: justify;
        }
        :lang(zh-CN) .nav-links a {
        font-size: 13px; 
        margin-left: 16px;
        }
        .nav-links  a {
        font-size: 12px; 
        margin-left: 8px;   
    }
   
      /* 语言按钮优化 */
        :lang(zh-CN) .lang-toggle {
        margin-left: 10px; 
        padding: 3px 10px; 
        font-size: 10px;
        }
        :lang(en) .lang-toggle {
        margin-left: 10px; 
        padding: 3px 8px; 
        font-size: 9px;
    }
    /* #endregion */

    
    /*  #region  项目信息不再固定，改为正常页面内容 */
    .project-sidebartext {

        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        z-index: 10;
        width: calc(100% - 32px);
        max-width: none;
        max-height: none;

        margin: 90px 16px 28px;
        padding: 24px 22px;

        overflow: visible;

        background: rgba(6, 6, 6, 0.029);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

    }
    .project-heading h1 {   font-size: 22px;    }

    .project-title-zh {
        margin-top: 6px;
        font-size: 17px;
    }
    /* 章节导航横向排列 */
    .project-index {

        display: flex;

        flex-wrap: wrap;

        gap: 8px 18px;

        margin-top: 30px;

    }
    .project-index a {
        font-size: 9px;
        white-space: nowrap;
    }
    /* 简介 */
    .project-about {
        margin-top: 28px;
    }
    .project-about p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.75;
    }
    /* 工作人员表 */
    .project-credits {
        margin-top: 30px;
    }
     .project-credits dl{
        margin-top: 10px;
     }
    .project-credits dl > div {
      
        display: grid;
        grid-template-columns: minmax(110px, 42%) minmax(0, 1fr);
        gap: 8px;
        padding: 2px 2px 0px 0px  ;
        align-items: start;
    }   


    .project-credits dt { /*  职位 */
        
        font-size: 9px;
        line-height: 1.4;
    }
    .project-credits dd { /*  职位具体人 */
        min-width: 0;
        margin: 0;
        font-size: 9px;
        line-height: 1;
        word-break: normal;
        overflow-wrap: break-word;
    }



    /*  返回按钮 */
    .back-button {
        display: inline-block;
        margin-top: 28px;
        font-size: 10px;

    }
    /* #endregion */

    /*  #region 第一屏 */
    .hero-panel { min-height: 72svh; }

    
    .intro-panel {
        min-height: auto;
        display: block;
        padding: 20px 80px 20px 20px;
            
        font-size: 13px;
        line-height: 1.75;
    }

    .intro-text1,
    .intro-text2 {
        width: 100%;
        margin: 0;
        transform: none;

    }

    .intro-text2 {
        margin-top: 20px;
    }



    .scroll-cue {

        position: relative;

        right: auto;

        bottom: auto;

        display: block;

        margin:

            0

            20px

            30px;

        text-align: right;

    }
    /* #endregion */

    /*  #region 第二屏 视频 */
    .film-panel {
        min-height: auto;
        padding: 70px 16px;

    }
    .film-content {
        width: 100%;
        margin-left: 0;
    }
    /* #endregion */


    /*  #region 剧照区域 */
    .gallery-panel {
        padding: 70px 18px 80px;
    }
    .gallery-heading,
    .image-grid {
        margin-left: 0;
    }
    .gallery-item,
    .gallery-item--wide,
    .gallery-item--portrait {
        grid-column: 1 / -1;
    }
    /* #endregion */

}
/* #endregion */