@import "https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap";:root{color:#e8e8e3;scroll-behavior:smooth;background:#080909;font-family:Manrope,Arial,sans-serif}*{box-sizing:border-box}body{margin:0}.wrap{width:min(1700px,100% - 96px);margin:auto}.hero{background:#101313;height:100svh;min-height:700px;position:relative;overflow:hidden}.hero-video{object-fit:cover;opacity:.7;filter:grayscale()contrast(1.1);width:100%;height:100%}.hero-shade{background:linear-gradient(90deg,#000000b8,#0000001a 65%,#0006),linear-gradient(#0000 50%,#000000b8);position:absolute;inset:0}.nav{z-index:3;border-bottom:1px solid #ffffff29;justify-content:space-between;align-items:center;height:104px;display:flex;position:absolute;inset:0 auto auto}.mark{color:#f2f3ec;letter-spacing:-2px;font-size:25px;font-weight:800;text-decoration:none}.mark span{vertical-align:top;font:9px DM Mono}.nav-links{gap:35px;display:flex}.nav button,.text-link{color:inherit;cursor:pointer;background:0 0;border:0;font:11px DM Mono}.contact-chip{border:1px solid #ffffff73!important;padding:13px 17px!important}.contact-chip i,.circle-button b{color:#c6ff2f;font-style:normal}.menu{display:none}.hero-copy{z-index:2;padding-bottom:54px;position:absolute;inset:auto 0 0}.eyebrow,.section-label{letter-spacing:.08em;font:11px DM Mono}.hero h1{letter-spacing:-.1em;margin:35px 0 58px;font-size:clamp(78px,10.35vw,176px);font-weight:800;line-height:.78}.hero h1 span{display:block}.hero h1 em,h2 i{letter-spacing:-.08em;font-family:Playfair Display,serif;font-weight:600}.hero h1 em{color:#c6ff2f;margin-left:19vw;display:block}.hero-bottom{justify-content:space-between;align-items:flex-end;font:11px/1.6 DM Mono;display:flex}.circle-button{color:#fff;cursor:pointer;background:0 0;border:1px solid #fff9;border-radius:50%;width:94px;height:94px;font:10px DM Mono}.circle-button b{font-size:20px}.scanline{background:#c6ff2f;width:100%;height:4px;position:absolute;bottom:0}.section{padding:160px 0}.section-label{color:#a3a7a2;gap:26px;margin-bottom:82px;display:flex}.about-grid{grid-template-columns:40% 1fr;gap:9.5vw;display:grid}.portrait{max-width:510px;position:relative}.portrait img{aspect-ratio:.81;object-fit:cover;filter:grayscale()contrast(1.15);width:100%;display:block}.portrait:after{content:"";z-index:-1;border:1px solid #c6ff2f;position:absolute;inset:19px -19px -19px 19px}.portrait small{color:#898d88;margin-top:35px;font:9px/1.5 DM Mono;display:block}.large{letter-spacing:-.06em;margin:0 0 64px;font-size:clamp(29px,3.05vw,54px);line-height:1.25}.bio{color:#aeb1ad;columns:2;gap:50px;max-width:560px;font-size:15px;line-height:1.9}.bio p{margin-top:0}.text-link{border-bottom:1px solid #c6ff2f;margin-top:40px;padding:0 0 10px;font-size:12px}.metrics{border-top:1px solid #2d312f;border-bottom:1px solid #2d312f;grid-template-columns:repeat(4,1fr);margin-top:170px;display:grid}.metrics div{border-right:1px solid #2d312f;padding:27px 0 23px}.metrics div+div{padding-left:25px}.metrics div:last-child{border:0}.metrics b{letter-spacing:-.06em;font-size:45px}.metrics b span{color:#c6ff2f;font-size:20px}.metrics p{color:#929692;margin:8px 0 0;font:10px DM Mono}.work{color:#101211;background:#e5e5df;padding:45px 0 140px}.work .section-label{color:#676b67;padding-top:115px}.work-heading{justify-content:space-between;align-items:end;margin-bottom:58px;display:flex}.work h2,.cap-head h2,.contact h2{letter-spacing:-.095em;margin:0;font-size:clamp(62px,8vw,132px);font-weight:800;line-height:.78}.work-heading p{color:#555;font:12px/1.8 DM Mono}.filters{border-top:1px solid #b3b6ae;border-bottom:1px solid #b3b6ae;gap:8px;margin-bottom:32px;padding:14px 0;display:flex}.filters button{color:#373a37;cursor:pointer;background:0 0;border:0;padding:10px 14px;font:11px DM Mono}.filters span{color:#829157;margin-left:10px;font-size:9px}.gallery{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.gallery-item{cursor:pointer;color:#fff;text-align:left;background:#171917;border:0;min-width:0;height:330px;padding:0;position:relative;overflow:hidden}.gallery-item:nth-child(7n+2),.gallery-item:nth-child(7n+6){grid-row:span 2;height:672px}.gallery-item:nth-child(7n+4){grid-column:span 2}.gallery-item img{object-fit:cover;filter:grayscale();width:100%;height:100%;transition:all .5s;display:block}.gallery-item:after{content:"";background:linear-gradient(#0000 48%,#000c);position:absolute;inset:0}.gallery-item span{z-index:1;gap:4px;display:grid;position:absolute;inset:auto 17px 15px}.gallery-item i,.gallery-item em{letter-spacing:.06em;color:#c6ff2f;font:9px DM Mono}.gallery-item b{white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.gallery-item em{opacity:0;position:absolute;bottom:0;right:0}.gallery-item:hover em{opacity:1}.lightbox{z-index:20;background:#020303f5;flex-direction:column;justify-content:center;align-items:center;padding:65px;display:flex;position:fixed;inset:0}.lightbox img{object-fit:contain;max-width:100%;max-height:calc(100vh - 120px)}.lightbox-close{color:#fff;cursor:pointer;background:0 0;border:0;font:11px DM Mono;position:absolute;top:25px;right:30px}.lightbox p{color:#c6ff2f;font:10px DM Mono}.capabilities{padding-bottom:180px}.cap-head{justify-content:space-between;align-items:end;margin-bottom:92px;display:flex}.cap-head p{color:#aeb1ad;max-width:300px;font-size:14px;line-height:1.8}.cap-grid{border-top:1px solid #333;grid-template-columns:repeat(4,1fr);display:grid}.cap-card{border-right:1px solid #333;height:330px;padding:22px;position:relative}.cap-card:first-child{border-left:1px solid #333}.cap-card span,.cap-card i{color:#c6ff2f;font:10px DM Mono}.cap-card h3{letter-spacing:-.05em;margin:95px 0 14px;font:700 21px Manrope}.cap-card p{color:#a6aaa5;margin:0;font-size:13px;line-height:1.75}.cap-card i{font-style:normal;position:absolute;bottom:20px;right:22px}.contact{background:#101412;min-height:100svh;display:flex;position:relative;overflow:hidden}.contact-orb{background:radial-gradient(circle at 40% 45%,#a2db24,#335313 20%,#101412 61%);border-radius:50%;width:90vw;height:90vw;position:absolute;top:-25vw;right:-28vw}.contact-inner{flex-direction:column;justify-content:center;min-height:100svh;padding:100px 0 38px;display:flex;position:relative}.contact h2{font-size:clamp(85px,12.8vw,210px)}.contact h2 i{display:block}.contact-note{color:#d1d6cc;margin:42px 0;font-size:14px;line-height:1.9}.contact-cta{color:#0c100c;background:#c6ff2f;width:max-content;padding:18px 22px;font:11px DM Mono;text-decoration:none}footer{color:#b8bdb5;border-top:1px solid #ffffff38;justify-content:space-between;margin-top:auto;padding-top:20px;font:10px DM Mono;display:flex}.reveal{opacity:0;transition:all .7s;transform:translateY(26px)}.reveal.in{opacity:1;transform:none}@media (width<=850px){.wrap{width:calc(100% - 44px)}.nav{height:75px}.nav-links,.contact-chip{display:none}.menu{display:block}.nav-links.show{background:#111;flex-direction:column;padding:24px;display:flex;position:absolute;top:75px;left:0;right:0}.section{padding:100px 0}.about-grid{grid-template-columns:1fr;gap:80px}.bio{columns:1}.metrics{grid-template-columns:repeat(2,1fr);margin-top:100px}.metrics div:nth-child(2){border:0}.metrics div:nth-child(n+3){border-top:1px solid #333}.work{padding-bottom:75px}.work-heading,.cap-head{display:block}.work-heading p,.cap-head p{margin-top:35px}.filters{overflow:auto}.gallery{grid-template-columns:repeat(2,1fr);gap:8px}.gallery-item{height:220px}.gallery-item:nth-child(7n+2),.gallery-item:nth-child(7n+6){height:448px}.gallery-item:nth-child(7n+4){grid-column:span 2}.cap-grid{grid-template-columns:repeat(2,1fr)}.cap-card{height:280px}.section-label{margin-bottom:55px}.hero h1{margin-top:28px}.contact-orb{width:140vw;height:140vw}.hero-bottom{align-items:center}}.gallery-item img{filter:none}.gallery-item:hover img{filter:none;transform:scale(1.045)}.gallery{column-count:4;column-gap:12px;display:block}.gallery-item,.gallery-item:nth-child(7n+2),.gallery-item:nth-child(7n+6),.gallery-item:nth-child(7n+4){break-inside:avoid;grid-area:auto;width:100%;height:auto;min-height:0;margin:0 0 12px;display:block}.gallery-item img{object-fit:contain;height:auto}@media (width<=850px){.gallery{column-count:2;column-gap:8px;display:block}.gallery-item,.gallery-item:nth-child(7n+2),.gallery-item:nth-child(7n+6),.gallery-item:nth-child(7n+4){height:auto;margin-bottom:8px}}:root{color:#20201e;background:#f2efe8}.hero{color:#1e1e1b;background:#e7e2d8;min-height:760px}.hero:before{content:"";z-index:1;background:#c9c1ad;border-radius:50%;width:54vw;height:54vw;position:absolute;top:-11vw;right:-7vw}.hero:after{content:"YCH  •  PHOTOGRAPHY  •  FILM";z-index:2;color:#5e5a51;letter-spacing:.18em;writing-mode:vertical-rl;font:11px DM Mono;position:absolute;bottom:17%;right:8%}.hero-video{opacity:.18;filter:grayscale()contrast(.9);mix-blend-mode:multiply}.hero-shade{background:linear-gradient(90deg,#e7e2d8f2 0%,#e7e2d89e 46%,#e7e2d825 100%)}.nav{border-bottom:1px solid #20201e55}.mark,.nav button{color:#20201e}.contact-chip{border-radius:0;border-color:#20201e!important}.hero-copy{padding-bottom:84px}.hero h1{z-index:3;letter-spacing:-.09em;margin:60px 0 48px;font-size:clamp(65px,9.2vw,152px);line-height:.8;position:relative}.hero h1 em{color:#6f7965;letter-spacing:-.06em;margin-left:0;font-family:Playfair Display,serif;font-size:.56em;line-height:1.05}.hero h1 span:last-child{letter-spacing:-.06em;font-family:Playfair Display,serif;font-size:.72em;font-weight:600}.hero-copy .eyebrow{z-index:3;border:1px solid #20201e;border-radius:20px;padding:9px 16px;font-size:11px;display:inline-block;position:relative}.hero-bottom{z-index:3;position:relative}.circle-button{color:#20201e;background:#f6f3ed;border-color:#20201e}.circle-button b{color:#7e886f}.scanline{background:#20201e;height:48px}.scanline:after{content:"YAN CHONGHAO  —  PHOTOGRAPHY PORTFOLIO  —  作品展示  —  VISUAL STORYTELLING";white-space:nowrap;color:#e7e2d8;letter-spacing:.15em;padding-left:6vw;font:11px/48px DM Mono;display:block;overflow:hidden}.about{color:#20201e;background:#f6f3ed}.section-label{color:#646158}.section-label span{color:#7b866d}.portrait img{filter:none!important}.portrait:after{border-color:#7b866d}.portrait small,.bio,.metrics p{color:#6b675e}.metrics,.metrics div{border-color:#c9c3b7}.metrics b span{color:#7b866d}.work{color:#20201e;background:#d9d1c2}.work .section-label{color:#676157}.work h2 i{color:#6f7965}.work-heading p{color:#605c54}.filters{border-color:#8d887f}.filters button{color:#3c3933;border-radius:0}.filters button.active{color:#f6f3ed;background:#20201e}.filters span{color:#7a866f}.gallery-item{background:#c5bdae;border:1px solid #b0aa9f}.gallery-item:after{background:linear-gradient(#0000 42%,#20201ecf)}.gallery-item i,.gallery-item em{color:#dbe4c9}.capabilities{color:#f0ece2;background:#20201e}.capabilities .section-label{color:#bcb7aa}.capabilities .section-label span,.cap-card span,.cap-card i{color:#cdd7b9}.cap-card{border-color:#59574f}.cap-card p,.cap-head p{color:#bbb6aa}.contact{background:#727b68}.contact-orb{opacity:.65;background:radial-gradient(circle at 40% 45%,#e2dccd,#b5ae9f 25%,#727b68 62%)}.contact .eyebrow,.contact h2 i{color:#f2efe8}.contact-cta{color:#30342d;background:#f2efe8}footer{color:#e5e0d7;border-color:#e5e0d766}@media (width<=850px){.hero:before{width:130vw;height:130vw;right:-60vw}.hero:after{font-size:9px;bottom:10%;right:5%}.hero h1{margin-top:48px}.scanline{height:40px}.scanline:after{line-height:40px}}.equipment{color:#20201e;background:#f6f3ed;padding:150px 0}.equipment-heading{justify-content:space-between;align-items:flex-end;margin-bottom:64px;display:flex}.equipment-heading .eyebrow{color:#777064;margin:0 0 22px}.equipment-heading h2{letter-spacing:-.085em;margin:0;font-size:clamp(52px,6.8vw,108px);line-height:.83}.equipment-heading h2 i{color:#77806b}.equipment-heading>p{color:#716c62;max-width:290px;margin:0;font-size:15px;line-height:1.8}.equipment-grid{border-top:1px solid #aaa398;border-left:1px solid #aaa398;grid-template-columns:repeat(3,1fr);display:grid}.equipment-card{background:linear-gradient(135deg,#f6f3ed,#eae5db);border-bottom:1px solid #aaa398;border-right:1px solid #aaa398;flex-direction:column;min-height:300px;padding:25px;transition:background .3s;display:flex;position:relative}.equipment-card:hover{background:#e2ddcf}.equipment-card>span,.accessory-card>div>span{color:#7b856f;font:11px DM Mono}.equipment-card>p,.accessory-card p{color:#817b70;letter-spacing:.08em;margin:42px 0 7px;font:11px DM Mono}.equipment-card h3,.accessory-card h3{letter-spacing:-.05em;margin:0;font-size:25px}.equipment-card strong{letter-spacing:-.04em;margin-top:auto;font-size:18px}.equipment-card small{color:#777168;max-width:330px;margin-top:8px;font:12px/1.55 DM Mono}.accessory-card{background:#e4ded2;border:1px solid #aaa398;border-top:0;grid-template-columns:30% 1fr;gap:38px;padding:28px;display:grid}.accessory-card h3{font-size:28px}.accessory-list{border-top:1px solid #b9b1a3;border-left:1px solid #b9b1a3;grid-template-columns:repeat(3,1fr);gap:0;display:grid}.accessory-list span{color:#504c45;border-bottom:1px solid #b9b1a3;border-right:1px solid #b9b1a3;padding:13px 14px;font-size:13px;line-height:1.4}@media (width<=850px){.equipment{padding:100px 0}.equipment-heading{display:block}.equipment-heading>p{margin-top:28px}.equipment-grid{grid-template-columns:repeat(2,1fr)}.equipment-card{min-height:230px;padding:18px}.equipment-card>p{margin-top:27px}.equipment-card h3{font-size:20px}.equipment-card strong{font-size:15px}.accessory-card{grid-template-columns:1fr;gap:28px;padding:20px}.accessory-list{grid-template-columns:repeat(2,1fr)}}
