:root{--bg:#11121a;--panel:#191c28;--ink:#f5f5f6;--muted:#a8abb8;--accent:#dcf5a1;--line:#ffffff24;color-scheme:dark;font-family:'Arial','PingFang SC','Microsoft YaHei',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--ink)}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:25px 4vw;background:linear-gradient(#0b112055,transparent)}.brand{font-size:32px;font-weight:600;letter-spacing:-2px}.brand span{font-size:14px;vertical-align:top;margin-left:5px}nav{display:flex;align-items:center;gap:32px;font-size:14px}#language{border:1px solid #ffffff55;border-radius:30px;padding:9px 16px}#language span{margin-left:8px}.hero{position:relative;min-height:720px;height:100svh;overflow:hidden;background:#25345e}.scene{position:absolute;inset:0}.scene>img,.scene>video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.scene>video{opacity:0;pointer-events:none}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b13296b,transparent 30%,transparent 75%,#0b132929);pointer-events:none}#stardust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6}.hero-top{position:absolute;top:112px;left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#e1e5f8cc}.intro{position:absolute;opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;transform:translateY(18px)}.intro.active{opacity:1;pointer-events:auto;transform:none}.intro[data-stage="0"]{bottom:130px;left:5vw}.hero-sign>span{font-size:32px;letter-spacing:4px}.hero-sign small{display:block;margin-top:12px;font-size:14px;letter-spacing:2px}.about{width:38%;right:7%;top:25%;text-shadow:0 2px 20px #12213f55}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted)}.hero .eyebrow{color:#e7ecffb3}h1,h2,h3,p{margin:0}h1{font-size:clamp(36px,3.7vw,62px);line-height:1.28;letter-spacing:-1px;margin:22px 0}p{font-size:16px;line-height:1.9;color:#d7dbe6}.about p+p{margin-top:16px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:23px 0}.tags span{padding:7px 12px;border:1px solid var(--line);border-radius:30px;font-size:12px;white-space:nowrap}.text-link{display:inline-block;margin-top:12px;font-size:14px;border-bottom:1px solid #ffffff77;padding-bottom:8px}.experience{left:6%;width:38%;top:22%}.experience h2{font-size:clamp(32px,3vw,50px);margin:22px 0}.timeline article{border-top:1px solid #ffffff30;padding:13px 0}.timeline small{font-size:12px;color:#d4daf0}.timeline h3{font-size:17px;margin:5px 0}.timeline p{font-size:14px;line-height:1.7}.hero-bottom{position:absolute;bottom:32px;left:4vw;right:4vw;display:flex;justify-content:space-between;align-items:center}.stage-dots{display:flex;gap:10px}.stage-dots button{font-size:12px;padding:12px;border-bottom:1px solid #ffffff40;opacity:.55}.stage-dots .selected{opacity:1;border-color:var(--accent);color:var(--accent)}#nextStage{display:flex;align-items:center;gap:20px;font-size:13px;letter-spacing:1px}#nextStage b{font-size:26px;font-weight:400}.hero-index{font-size:10px;letter-spacing:2px;color:#d9def0}.work-section{padding:95px 5vw 120px;min-height:650px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}.section-heading h2{font-size:clamp(32px,4vw,60px);font-weight:500;letter-spacing:-2px;margin-top:14px}.section-heading p{font-size:14px;color:var(--muted);max-width:320px}.work-nav{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:34px 0 24px;margin-bottom:36px}.work-nav button{border:1px solid transparent;border-radius:30px;padding:11px 18px;color:var(--muted);font-size:14px}.work-nav button.active{background:var(--accent);color:#182020}.work-nav button:hover{border-color:var(--line)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px}.project-card{display:block;text-align:left;cursor:pointer;width:100%;padding:0}.card-media{position:relative;overflow:hidden;border-radius:5px;background:#252735;aspect-ratio:16/10}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}.project-card:hover .card-media img{transform:scale(1.04)}.play{position:absolute;right:15px;bottom:15px;width:42px;height:42px;border:1px solid #ffffff70;border-radius:50%;display:grid;place-items:center;background:#12152266;backdrop-filter:blur(8px);font-size:16px}.card-index{position:absolute;top:16px;left:16px;color:#fff;font-size:12px;padding:5px 8px;background:#11182066;border-radius:3px}.card-info{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-top:15px}.card-info h3{font-size:17px;font-weight:500;line-height:1.6}.card-info p{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.4px}.card-info>span{font-size:20px;color:var(--muted)}.project-card.featured{grid-column:span 2;grid-row:span 2}.featured .card-media{aspect-ratio:1.65}.featured .card-info h3{font-size:24px}.gallery-intro{margin-bottom:28px}.gallery-intro p{color:var(--muted);font-size:14px}.image-wall{display:flex;flex-wrap:wrap;gap:14px}.image-tile{padding:0;position:relative;background:#222532;overflow:hidden;border-radius:3px;flex-grow:1;height:245px;flex-basis:245px}.image-tile.landscape{flex-basis:460px}.image-tile img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .45s}.image-tile:hover img{transform:scale(1.035)}.image-wall:after{content:'';flex-grow:10}.graphic-nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:36px;font-size:14px;color:var(--muted)}.graphic-nav a{border-bottom:1px solid var(--line);padding-bottom:8px}.graphic-block{margin-bottom:70px;scroll-margin-top:30px}.graphic-block h3{font-size:25px;margin-bottom:22px;font-weight:500}.graphic-block .image-wall{align-items:start}.graphic-block .image-tile{height:330px;flex-basis:240px}.graphic-block .image-tile.landscape{flex-basis:440px;height:300px}.film-list{display:grid;gap:56px}.film-card{display:grid;grid-template-columns:1.15fr 1fr;gap:38px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:40px}.film-card .card-media{aspect-ratio:16/9;display:block}.film-card .card-media:hover img{transform:scale(1.04)}.film-card h3{font-size:30px;font-weight:500;margin:8px 0 12px}.film-card .role{font-size:13px;color:var(--accent);margin-bottom:16px}.film-description{font-size:15px;color:var(--muted);white-space:pre-line;line-height:1.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.film-description.expanded{display:block}.expand{font-size:13px;margin-top:12px;color:var(--accent);padding:5px 0}#contact{padding:75px 5vw 25px;background:#1c2334;border-top:1px solid var(--line)}#contact h2{font-size:clamp(32px,4.5vw,68px);line-height:1.3;font-weight:500;margin:25px 0 35px}.email{font-size:clamp(19px,2.5vw,38px);border-bottom:1px solid #ffffff55;padding-bottom:9px;display:inline-block}.contact-bottom{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap;margin-top:70px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}dialog{background:var(--bg);color:var(--ink);border:1px solid #ffffff25;padding:0;max-width:none;max-height:none}dialog::backdrop{background:#080b15d9;backdrop-filter:blur(10px)}#projectDialog{width:min(1200px,94vw);height:92svh;border-radius:12px;overflow:auto}.dialog-top{position:sticky;top:0;background:#11121af2;backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;z-index:2;padding:12px 28px;border-bottom:1px solid var(--line);font-size:14px}.close{font-size:32px;width:44px;height:44px;line-height:1}#dialogContent{padding:30px}.project-title{font-size:clamp(26px,4vw,45px);margin:8px 0 10px;font-weight:500}.project-meta{color:var(--muted);margin-bottom:28px;font-size:14px}.player{width:100%;max-height:66svh;background:#090a10;border-radius:5px}.video-group h3{font-size:23px;margin:40px 0 22px}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 18px}.video-grid video{width:100%;height:260px;object-fit:contain;background:#080a10;border-radius:4px}.video-grid h4{font-size:14px;line-height:1.5;font-weight:500;margin:12px 0 5px}.video-grid small{font-size:12px;color:var(--muted)}#lightbox{background:#0a0c14;width:96vw;height:94svh;border:0;overflow:hidden}#lightbox img{width:100%;height:100%;object-fit:contain;padding:45px 60px 55px}#lightbox .close{position:absolute;right:10px;top:5px;background:#1118;border-radius:50%}#lightbox .previous,#lightbox .next{position:absolute;top:45%;font-size:48px;width:48px;background:#1118;border-radius:8px}#lightbox .previous{left:6px}#lightbox .next{right:6px}.image-count{position:absolute;bottom:15px;width:100%;text-align:center;font-size:13px;color:var(--muted)}
@media(min-width:1600px){.video-grid video{height:340px}.image-tile{height:300px;flex-basis:300px}.image-tile.landscape{flex-basis:570px}}
@media(max-width:1000px){.about{width:43%;right:5%}.experience{width:45%;left:5%;top:20%}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card.featured{grid-column:span 2;grid-row:auto}.featured .card-media{aspect-ratio:2}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.film-card{gap:24px}.hero-index{display:none}}
@media(max-width:700px){header{padding:20px 6vw}.brand{font-size:28px}nav{gap:16px;font-size:13px}nav button{padding:0}#language{padding:7px 10px}nav [data-go]{display:none}.hero{min-height:650px;height:100svh}.hero-top{top:85px;left:6vw;right:6vw;font-size:9px;letter-spacing:1px}.scene>img,.scene>video{object-fit:cover;object-position:50% 50%}.hero[data-current="1"],.hero[data-current="2"]{height:960px}.hero[data-current="1"] .scene,.hero[data-current="2"] .scene{height:48%;mask-image:linear-gradient(#000 80%,transparent)}.hero[data-current="1"] .scene>img,.hero[data-current="2"] .scene>img,.hero[data-current="1"] .scene>video,.hero[data-current="2"] .scene>video{object-fit:contain;background:#26365e}.intro[data-stage="0"]{left:6vw;bottom:145px}.hero-sign>span{font-size:28px}.hero-sign small{font-size:12px}.about,.experience{left:7%;right:7%;width:auto;top:47%;text-shadow:none}.about h1{font-size:36px;margin:15px 0}.about p{font-size:15px;line-height:1.8}.about p+p{margin-top:10px}.tags{margin:15px 0}.experience h2{font-size:34px;margin:14px 0}.timeline article{padding:10px 0}.timeline p{font-size:13px}.timeline h3{font-size:15px}.hero-bottom{left:6vw;right:6vw;bottom:24px}#nextStage{font-size:11px;gap:8px}.stage-dots{gap:4px}.stage-dots button{padding:10px}.work-section{padding:60px 6vw}.section-heading{display:block}.section-heading h2{letter-spacing:-1px}.section-heading p{margin-top:15px}.work-nav{gap:3px;padding:22px 0 18px}.work-nav button{padding:9px 11px;font-size:12px}.project-grid{gap:26px 14px}.card-info h3{font-size:14px}.card-info p{font-size:11px}.featured .card-info h3{font-size:20px}.card-info>span{display:none}.card-media{aspect-ratio:1.1}.card-index{left:8px;top:8px;font-size:10px}.play{width:32px;height:32px;right:8px;bottom:8px;font-size:12px}.image-wall{gap:8px}.image-tile{height:155px;flex-basis:145px}.image-tile.landscape{flex-basis:285px}.graphic-block .image-tile{height:240px;flex-basis:140px}.graphic-block .image-tile.landscape{height:auto;aspect-ratio:1.5;flex-basis:300px}.graphic-nav{font-size:12px;gap:14px}.film-card{grid-template-columns:1fr;gap:18px}.film-card h3{font-size:25px}.film-list{gap:35px}.film-description{font-size:14px}#contact{padding:55px 6vw 24px}.contact-bottom{margin-top:45px;gap:18px}#projectDialog{width:100vw;height:100svh;border-radius:0}.dialog-top{padding:8px 18px}#dialogContent{padding:22px 16px}.video-grid{gap:20px 12px}.video-grid video{height:210px}.video-grid h4{font-size:13px}.project-meta{font-size:13px}#lightbox{width:100vw;height:100svh}#lightbox img{padding:55px 12px}#lightbox .previous,#lightbox .next{font-size:34px;width:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}#stardust{display:none}}
body>#stardust{position:fixed;z-index:12;inset:0;pointer-events:none;width:100vw;height:100vh;opacity:.5}

/* Revision 2: ratio-preserving rows, visible hover and responsive water trails. */
.project-grid,.video-grid,.image-wall{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:18px;row-gap:30px}
.image-wall{column-gap:14px;row-gap:14px}
.project-card,.project-card.featured,.video-grid>article,.image-wall .image-tile,.graphic-block .image-wall .image-tile{flex:0 0 auto;min-width:0;max-width:100%;grid-column:auto;grid-row:auto}
.project-card.featured .card-info h3{font-size:17px}
.project-card .card-media{height:auto;background:transparent}
.project-card .card-media img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
.project-card .card-media{transition:transform .28s ease,box-shadow .28s ease}
.project-card:hover{position:relative;z-index:2}
.project-card:hover .card-media{transform:translateY(-4px);box-shadow:0 14px 30px #0005}
.project-card:hover .card-media img{transform:none}
.image-wall .image-tile,.graphic-block .image-wall .image-tile{height:auto;flex-basis:auto;background:transparent;overflow:visible;transition:transform .28s cubic-bezier(.2,.65,.2,1),box-shadow .28s ease;transform-origin:center}
.image-wall .image-tile img{display:block;width:100%;height:auto;object-fit:contain;border-radius:3px;transform:none}
.image-wall:after{display:none}
@media(hover:hover) and (pointer:fine){
  .image-wall .image-tile:hover{transform:scale(1.075);z-index:5;box-shadow:0 20px 45px #0009}
  .image-wall .image-tile:hover img{transform:none}
}
.image-tile:focus-visible{transform:scale(1.04);z-index:5}
.video-grid video{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
body>#stardust{z-index:30;opacity:1}
.intro{transition:opacity .22s ease,transform .3s ease}
#nextStage{min-height:44px;transition:opacity .12s ease,transform .12s ease}
#nextStage:active{transform:scale(.97)}
#nextStage:disabled{opacity:.7;cursor:progress}
.stage-dots button:disabled{cursor:default}
.hero-transition{will-change:opacity}
@media(max-width:700px){
  .project-grid,.video-grid{column-gap:12px;row-gap:24px}
  .image-wall{column-gap:8px;row-gap:8px}
  .project-card.featured .card-info h3{font-size:14px}
}

/* Revision 3: explicit full-width rows avoid fractional flex wrapping at browser zoom. */
.project-grid,.video-grid,.image-wall{display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
.gallery-row{display:grid;column-gap:inherit;align-items:start;width:100%;min-width:0}
.gallery-row>*{width:100%;min-width:0;max-width:100%}
.video-grid .gallery-row>article{min-width:0}
.card-info>div{min-width:0;overflow-wrap:anywhere}
.hero{cursor:pointer}
.hero a,.hero button{cursor:pointer}
.hero.transitioning{cursor:progress}

/* Suppress native image saving callouts and drag previews on portfolio media. */
#projectGrid img,#projectDialog video,#lightbox img,.scene img,.scene video{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}