*{
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
}


body{

margin:0;

background:#fff;

color:#111;

font-family:
Helvetica,
Arial,
sans-serif;

}


body.viewer-open{

overflow:hidden;

}


a{

color:inherit;

text-decoration:none;

}


/* =========================
首页 Header
========================= */


.site-header{

height:100px;

padding:40px 60px;

display:flex;

justify-content:space-between;

align-items:center;

position:absolute;

top:0;

left:0;

width:100%;

z-index:10;

}


.light-header{

color:white;

}


.dark-header{

color:#111;

}


.logo{

font-size:22px;

letter-spacing:6px;

font-weight:400;

}


nav a{

margin-left:34px;

font-size:12px;

letter-spacing:2px;

}


/* =========================
首页 Hero
========================= */


.hero{

height:100vh;

width:100%;

position:relative;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}


.hero img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}


.hero:after{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.25);

}


.hero-text{

position:relative;

z-index:2;

text-align:center;

color:white;

max-width:880px;

padding:0 24px;

}


.hero h1{

display:flex;

justify-content:center;

align-items:baseline;

gap:28px;

margin:0;

}


.title-en{

font-size:52px;

font-weight:300;

letter-spacing:15px;

}


.title-cn{

font-size:44px;

font-weight:800;

letter-spacing:4px;

}


.hero p{

font-size:14px;

line-height:2;

letter-spacing:2px;

}



/* =========================
首页项目
========================= */


.works{

padding:100px 60px;

}


.works h2{

font-size:18px;

letter-spacing:5px;

font-weight:400;

}


.projects{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:50px;

}


.project-image{

height:320px;

overflow:hidden;

background:#eee;

}


.project-image img{

width:100%;

height:100%;

object-fit:cover;

}


.project-info{

padding-top:18px;

}


.project-info h3{

font-size:14px;

letter-spacing:4px;

font-weight:400;

}


.project-cn-title{

font-size:16px!important;

font-weight:700;

letter-spacing:2px!important;

}



/* =========================
项目页面
========================= */


.project-page{

padding:170px 60px 100px;

}


.project-title{

margin-bottom:90px;

}


.project-meta{

font-size:12px;

letter-spacing:3px;

color:#999;

}


.project-title h1{

font-size:48px;

font-weight:300;

letter-spacing:14px;

}


.project-title-cn{

font-size:22px;

font-weight:700;

margin-top:20px;

}


.description{

max-width:700px;

font-size:14px;

line-height:2;

color:#555;

}



/* =========================
缩略图系统
========================= */


.thumbnail-gallery{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:18px;

}


.thumb-button{

border:0;

padding:0;

background:#f5f5f5;

cursor:pointer;

aspect-ratio:1/1;

overflow:hidden;

}


.thumb-button img{

width:100%;

height:100%;

object-fit:contain;

display:block;

}



/* =========================
普通项目大图观看
========================= */


.image-viewer{

position:fixed;

inset:0;

background:#fff;

opacity:0;

pointer-events:none;

z-index:999;

transition:.6s;

}


.image-viewer.is-open{

opacity:1;

pointer-events:auto;

}


.viewer-layout{

display:flex;

height:100%;

}


.viewer-info{

width:34%;

padding:70px;

display:flex;

justify-content:center;

flex-direction:column;

}


.viewer-info h2{

font-size:34px;

font-weight:300;

letter-spacing:8px;

}


.viewer-info h3{

font-size:18px;

}


.viewer-info p{

font-size:14px;

line-height:2;

color:#555;

}


.viewer-photo-area{

width:66%;

display:flex;

align-items:center;

justify-content:center;

}


.viewer-image{

max-width:90%;

max-height:85vh;

opacity:0;

transform:translateX(30px);

transition:.8s;

}


.viewer-image.is-visible{

opacity:1;

transform:none;

}


.viewer-topbar{

position:fixed;

right:40px;

top:35px;

z-index:1000;

display:flex;

gap:15px;

}


.viewer-topbar button{

width:42px;

height:42px;

border-radius:50%;

border:0;

background:#111;

color:white;

cursor:pointer;

}



.viewer-prev,
.viewer-next{

position:fixed;

top:50%;

font-size:50px;

background:none;

border:0;

opacity:0;

cursor:pointer;

transition:.4s;

}


.viewer-prev{

left:20px;

}


.viewer-next{

right:20px;

}


.image-viewer:hover .viewer-prev,
.image-viewer:hover .viewer-next{

opacity:.35;

}



/* =========================
全屏播放模式
========================= */


.image-viewer.fullscreen-mode{

background:#000;

}


.image-viewer.fullscreen-mode .viewer-info{

display:none;

}


.image-viewer.fullscreen-mode .viewer-photo-area{

width:100%;

height:100%;

}



/* =========================
Xining 独立系统
========================= */


.xining-gallery{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:18px;

}



.xining-viewer{

position:fixed;

inset:0;

background:#fff;

z-index:9999;

display:flex;

opacity:0;

pointer-events:none;

transition:.6s;

}



.xining-viewer.open{

opacity:1;

pointer-events:auto;

}



.xining-info{

width:35%;

padding:80px;

display:flex;

justify-content:center;

flex-direction:column;

}



.xining-info h2{

font-size:36px;

font-weight:300;

letter-spacing:8px;

margin:0;

}



.xining-info h3{

font-size:20px;

margin:20px 0;

}



.xining-description{

font-size:14px;

line-height:2;

color:#555;

}



.xining-photo-area{

width:65%;

height:100%;

display:flex;

align-items:center;

justify-content:center;

}



.xining-photo-area img{

max-width:90%;

max-height:85vh;

opacity:0;

transition:.8s;

}



.xining-photo-area img.show{

opacity:1;

}



.x-prev,
.x-next,
.x-close{

position:fixed;

background:none;

border:0;

font-size:45px;

cursor:pointer;

}



.x-prev{

left:30px;

top:50%;

}


.x-next{

right:30px;

top:50%;

}


.x-close{

right:40px;

top:30px;

}



/* =========================
Footer
========================= */


footer{

padding:60px;

font-size:12px;

color:#888;

}



/* =========================
手机适配
========================= */


@media(max-width:768px){


.site-header{

padding:25px 22px;

display:block;

}


.logo{

font-size:17px;

}


nav{

margin-top:20px;

}


nav a{

margin-left:0;

margin-right:15px;

font-size:10px;

}


.hero h1{

display:block;

text-align:left;

}


.title-en{

font-size:30px;

letter-spacing:7px;

}


.title-cn{

font-size:30px;

}


.projects{

grid-template-columns:1fr;

}


.works{

padding:70px 22px;

}


.project-page{

padding:130px 22px 70px;

}


.project-title h1{

font-size:30px;

letter-spacing:5px;

}


.thumbnail-gallery,
.xining-gallery{

grid-template-columns:repeat(3,1fr);

gap:10px;

}



.viewer-layout{

display:block;

}


.viewer-info{

position:absolute;

top:30px;

width:100%;

padding:25px;

z-index:2;

}


.viewer-photo-area{

width:100%;

height:100%;

}



.xining-viewer{

display:block;

}


.xining-info{

position:absolute;

width:100%;

padding:30px;

z-index:2;

}


.xining-photo-area{

width:100%;

height:100%;

}


.xining-photo-area img{

max-width:95%;

max-height:80vh;

}


footer{

padding:40px 22px;

}


}
/* =========================================================
   2026 RESPONSIVE OVERRIDES
   全站手机 / 平板适配
   仅在窄屏生效，不改变桌面端现有设计
========================================================= */

@media (max-width:1024px){

html,
body{
overflow-x:hidden;
}

.site-header{
height:auto;
padding:32px 36px;
}

.works{
padding:84px 36px;
}

.projects{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:34px 26px;
}

.project-image{
height:auto;
aspect-ratio:4/3;
}

.project-page{
padding:150px 36px 90px;
}

.project-title{
margin-bottom:72px;
}

.project-title h1{
font-size:40px;
letter-spacing:9px;
overflow-wrap:anywhere;
}

.thumbnail-gallery,
.xining-gallery{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}

.viewer-info{
width:38%;
padding:48px;
}

.viewer-photo-area{
width:62%;
}

footer{
padding:48px 36px;
}

}


@media (max-width:768px){

:root{
--mobile-pad:clamp(18px,5vw,24px);
--safe-top:env(safe-area-inset-top,0px);
--safe-right:env(safe-area-inset-right,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-left:env(safe-area-inset-left,0px);
}

html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

body{
min-width:0;
overflow-x:hidden;
}

a,
button{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}

/* ---------- Header ---------- */

.site-header{
height:auto;
padding:
calc(22px + var(--safe-top))
calc(var(--mobile-pad) + var(--safe-right))
20px
calc(var(--mobile-pad) + var(--safe-left));
display:block;
}

.logo{
font-size:16px;
letter-spacing:4px;
line-height:1.2;
white-space:nowrap;
}

nav{
margin-top:16px;
display:flex;
flex-wrap:wrap;
gap:10px 18px;
}

nav a{
margin:0;
font-size:10px;
letter-spacing:1.5px;
line-height:1.5;
}

/* ---------- Hero ---------- */

.hero{
height:100svh;
min-height:560px;
}

@supports (height:100dvh){
.hero{
height:100dvh;
}
}

.hero img{
object-position:center center;
}

.hero-text{
width:100%;
max-width:600px;
padding:
0
calc(var(--mobile-pad) + var(--safe-right))
0
calc(var(--mobile-pad) + var(--safe-left));
text-align:center;
}

.hero h1{
display:block;
margin:0;
text-align:center;
}

.title-en{
display:block;
font-size:clamp(28px,8.2vw,34px);
letter-spacing:clamp(6px,2vw,8px);
line-height:1.22;
}

.title-cn{
display:block;
margin-top:12px;
font-size:clamp(27px,7.8vw,32px);
letter-spacing:3px;
line-height:1.2;
}

.hero p{
max-width:92%;
margin-left:auto;
margin-right:auto;
font-size:12.5px;
line-height:1.85;
letter-spacing:.9px;
}

/* ---------- 首页项目 ---------- */

.works{
padding:
72px
calc(var(--mobile-pad) + var(--safe-right))
76px
calc(var(--mobile-pad) + var(--safe-left));
}

.works h2{
font-size:15px;
letter-spacing:3px;
line-height:1.5;
}

.projects{
grid-template-columns:1fr;
gap:48px;
margin-top:38px;
}

.project-image{
height:auto;
aspect-ratio:4/3;
}

.project-info{
padding-top:14px;
}

.project-info h3{
margin:0 0 10px;
font-size:13px;
letter-spacing:3px;
line-height:1.5;
}

.project-cn-title{
margin:0 0 8px;
font-size:15px!important;
letter-spacing:1.5px!important;
line-height:1.5;
}

.project-info p:not(.project-cn-title){
margin:0;
font-size:11px;
line-height:1.6;
color:#777;
}

/* ---------- 普通项目页 ---------- */

.project-page{
padding:
calc(118px + var(--safe-top))
calc(var(--mobile-pad) + var(--safe-right))
70px
calc(var(--mobile-pad) + var(--safe-left));
}

.project-title{
margin-bottom:54px;
}

.project-meta{
font-size:10px;
letter-spacing:2px;
line-height:1.6;
}

.project-title h1{
margin-top:24px;
margin-bottom:0;
font-size:clamp(27px,8.5vw,34px);
letter-spacing:clamp(4px,1.5vw,6px);
line-height:1.25;
overflow-wrap:anywhere;
word-break:normal;
}

.project-title-cn{
margin-top:16px;
font-size:19px;
line-height:1.45;
}

.description{
max-width:none;
margin-top:24px;
font-size:13px;
line-height:1.9;
}

.description p{
margin-top:0;
margin-bottom:14px;
}

/* ---------- 缩略图 ---------- */

.thumbnail-gallery,
.xining-gallery{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.thumb-button{
width:100%;
}

/* ---------- 普通项目大图 ---------- */

.image-viewer{
height:100svh;
overflow:hidden;
}

@supports (height:100dvh){
.image-viewer{
height:100dvh;
}
}

.viewer-layout{
display:flex;
flex-direction:column;
height:100%;
min-height:0;
}

.viewer-info{
position:relative;
top:auto;
left:auto;
width:100%;
flex:0 0 auto;
max-height:34svh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding:
calc(58px + var(--safe-top))
calc(20px + var(--safe-right))
15px
calc(20px + var(--safe-left));
z-index:2;
background:#fff;
}

.viewer-info h2{
margin:0 0 8px;
font-size:20px;
line-height:1.3;
letter-spacing:4px;
overflow-wrap:anywhere;
}

.viewer-info h3{
margin:0 0 10px;
font-size:14px;
line-height:1.4;
}

.viewer-info p{
margin:0 0 9px;
font-size:12px;
line-height:1.72;
}

.viewer-photo-area{
width:100%;
height:auto;
flex:1 1 auto;
min-height:0;
padding:
6px
calc(16px + var(--safe-right))
calc(18px + var(--safe-bottom))
calc(16px + var(--safe-left));
}

.viewer-image{
display:block;
max-width:100%;
max-height:100%;
transform:translateX(10px);
transition:.5s;
}

.viewer-topbar{
right:calc(12px + var(--safe-right));
top:calc(10px + var(--safe-top));
gap:7px;
}

.viewer-topbar button{
width:36px;
height:36px;
font-size:13px;
}

.viewer-prev,
.viewer-next{
top:64%;
font-size:38px;
opacity:.22;
z-index:1001;
padding:12px 4px;
color:#111;
}

.viewer-prev{
left:2px;
}

.viewer-next{
right:2px;
}

.image-viewer:hover .viewer-prev,
.image-viewer:hover .viewer-next{
opacity:.22;
}

.image-viewer.fullscreen-mode .viewer-layout{
height:100%;
}

.image-viewer.fullscreen-mode .viewer-photo-area{
width:100%;
height:100%;
padding:
calc(18px + var(--safe-top))
calc(12px + var(--safe-right))
calc(18px + var(--safe-bottom))
calc(12px + var(--safe-left));
}

.image-viewer.fullscreen-mode .viewer-image{
max-width:96vw;
max-height:92svh;
}

/* ---------- 旧版 Xining viewer 兼容 ---------- */

.xining-viewer{
height:100svh;
display:flex;
flex-direction:column;
}

.xining-info{
position:relative;
width:100%;
max-height:34svh;
overflow-y:auto;
padding:
calc(58px + var(--safe-top))
calc(20px + var(--safe-right))
15px
calc(20px + var(--safe-left));
}

.xining-info h2{
font-size:20px;
letter-spacing:4px;
}

.xining-info h3{
font-size:14px;
margin:10px 0;
}

.xining-description{
font-size:12px;
line-height:1.72;
}

.xining-photo-area{
width:100%;
height:auto;
flex:1 1 auto;
min-height:0;
padding:
6px
calc(16px + var(--safe-right))
calc(18px + var(--safe-bottom))
calc(16px + var(--safe-left));
}

.xining-photo-area img{
max-width:100%;
max-height:100%;
}

.x-prev,
.x-next{
top:64%;
font-size:38px;
opacity:.22;
}

.x-prev{
left:2px;
}

.x-next{
right:2px;
}

.x-close{
right:calc(12px + var(--safe-right));
top:calc(10px + var(--safe-top));
font-size:34px;
}

/* ---------- Footer ---------- */

footer{
padding:
40px
calc(var(--mobile-pad) + var(--safe-right))
calc(40px + var(--safe-bottom))
calc(var(--mobile-pad) + var(--safe-left));
font-size:11px;
line-height:1.8;
}

.footer-record{
margin-top:8px;
}

}


@media (max-width:480px){

.logo{
font-size:15px;
letter-spacing:3.5px;
}

nav{
gap:8px 14px;
}

nav a{
font-size:9px;
letter-spacing:1.2px;
}

.hero{
min-height:520px;
}

.title-en{
font-size:clamp(25px,8vw,30px);
letter-spacing:5px;
}

.title-cn{
font-size:27px;
}

.hero p{
max-width:96%;
font-size:12px;
line-height:1.8;
}

.works{
padding-top:62px;
}

.works h2{
font-size:14px;
letter-spacing:2.5px;
}

.projects{
gap:42px;
}

.project-title h1{
font-size:clamp(25px,8.2vw,30px);
letter-spacing:4px;
}

.thumbnail-gallery,
.xining-gallery{
gap:8px;
}

.viewer-info{
max-height:36svh;
padding-left:16px;
padding-right:16px;
}

.viewer-info h2{
font-size:18px;
letter-spacing:3px;
}

.viewer-photo-area{
padding-left:10px;
padding-right:10px;
}

}


/* 手机横屏：观看器优先给照片空间 */
@media (max-width:1000px) and (orientation:landscape) and (max-height:620px){

.site-header{
padding-top:16px;
padding-bottom:14px;
}

.viewer-layout{
flex-direction:row;
}

.viewer-info{
width:32%;
height:100%;
max-height:none;
padding:
calc(50px + env(safe-area-inset-top,0px))
18px
calc(14px + env(safe-area-inset-bottom,0px))
calc(18px + env(safe-area-inset-left,0px));
}

.viewer-photo-area{
width:68%;
height:100%;
padding:
10px
calc(18px + env(safe-area-inset-right,0px))
calc(10px + env(safe-area-inset-bottom,0px))
10px;
}

.viewer-info h2{
font-size:17px;
letter-spacing:3px;
}

.viewer-info h3{
font-size:13px;
}

.viewer-info p{
font-size:11px;
line-height:1.55;
}

.viewer-prev,
.viewer-next{
top:50%;
}

}