﻿/* Local font system: Chinese = SOURCEHANSANSSC, English = PHONK / TRAP */
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-EXTRALIGHT.OTF") format("opentype");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-LIGHT.OTF") format("opentype");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-NORMAL.OTF") format("opentype");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-REGULAR.OTF") format("opentype");font-weight:450;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-MEDIUM.OTF") format("opentype");font-weight:500 600;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-BOLD.OTF") format("opentype");font-weight:700 800;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"SOURCEHANSANSSC";src:url("./assets/fonts/SOURCEHANSANSSC-HEAVY.OTF") format("opentype");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;}
@font-face{font-family:"PHONK CONTRAST";src:url("./assets/fonts/PHONK%20CONTRAST%20DEMO.OTF") format("opentype");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:"PHONK REGULAR";src:url("./assets/fonts/PHONK%20REGULAR%20DEMO.OTF") format("opentype");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:"TRAP";src:url("./assets/fonts/TRAP-REGULAR.OTF") format("opentype");font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:"TRAP";src:url("./assets/fonts/TRAP-SEMIBOLD.OTF") format("opentype");font-weight:600 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF;}
:root{--bg:#050505;--fg:#fff;--muted:#8e8e8e;--line:#252525;--soft:rgba(255,255,255,.08);--mx:50vw;--my:50vh}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#000}body{margin:0;background:#000;color:var(--fg);font-family:Mulish,Arial,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.55;overflow-x:hidden}a,button{color:inherit;font:inherit}a{text-decoration:none}button{border:0;background:none;cursor:pointer}body.menu-open,body.viewer-open{overflow:hidden}
.ambient-video{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.09),transparent 26vw),#000}.ambient-video:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),#000 88%)}.beam{position:absolute;width:70vw;height:26vw;left:50%;top:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 300'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.75'/%3E%3Cstop offset='.42' stop-color='white' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='450' cy='150' rx='450' ry='130' fill='url(%23g)'/%3E%3C/svg%3E") center/contain no-repeat;filter:blur(8px);opacity:.18;transform-origin:center}.beam-a{transform:translate(-50%,-50%) rotate(-42deg);animation:beamA 12s ease-in-out infinite alternate}.beam-b{transform:translate(-40%,-45%) rotate(44deg);opacity:.12;animation:beamB 14s ease-in-out infinite alternate}.beam-c{transform:translate(-55%,-20%) rotate(0deg);opacity:.08;animation:beamC 18s ease-in-out infinite alternate}@keyframes beamA{to{transform:translate(-48%,-54%) rotate(-22deg)}}@keyframes beamB{to{transform:translate(-52%,-42%) rotate(72deg)}}@keyframes beamC{to{transform:translate(-48%,-34%) rotate(12deg)}}
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;transition:opacity .5s,visibility .5s}.loader span{font:700 clamp(34px,7vw,92px)/.9 Syne,Arial,sans-serif;letter-spacing:-.08em}.is-loading .loader{opacity:1;visibility:visible}body:not(.is-loading) .loader{opacity:0;visibility:hidden;pointer-events:none}
.site-header{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:32px clamp(22px,5vw,76px);mix-blend-mode:difference}.logo{font:700 25px/1 Syne,Arial,sans-serif;letter-spacing:-.06em}.site-header nav{display:flex;gap:38px}.site-header nav a{color:#ddd;font-size:14px;transition:.2s}.site-header nav a:hover{color:#fff}.menu-btn{display:none;width:48px}.menu-btn i{display:block;height:1px;background:#fff;margin:8px 0}.mobile-menu{position:fixed;inset:0;z-index:80;display:grid;align-content:end;gap:4px;padding:34px;background:#000;opacity:0;visibility:hidden;transform:translateY(-16px);transition:.25s}.mobile-menu.open{opacity:1;visibility:visible;transform:none}.mobile-menu a{font:700 clamp(48px,14vw,120px)/.9 Syne,Arial,sans-serif;letter-spacing:-.08em}.menu-close{position:absolute;right:28px;top:28px;color:var(--muted)}
.landing{min-height:100vh;display:grid;align-content:end;padding:150px clamp(22px,5vw,76px) 74px}.landing-copy span,.project-meta span,.gallery-title span{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.14em}.landing h1{margin:18px 0 24px;font:700 clamp(72px,15vw,230px)/.78 Syne,Arial,sans-serif;letter-spacing:-.1em}.landing p{max-width:720px;color:#c9c9c9;font-size:clamp(17px,1.4vw,23px)}.landing-actions{display:flex;gap:14px;margin-top:30px}.landing-actions a{padding:12px 18px;border:1px solid #343434;border-radius:999px;background:rgba(255,255,255,.04);transition:.2s}.landing-actions a:hover{background:#fff;color:#000}
.project-block{padding:0 0 clamp(110px,12vw,180px);scroll-margin-top:20px}.project-hero{position:relative;width:100vw;height:min(760px,76vh);left:50%;margin-left:-50vw;overflow:hidden;background:#111}.slides,.slide{position:absolute;inset:0}.slide{opacity:0;transform:scale(1.04);transition:opacity .75s ease,transform 1.2s ease}.slide.active{opacity:1;transform:scale(1)}.project-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,#000);pointer-events:none}.hero-bottom{position:absolute;z-index:3;left:clamp(22px,5vw,76px);right:clamp(22px,5vw,76px);bottom:34px;display:flex;justify-content:space-between;align-items:flex-end}.hero-bottom h2{margin:0;font:700 clamp(46px,7vw,112px)/.86 Syne,Arial,sans-serif;letter-spacing:-.085em}.controls{display:flex;align-items:center;gap:16px;font-size:14px}.controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:50%;transition:.2s}.controls button:hover{background:#fff;color:#000}.project-meta{width:min(1180px,calc(100% - 44px));margin:56px auto 96px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.project-meta div{min-height:190px;padding:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}.project-meta p{margin:18px 0 0;color:#cfcfcf;font-size:clamp(16px,1.2vw,20px)}
.gallery-title{width:min(1180px,calc(100% - 44px));margin:0 auto 28px;display:flex;justify-content:space-between;align-items:end;gap:24px}.gallery-title h3{margin:0;font:700 clamp(36px,5.6vw,86px)/.9 Syne,Arial,sans-serif;letter-spacing:-.08em}.image-archive{width:min(1380px,calc(100% - 44px));margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:78px;grid-auto-flow:dense;gap:16px}.archive-item{position:relative;grid-column:span 3;grid-row:span 4;min-height:240px;overflow:hidden;border:1px solid #191919;padding:0;background:#111;text-align:left}.archive-item.wide{grid-column:span 6}.archive-item.tall{grid-row:span 6}.archive-item.large{grid-column:span 5;grid-row:span 6}.archive-item:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 48px #000;background:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.72))}.archive-item span{position:absolute;z-index:2;left:18px;bottom:16px;color:#fff;font-size:13px}.archive-item:hover .visual{transform:scale(1.06);filter:grayscale(0) contrast(1.04)}.visual{position:absolute;inset:0;background:#171717;filter:grayscale(1) contrast(1.1) brightness(.82);transition:.55s}.v1{background:radial-gradient(circle at 30% 25%,#b7d5e2,transparent 24%),linear-gradient(135deg,#191a1d,#55626a 45%,#16100d)}.v2{background:radial-gradient(circle at 70% 24%,#f2d6b8,transparent 24%),linear-gradient(145deg,#2e2730,#09090a)}.v3{background:conic-gradient(from 120deg,#111,#8f86ff,#1d1d21,#dbc1a8,#111)}.v4{background:linear-gradient(160deg,#070708,#242a32),repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.12) 31px)}.v5{background:radial-gradient(circle at 35% 70%,#d7ff74,transparent 22%),linear-gradient(120deg,#111,#333 52%,#141414)}.v6{background:radial-gradient(circle at 50% 35%,#fff,transparent 14%),radial-gradient(circle at 48% 50%,#9db9c8,transparent 30%),#101013}.v7{background:linear-gradient(120deg,#0a0a0b,#9db9c8 48%,#1b1110),repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 2px,transparent 3px 18px)}.v8{background:linear-gradient(160deg,#101013,#2a2f39)}.v9{background:linear-gradient(120deg,#0e0e10,#262323)}.v10{background:radial-gradient(circle at 58% 42%,#8f86ff,transparent 22%),radial-gradient(circle at 36% 60%,#dbc1a8,transparent 18%),linear-gradient(150deg,#050506,#25203c)}.v11{background:repeating-linear-gradient(90deg,rgba(255,255,255,.72) 0 4px,transparent 5px 18px),linear-gradient(180deg,#17171a,#080809)}.v12{background:linear-gradient(135deg,#141416,#4b3b30)}.v13{background:linear-gradient(145deg,#050607,#17232b 58%,#0e0e10)}.v14{background:radial-gradient(circle at 45% 40%,#dbc1a8,transparent 28%),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.2) 0 2px,transparent 3px 14px),#101011}.v15{background:conic-gradient(from 180deg at 50% 50%,#111,#9db9c8,#111,#8f86ff,#111)}.v16{background:linear-gradient(120deg,#080809,#262b30),radial-gradient(circle at 20% 20%,#d7ff74,transparent 30%)}
.contact{width:min(1180px,calc(100% - 44px));margin:0 auto;padding:60px 0 120px;border-top:1px solid var(--line)}.contact h2{margin:0 0 18px;font:700 clamp(50px,9vw,138px)/.86 Syne,Arial,sans-serif;letter-spacing:-.09em}.contact p{max-width:760px;color:#c9c9c9}.reveal,.fade{opacity:0;transform:translate3d(0,46px,0);transition:opacity 1.1s ease,transform 1.1s ease}.fade{transform:none;transition-duration:1.4s}.is-visible{opacity:1;transform:none}
.viewer{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:1fr auto;place-items:center;padding:58px;background:rgba(0,0,0,.9);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.24s}.viewer.open{opacity:1;visibility:visible}.viewer-close{position:absolute;right:32px;top:28px;color:var(--muted)}.viewer-image{position:relative;width:min(1100px,90vw);height:min(700px,72vh);overflow:hidden;border:1px solid #222}.viewer-image .visual{position:absolute;filter:grayscale(0) contrast(1.05) brightness(1);transform:none}.viewer p{color:#ddd}
@media(max-width:900px){.site-header nav{display:none}.menu-btn{display:block}.landing{padding-top:130px}.project-hero{height:100vh}.hero-bottom{display:block}.hero-bottom h2{margin-bottom:24px}.project-meta{grid-template-columns:1fr}.image-archive{grid-template-columns:repeat(4,1fr);grid-auto-rows:66px}.archive-item,.archive-item.wide,.archive-item.large{grid-column:span 4}.archive-item.tall{grid-column:span 2}.gallery-title{display:block}.gallery-title h3{margin-top:12px}}@media(max-width:560px){.archive-item.tall{grid-column:span 4}.landing h1{font-size:22vw}.project-meta{width:calc(100% - 28px)}.image-archive{width:calc(100% - 28px);gap:12px}.gallery-title{width:calc(100% - 28px)}}


/* Real image replacement */
.slide img,.archive-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:grayscale(1) contrast(1.08) brightness(.82);transition:transform .65s ease,filter .45s ease}.slide.active img{transform:scale(1)}.archive-item:hover img{transform:scale(1.055);filter:grayscale(0) contrast(1.03) brightness(1)}.archive-item.video-slot{cursor:default}.video-placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 26%),linear-gradient(135deg,#080808,#171717)}.video-placeholder i{width:62px;height:62px;margin:auto;border:1px solid rgba(255,255,255,.34);border-radius:50%;position:relative}.video-placeholder i:after{content:"";position:absolute;left:25px;top:19px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}.video-placeholder b{font:700 14px/1 Syne,Arial,sans-serif;letter-spacing:.12em}.video-placeholder small{color:var(--muted)}

/* Optimized media layout */
.slide img,.slide video,.archive-item img,.archive-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:grayscale(1) contrast(1.08) brightness(.82);transition:transform .65s ease,filter .45s ease}.slide.active img,.slide.active video{transform:scale(1)}.slide.active video{filter:grayscale(.2) contrast(1.04) brightness(.9)}.archive-item:hover img,.archive-item:hover video{transform:scale(1.055);filter:grayscale(0) contrast(1.03) brightness(1)}.archive-item.video-slot{cursor:default}.archive-item.video-item:before{content:"VIDEO";position:absolute;z-index:3;right:14px;top:14px;padding:7px 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.48);font-size:11px;letter-spacing:.16em}.video-placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 26%),linear-gradient(135deg,#080808,#171717)}.video-placeholder i{width:62px;height:62px;margin:auto;border:1px solid rgba(255,255,255,.34);border-radius:50%;position:relative}.video-placeholder i:after{content:"";position:absolute;left:25px;top:19px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}.video-placeholder b{font:700 14px/1 Syne,Arial,sans-serif;letter-spacing:.12em}.video-placeholder small{color:var(--muted)}.viewer-image img,.viewer-image video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}.viewer-image .video-placeholder{position:absolute}

/* Fix long gallery reveal: keep image walls visible */
.image-archive.reveal{opacity:1;transform:none}


/* Main logo */
.logo{display:inline-flex;align-items:center;width:clamp(42px,4.2vw,64px);height:clamp(42px,4.2vw,64px);font-size:0;mix-blend-mode:normal}.logo img{display:block;width:100%;height:100%;object-fit:contain;filter:invert(0);transition:transform .22s ease,opacity .22s ease}.logo:hover img{transform:scale(1.08);opacity:.82}.site-header{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));pointer-events:none}.site-header a,.site-header button{pointer-events:auto}@media(max-width:900px){.logo{width:48px;height:48px}}

/* Highlight real video cards */
.archive-item.video-item{border-color:rgba(255,255,255,.34);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 42px rgba(157,185,200,.16),0 24px 80px rgba(0,0,0,.5)}.archive-item.video-item:after{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.84));box-shadow:inset 0 0 56px rgba(0,0,0,.95)}.archive-item.video-item:before{content:"VIDEO";position:absolute;z-index:4;right:14px;top:14px;padding:7px 10px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(0,0,0,.54);backdrop-filter:blur(12px);font-size:11px;letter-spacing:.16em;color:#fff}.archive-item.video-item .play-badge{position:absolute;z-index:4;left:50%;top:50%;width:70px;height:70px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.56);border-radius:50%;background:rgba(0,0,0,.32);backdrop-filter:blur(10px);pointer-events:none}.archive-item.video-item .play-badge:before{content:"";position:absolute;left:29px;top:22px;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}.archive-item.video-item .play-badge:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(255,255,255,.24);border-radius:50%;animation:videoPulse 1.8s ease-out infinite}.archive-item.video-item:hover{border-color:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 70px rgba(157,185,200,.26),0 28px 90px rgba(0,0,0,.62)}@keyframes videoPulse{from{transform:scale(.82);opacity:.8}to{transform:scale(1.32);opacity:0}}.viewer-image video{filter:none;object-fit:contain}.viewer.video-mode .viewer-image{background:#000;border-color:rgba(255,255,255,.34);box-shadow:0 0 80px rgba(157,185,200,.18)}

/* Curated aligned gallery layout */
.image-archive{--gap:18px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(54px,5.2vw,82px);grid-auto-flow:dense;gap:var(--gap);align-items:stretch}.archive-item{grid-column:span 3;grid-row:span 4;border-radius:0;will-change:transform}.archive-item.small{grid-column:span 3;grid-row:span 3}.archive-item.slim{grid-column:span 2;grid-row:span 5}.archive-item.portrait{grid-column:span 3;grid-row:span 6}.archive-item.wide{grid-column:span 5;grid-row:span 4}.archive-item.hero-wide{grid-column:span 7;grid-row:span 5}.archive-item.panorama{grid-column:span 8;grid-row:span 4}.archive-item.feature,.archive-item.large{grid-column:span 5;grid-row:span 6}.archive-item.video-item{grid-column:span 5;grid-row:span 5}.archive-item:nth-child(6n+2){transform:scale(.94);transform-origin:center}.archive-item:nth-child(7n+3){transform:scale(.88);transform-origin:center}.archive-item:nth-child(8n+5){transform:scale(.97);transform-origin:center}.archive-item:nth-child(11n+4){transform:scale(.91);transform-origin:center}.archive-item:hover{z-index:8;transform:scale(1.02)}.archive-item:nth-child(6n+2):hover,.archive-item:nth-child(7n+3):hover,.archive-item:nth-child(8n+5):hover,.archive-item:nth-child(11n+4):hover{transform:scale(1.02)}.archive-item:before{content:"";position:absolute;inset:0;z-index:3;border:1px solid rgba(255,255,255,.08);pointer-events:none;transition:border-color .25s ease}.archive-item:hover:before{border-color:rgba(255,255,255,.34)}.image-archive:before,.image-archive:after{content:"";display:block;grid-column:1/-1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent);opacity:.45}.image-archive:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.18))}@media(max-width:1100px){.image-archive{grid-template-columns:repeat(8,minmax(0,1fr))}.archive-item,.archive-item.small{grid-column:span 2}.archive-item.slim,.archive-item.portrait{grid-column:span 3}.archive-item.wide,.archive-item.feature,.archive-item.large,.archive-item.video-item{grid-column:span 4}.archive-item.hero-wide,.archive-item.panorama{grid-column:span 5}}@media(max-width:760px){.image-archive{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.archive-item,.archive-item.small,.archive-item.slim,.archive-item.portrait,.archive-item.wide,.archive-item.feature,.archive-item.large,.archive-item.hero-wide,.archive-item.panorama,.archive-item.video-item{grid-column:span 4;grid-row:span 5;transform:none!important}.archive-item.portrait,.archive-item.slim{grid-row:span 7}.archive-item.panorama,.archive-item.wide{grid-row:span 4}}

/* Final row-balanced gallery: 2-3 works per row, aligned margins */
.image-archive{width:min(1320px,calc(100% - 72px));margin-left:auto;margin-right:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(72px,6.2vw,104px);grid-auto-flow:dense;gap:clamp(18px,1.8vw,28px);align-items:stretch}.image-archive:before,.image-archive:after{display:none}.archive-item,.archive-item.small,.archive-item.slim,.archive-item.portrait,.archive-item.wide,.archive-item.hero-wide,.archive-item.panorama,.archive-item.feature,.archive-item.large{grid-column:auto;grid-row:auto}.archive-item{min-height:0;grid-column:span 4;grid-row:span 4;transform:none;border-radius:0}.archive-item.half,.archive-item.half-small{grid-column:span 6;grid-row:span 4}.archive-item.half-tall{grid-column:span 6;grid-row:span 6}.archive-item.half-wide{grid-column:span 6;grid-row:span 3}.archive-item.third,.archive-item.third-small{grid-column:span 4;grid-row:span 4}.archive-item.third-tall{grid-column:span 4;grid-row:span 6}.archive-item.third-wide{grid-column:span 4;grid-row:span 3}.archive-item.video-item{grid-column:span 6;grid-row:span 4}.archive-item:nth-child(5n+2){transform:scale(.94)}.archive-item:nth-child(7n+4){transform:scale(.9)}.archive-item:nth-child(9n+6){transform:scale(.96)}.archive-item:nth-child(5n+2):hover,.archive-item:nth-child(7n+4):hover,.archive-item:nth-child(9n+6):hover,.archive-item:hover{transform:scale(1.018);z-index:8}.archive-item:nth-child(5n+2),.archive-item:nth-child(7n+4),.archive-item:nth-child(9n+6){transform-origin:center}.archive-item:has(video){transform:none}.archive-item:has(video):hover{transform:scale(1.018)}@media(max-width:1100px){.image-archive{width:min(100% - 44px,1320px);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(72px,9vw,104px)}.archive-item,.archive-item.third,.archive-item.third-small,.archive-item.third-tall,.archive-item.third-wide{grid-column:span 3}.archive-item.half,.archive-item.half-small,.archive-item.half-tall,.archive-item.half-wide,.archive-item.video-item{grid-column:span 3}.archive-item.half-tall,.archive-item.third-tall{grid-row:span 5}}@media(max-width:720px){.image-archive{width:calc(100% - 28px);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:92px;gap:14px}.archive-item,.archive-item.third,.archive-item.third-small,.archive-item.third-tall,.archive-item.third-wide,.archive-item.half,.archive-item.half-small,.archive-item.half-tall,.archive-item.half-wide,.archive-item.video-item{grid-column:span 2;grid-row:span 4;transform:none!important}.archive-item.third-tall,.archive-item.half-tall{grid-row:span 6}.archive-item.third-wide,.archive-item.half-wide{grid-row:span 3}}

/* Remove tile labels and keep 2-3 columns on tablet/desktop preview */
.archive-item span{display:none!important}.image-archive{width:min(1320px,calc(100% - 72px))}@media(max-width:1100px) and (min-width:721px){.image-archive{width:min(100% - 56px,1320px);grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(58px,7vw,92px)}.archive-item,.archive-item.third,.archive-item.third-small,.archive-item.third-tall,.archive-item.third-wide{grid-column:span 4}.archive-item.half,.archive-item.half-small,.archive-item.half-tall,.archive-item.half-wide,.archive-item.video-item{grid-column:span 6}.archive-item.third-tall,.archive-item.half-tall{grid-row:span 5}.archive-item.third-wide,.archive-item.half-wide{grid-row:span 3}}

/* In-app browser medium width: keep 2-3 items per row */
@media(max-width:720px) and (min-width:560px){.image-archive{width:calc(100% - 56px);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(58px,9vw,86px);gap:16px}.archive-item,.archive-item.third,.archive-item.third-small,.archive-item.third-tall,.archive-item.third-wide{grid-column:span 2;grid-row:span 4;transform:none}.archive-item.half,.archive-item.half-small,.archive-item.half-tall,.archive-item.half-wide,.archive-item.video-item{grid-column:span 3;grid-row:span 4;transform:none}.archive-item.third-tall,.archive-item.half-tall{grid-row:span 5}.archive-item.third-wide,.archive-item.half-wide{grid-row:span 3}.archive-item:hover{transform:scale(1.018)}}

/* Final clean grid: strictly aligned, no artistic offset */
.image-archive{width:min(1320px,calc(100% - 72px))!important;margin-left:auto!important;margin-right:auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:auto!important;grid-auto-flow:row!important;gap:24px!important;align-items:stretch!important}.image-archive:before,.image-archive:after{display:none!important}.archive-item,.archive-item.small,.archive-item.slim,.archive-item.portrait,.archive-item.wide,.archive-item.hero-wide,.archive-item.panorama,.archive-item.feature,.archive-item.large,.archive-item.half,.archive-item.half-small,.archive-item.half-tall,.archive-item.half-wide,.archive-item.third,.archive-item.third-small,.archive-item.third-tall,.archive-item.third-wide,.archive-item.video-item{grid-column:auto!important;grid-row:auto!important;width:100%!important;aspect-ratio:4/5!important;min-height:0!important;transform:none!important;border-radius:0!important}.archive-item.video-item{aspect-ratio:16/10!important}.archive-item:hover,.archive-item:nth-child(5n+2):hover,.archive-item:nth-child(7n+4):hover,.archive-item:nth-child(9n+6):hover{transform:none!important}.archive-item img,.archive-item video{object-fit:cover!important;object-position:center center!important}.archive-item span{display:none!important}@media(max-width:980px){.image-archive{width:min(100% - 44px,1320px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}}@media(max-width:560px){.image-archive{width:calc(100% - 28px)!important;grid-template-columns:1fr!important;gap:14px!important}.archive-item,.archive-item.video-item{aspect-ratio:4/5!important}}

/* Landing technical description */
.landing-copy p{max-width:min(980px,88vw);color:rgba(255,255,255,.72);font-size:clamp(15px,1.12vw,19px);line-height:1.95;letter-spacing:.02em;text-align:justify;text-wrap:pretty}.landing-copy p::before{content:"";display:block;width:72px;height:1px;margin:0 0 22px;background:rgba(255,255,255,.34)}

/* Make trailing video fill the whole row */
.image-archive .archive-item.video-item:last-of-type{grid-column:1 / -1!important;aspect-ratio:16/5!important;width:100%!important}.image-archive .archive-item.video-item:last-of-type video{object-fit:cover!important}.image-archive .archive-item.video-item:last-of-type .play-badge{width:82px;height:82px}.image-archive .archive-item.video-item:last-of-type .play-badge:before{left:34px;top:27px}@media(max-width:980px){.image-archive .archive-item.video-item:last-of-type{grid-column:1 / -1!important;aspect-ratio:16/7!important}}@media(max-width:560px){.image-archive .archive-item.video-item:last-of-type{aspect-ratio:4/5!important}}

/* Final actual video in each gallery spans full row */
.image-archive .archive-item.video-item.final-video{grid-column:1 / -1!important;aspect-ratio:16/5!important;width:100%!important}.image-archive .archive-item.video-item.final-video video{object-fit:cover!important}@media(max-width:980px){.image-archive .archive-item.video-item.final-video{aspect-ratio:16/7!important}}@media(max-width:560px){.image-archive .archive-item.video-item.final-video{aspect-ratio:4/5!important}}

/* Strict final grid override: all media same size, last row fills width */
.image-archive{width:min(1320px,calc(100% - 72px))!important;margin-left:auto!important;margin-right:auto!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-auto-rows:auto!important;grid-auto-flow:row!important;gap:24px!important;align-items:stretch!important}.archive-item,.archive-item.grid-cell,.archive-item.video-item,.archive-item.small,.archive-item.slim,.archive-item.portrait,.archive-item.wide,.archive-item.hero-wide,.archive-item.panorama,.archive-item.feature,.archive-item.large,.archive-item.half,.archive-item.half-small,.archive-item.half-tall,.archive-item.half-wide,.archive-item.third,.archive-item.third-small,.archive-item.third-tall,.archive-item.third-wide{grid-column:span 2!important;grid-row:auto!important;aspect-ratio:4/5!important;width:100%!important;height:auto!important;min-height:0!important;transform:none!important}.archive-item.video-item{aspect-ratio:4/5!important}.archive-item.last-one{grid-column:1 / -1!important;aspect-ratio:16/6!important}.archive-item.last-two{grid-column:span 3!important;aspect-ratio:4/5!important}.archive-item:hover,.archive-item.video-item:hover{transform:none!important}.archive-item img,.archive-item video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}.archive-item span{display:none!important}@media(max-width:980px){.image-archive{width:min(100% - 44px,1320px)!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}.archive-item,.archive-item.grid-cell,.archive-item.video-item{grid-column:span 2!important;aspect-ratio:4/5!important}.archive-item.last-one{grid-column:1 / -1!important;aspect-ratio:16/7!important}.archive-item.last-two{grid-column:span 2!important}}@media(max-width:560px){.image-archive{width:calc(100% - 28px)!important;grid-template-columns:1fr!important;gap:14px!important}.archive-item,.archive-item.grid-cell,.archive-item.video-item,.archive-item.last-one,.archive-item.last-two{grid-column:1 / -1!important;aspect-ratio:4/5!important}}

/* Strict alignment hotfix: remove automatic full-width last video; only real last-row classes control width */
.image-archive .archive-item.video-item:last-of-type,
.image-archive .archive-item.video-item.final-video{
  grid-column:span 2!important;
  aspect-ratio:4/5!important;
  width:100%!important;
}
.image-archive .archive-item.video-item:last-of-type .play-badge{
  width:70px!important;
  height:70px!important;
}
.image-archive .archive-item.video-item:last-of-type .play-badge:before{
  left:29px!important;
  top:22px!important;
}
.image-archive .archive-item.last-one,
.image-archive .archive-item.video-item.last-one:last-of-type,
.image-archive .archive-item.video-item.final-video.last-one{
  grid-column:1 / -1!important;
  aspect-ratio:16/6!important;
}
.image-archive .archive-item.last-two,
.image-archive .archive-item.video-item.last-two:last-of-type,
.image-archive .archive-item.video-item.final-video.last-two{
  grid-column:span 3!important;
  aspect-ratio:4/5!important;
}
@media(max-width:980px){
  .image-archive .archive-item.video-item:last-of-type,
  .image-archive .archive-item.video-item.final-video{
    grid-column:span 2!important;
    aspect-ratio:4/5!important;
  }
  .image-archive .archive-item.last-one,
  .image-archive .archive-item.video-item.last-one:last-of-type,
  .image-archive .archive-item.video-item.final-video.last-one{
    grid-column:1 / -1!important;
    aspect-ratio:16/7!important;
  }
  .image-archive .archive-item.last-two,
  .image-archive .archive-item.video-item.last-two:last-of-type,
  .image-archive .archive-item.video-item.final-video.last-two{
    grid-column:span 2!important;
    aspect-ratio:4/5!important;
  }
}
@media(max-width:560px){
  .image-archive .archive-item.video-item:last-of-type,
  .image-archive .archive-item.video-item.final-video,
  .image-archive .archive-item.last-one,
  .image-archive .archive-item.last-two{
    grid-column:1 / -1!important;
    aspect-ratio:4/5!important;
  }
}

/* Single merged profile block */
.project-meta.project-meta-single{
  grid-template-columns:1fr!important;
}
.project-meta.project-meta-single div{
  min-height:0;
  padding:clamp(28px,3.2vw,46px);
}
.project-meta.project-meta-single p{
  max-width:980px;
  font-size:clamp(17px,1.28vw,22px);
  line-height:1.9;
  letter-spacing:.02em;
}

/* About copy alignment and LoopNation gallery title alignment */
.project-meta.project-meta-single div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}
#loopnation .gallery-title{
  justify-content:space-between;
}
#loopnation .gallery-title h3{
  margin-left:auto;
  text-align:right;
  max-width:min(920px,82vw);
}
@media(max-width:900px){
  #loopnation .gallery-title h3{
    max-width:100%;
    margin-left:0;
    text-align:left;
  }
}

/* Contact QR codes */
.qr-list{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(18px,3vw,34px);
  margin:34px auto 0;
}
.qr-list img{
  display:block;
  width:clamp(96px,9vw,124px);
  height:clamp(96px,9vw,124px);
  object-fit:contain;
  padding:8px;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
}
@media(max-width:560px){
  .qr-list{gap:16px;margin-top:28px}
  .qr-list img{width:104px;height:104px;padding:7px}
}



/* Two-entry gallery mode: image box + video box */
.image-archive.gallery-pair{
  width:min(1180px,calc(100% - 72px))!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(18px,2.2vw,32px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.image-archive.gallery-pair .archive-item.gallery-entry,
.image-archive.gallery-pair .archive-item.gallery-entry.video-item,
.image-archive.gallery-pair .archive-item.gallery-entry.video-item:last-of-type{
  grid-column:auto!important;
  aspect-ratio:16/10!important;
  min-height:320px!important;
  width:100%!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.42)!important;
}
.gallery-entry b,
.gallery-entry small{
  position:absolute;
  z-index:5;
  left:clamp(22px,3vw,34px);
  display:block!important;
  color:#fff;
  text-align:left;
  pointer-events:none;
}
.gallery-entry b{
  bottom:clamp(42px,4.2vw,62px);
  font:700 clamp(32px,4.3vw,72px)/.86 Syne,Arial,sans-serif;
  letter-spacing:-.075em;
}
.gallery-entry small{
  bottom:clamp(20px,2.4vw,30px);
  color:rgba(255,255,255,.62);
  font-size:12px;
  letter-spacing:.16em;
}
.gallery-entry:after{
  z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.86))!important;
}
.viewer-nav{
  position:absolute;
  z-index:95;
  top:50%;
  width:54px;
  height:54px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-size:24px;
  backdrop-filter:blur(12px);
  transition:.2s;
}
.viewer-nav:hover{background:#fff;color:#000}.viewer-prev{left:28px}.viewer-next{right:28px}.viewer-nav[hidden]{display:none!important}
.viewer p{min-height:24px;text-align:center;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){
  .image-archive.gallery-pair{width:calc(100% - 44px)!important;grid-template-columns:1fr!important;gap:18px!important}
  .image-archive.gallery-pair .archive-item.gallery-entry,
  .image-archive.gallery-pair .archive-item.gallery-entry.video-item,
  .image-archive.gallery-pair .archive-item.gallery-entry.video-item:last-of-type{aspect-ratio:4/5!important;min-height:0!important}
  .viewer-prev{left:14px}.viewer-next{right:14px}.viewer-nav{width:46px;height:46px}
}

/* Vertical clean media entries: one image + one video, no crop, no text */
.image-archive.gallery-pair{
  width:min(980px,calc(100% - 72px))!important;
  grid-template-columns:1fr!important;
  gap:clamp(22px,2.6vw,38px)!important;
}
.image-archive.gallery-pair .archive-item.gallery-entry,
.image-archive.gallery-pair .archive-item.gallery-entry.video-item,
.image-archive.gallery-pair .archive-item.gallery-entry.video-item:last-of-type{
  aspect-ratio:16/9!important;
  min-height:0!important;
  background:#050505!important;
}
.image-archive.gallery-pair .archive-item.gallery-entry img,
.image-archive.gallery-pair .archive-item.gallery-entry video{
  object-fit:contain!important;
  object-position:center center!important;
  background:#050505!important;
}
.image-archive.gallery-pair .gallery-entry b,
.image-archive.gallery-pair .gallery-entry small,
.image-archive.gallery-pair .archive-item.video-item:before{
  display:none!important;
}
.image-archive.gallery-pair .archive-item.gallery-entry:after{
  background:transparent!important;
  box-shadow:inset 0 0 42px rgba(0,0,0,.48)!important;
}
@media(max-width:900px){
  .image-archive.gallery-pair{width:calc(100% - 44px)!important}
  .image-archive.gallery-pair .archive-item.gallery-entry,
  .image-archive.gallery-pair .archive-item.gallery-entry.video-item,
  .image-archive.gallery-pair .archive-item.gallery-entry.video-item:last-of-type{
    aspect-ratio:4/5!important;
  }
}

/* Video entry: remove blurred label, keep only play button */
.image-archive.gallery-pair .archive-item.video-item::before,
.image-archive.gallery-pair .archive-item.video-item:before{
  content:none!important;
  display:none!important;
}
.image-archive.gallery-pair .archive-item.video-item .play-badge{
  display:block!important;
  background:rgba(0,0,0,.28)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Dynamic media ratio carousel cards */
.image-archive.gallery-pair .archive-item.gallery-entry,
.image-archive.gallery-pair .archive-item.gallery-entry.video-item,
.image-archive.gallery-pair .archive-item.gallery-entry.video-item:last-of-type{
  aspect-ratio:var(--entry-ratio,16/9)!important;
  height:auto!important;
  background:transparent!important;
}
.image-archive.gallery-pair .archive-item.gallery-entry img,
.image-archive.gallery-pair .archive-item.gallery-entry video{
  object-fit:contain!important;
  background:transparent!important;
}
@media(max-width:900px){
  .image-archive.gallery-pair .archive-item.gallery-entry,
  .image-archive.gallery-pair .archive-item.gallery-entry.video-item,
  .image-archive.gallery-pair .archive-item.gallery-entry.video-item:last-of-type{
    aspect-ratio:var(--entry-ratio,16/9)!important;
  }
}

/* Contact centered copy and wider QR layout */
.contact{
  text-align:center;
}
.contact h2{
  text-align:center;
}
.contact p{
  max-width:min(860px,88vw);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.contact .qr-list{
  width:min(620px,82vw);
  justify-content:space-between;
  gap:clamp(42px,8vw,120px);
  margin-top:42px;
}
.contact .qr-list img{
  width:clamp(136px,12vw,168px);
  height:clamp(136px,12vw,168px);
  padding:10px;
}
@media(max-width:560px){
  .contact .qr-list{
    width:min(330px,88vw);
    gap:28px;
    margin-top:32px;
  }
  .contact .qr-list img{
    width:132px;
    height:132px;
    padding:8px;
  }
}

/* Contact copy: desktop single-line CN, smaller EN translation, compact centered QR */
.contact .contact-copy-cn{
  max-width:none;
  font-size:clamp(14px,.96vw,16px);
  line-height:1.8;
  width:max-content;
  margin:0 auto;
  white-space:nowrap;
  text-align:center;
}
.contact .contact-copy-en{
  max-width:min(920px,88vw);
  margin:10px auto 0;
  color:rgba(255,255,255,.48);
  font-size:clamp(11px,.78vw,13px);
  line-height:1.65;
  letter-spacing:.035em;
  text-align:center;
}
.contact .qr-list{
  width:fit-content;
  justify-content:center;
  gap:clamp(24px,4vw,48px);
  margin-top:36px;
}
.contact .qr-list img{
  width:clamp(118px,10vw,142px);
  height:clamp(118px,10vw,142px);
  padding:9px;
}
@media(max-width:900px){
  .contact .contact-copy-cn{
    width:auto;
    max-width:min(760px,88vw);
    white-space:normal;
  }
}
@media(max-width:560px){
  .contact .qr-list{
    gap:22px;
    margin-top:30px;
  }
  .contact .qr-list img{
    width:116px;
    height:116px;
    padding:7px;
  }
}



/* Typography override: CJK fallback to SOURCEHANSANSSC, Latin uses PHONK / TRAP */
:root{
  --font-cn:"SOURCEHANSANSSC";
  --font-en-display:"PHONK CONTRAST";
  --font-en-logo:"PHONK REGULAR";
  --font-en-ui:"TRAP";
  --font-en-body:"TRAP";
}
body,
a,
button,
input,
textarea,
select{
  font-family:var(--font-en-body),var(--font-cn),Arial,"Microsoft YaHei",sans-serif!important;
}
.landing h1,
.hero-bottom h2,
.gallery-title h3,
.contact h2{
  font-family:var(--font-en-display),var(--font-cn),Arial,sans-serif!important;
  font-weight:700;
}
.loader span,
.logo,
.mobile-menu a{
  font-family:var(--font-en-logo),var(--font-cn),Arial,sans-serif!important;
  font-weight:700;
}
.site-header nav a,
.landing-actions a,
.controls,
.controls button,
.menu-btn,
.menu-close,
.viewer-close,
.viewer-nav,
.landing-copy span,
.project-meta span,
.gallery-title span,
.video-placeholder b{
  font-family:var(--font-en-ui),var(--font-cn),Arial,sans-serif!important;
  font-weight:600;
}
p,
.landing p,
.project-meta p,
.contact p,
.viewer p,
.contact .contact-copy-cn,
.contact .contact-copy-en{
  font-family:var(--font-en-body),var(--font-cn),Arial,"Microsoft YaHei",sans-serif!important;
}

/* Hero title size hotfix: reduce oversized PHONK display title */
.landing h1{
  font-size:clamp(56px,11.5vw,176px)!important;
  line-height:.82!important;
  letter-spacing:-.08em!important;
  max-width:min(1180px,94vw);
}
@media(max-width:900px){
  .landing h1{
    font-size:clamp(54px,15vw,126px)!important;
  }
}
@media(max-width:560px){
  .landing h1{
    font-size:19vw!important;
  }
}

/* Section gallery title size hotfix */
.gallery-title h3{
  font-size:clamp(30px,4.4vw,68px)!important;
  line-height:.92!important;
  letter-spacing:-.065em!important;
}
@media(max-width:900px){
  .gallery-title h3{
    font-size:clamp(30px,8vw,54px)!important;
  }
}
@media(max-width:560px){
  .gallery-title h3{
    font-size:12vw!important;
  }
}

/* Gallery title right alignment + smaller display size */
.gallery-title{
  align-items:end!important;
}
.gallery-title h3{
  flex:1 1 auto!important;
  text-align:right!important;
  font-size:clamp(28px,3.65vw,56px)!important;
  line-height:.94!important;
  letter-spacing:-.055em!important;
}
.gallery-title span{
  flex:0 0 auto!important;
}
@media(max-width:900px){
  .gallery-title h3{
    font-size:clamp(28px,7vw,48px)!important;
    text-align:right!important;
  }
}

/* Larger lightbox preview */
.viewer{
  padding:clamp(24px,3vw,46px)!important;
}
.viewer-image{
  width:min(1540px,96vw)!important;
  height:min(880px,86vh)!important;
}
@media(max-width:900px){
  .viewer{
    padding:22px!important;
  }
  .viewer-image{
    width:96vw!important;
    height:82vh!important;
  }
}
@media(max-width:560px){
  .gallery-title h3{
    font-size:10.5vw!important;
    text-align:right!important;
  }
}
