:root { --ink:#15347b; --blue:#1543ac; --sky:#4fa9eb; --pale:#d0eff5; --mist:#a8d8f9; --paper:#f6fbff; --red:#8f1111; --line:rgba(21,52,123,.23); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC",sans-serif; } button,a { font:inherit; } a { color:inherit; text-decoration:none; } .grain { pointer-events:none; position:fixed; inset:0; z-index:50; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.site-header { position:fixed; z-index:30; top:0; width:100%; height:70px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; mix-blend-mode:multiply; background:linear-gradient(var(--paper),transparent); } .wordmark { font:900 1rem "DM Mono",monospace; letter-spacing:-.08em; } .wordmark span { margin-left:.18rem; font-weight:400; letter-spacing:.05em; font-size:.69rem; } .nav-links { display:flex; gap:1.1rem; font:500 .65rem "DM Mono",monospace; letter-spacing:.04em; } .nav-links a:hover { text-decoration:underline; text-underline-offset:4px; } .menu-button { display:none; }
.section-shell { padding:8rem 7vw; max-width:1600px; margin:auto; } .eyebrow,.section-number { margin:0; font:500 .66rem "DM Mono",monospace; letter-spacing:.08em; } h1,h2,h3,p { margin-top:0; } h2 { font-size:clamp(2.9rem,6vw,6.3rem); line-height:.96; letter-spacing:-.08em; margin:1rem 0 0; } h2 em,h1 em { font-family:"Playfair Display",serif; letter-spacing:-.06em; font-weight:700; } .section-heading { display:flex; justify-content:space-between; gap:2rem; padding-bottom:3rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }.section-heading h2 { text-align:right; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; align-content:center; padding-top:100px; background:linear-gradient(135deg,var(--pale),var(--paper) 45%,var(--mist)); } .hero-copy { z-index:2; max-width:650px; } .hero-eyebrow { position:absolute; top:110px; left:7vw; } .hero-kicker { font:500 .7rem "DM Mono"; letter-spacing:.15em; margin-bottom:1rem; } h1 { font-size:clamp(3.5rem,9vw,9.5rem); letter-spacing:-.1em; line-height:.8; margin-bottom:2rem; } h1 em { display:block; font-size:.56em; font-weight:700; margin-left:.1em; } .hero-statement { font-size:clamp(1rem,1.6vw,1.4rem); line-height:1.6; font-weight:500; }.portrait-stage { position:absolute; right:4vw; bottom:0; width:min(49vw,690px); height:min(74vw,820px); } .portrait { width:100%; height:100%; object-fit:cover; object-position:50% 44%; mix-blend-mode:multiply; filter:saturate(.85) contrast(1.05); clip-path:polygon(32% 0,72% 5%,95% 28%,86% 100%,19% 100%,5% 73%,12% 28%); } .fragment { position:absolute; overflow:hidden; display:block; outline:1px solid rgba(255,255,255,.8); box-shadow:0 10px 24px rgba(21,52,123,.16); transition:transform .35s ease,box-shadow .35s ease; } .fragment:hover { transform:scale(1.09) rotate(1deg); z-index:3; box-shadow:0 22px 35px rgba(21,52,123,.29); }.fragment img { width:100%;height:100%;object-fit:cover; display:block; }.fragment span { position:absolute; left:.45rem; bottom:.3rem; color:white; font:500 .55rem "DM Mono"; text-shadow:0 1px 5px #000; }.fragment-video{width:28%;height:22%;left:11%;top:17%;clip-path:polygon(0 0,100% 14%,87% 100%,8% 88%)} .fragment-plan{width:30%;height:20%;right:7%;top:14%;clip-path:polygon(15% 0,100% 8%,85% 100%,0 75%)} .fragment-ai{width:33%;height:27%;right:1%;top:40%;clip-path:polygon(0 4%,100% 0,92% 95%,15% 100%)} .fragment-wechat{width:27%;height:24%;left:1%;bottom:25%;clip-path:polygon(0 11%,94% 0,100% 82%,8% 100%)} .fragment-social{width:31%;height:18%;right:14%;bottom:6%;clip-path:polygon(5% 0,100% 16%,81% 100%,0 82%)}.scroll-hint { position:absolute; left:7vw; bottom:2.5rem; font:500 .63rem "DM Mono"; letter-spacing:.08em; }.scroll-hint span { font-size:1.2rem; margin-left:.5rem; }
.about { display:grid; grid-template-columns:.4fr 1fr 1.2fr; gap:3rem; background:var(--blue); color:var(--pale); max-width:none; padding-left:7vw; padding-right:7vw; }.about .section-title h2 { color:white; }.about-body { padding-top:4rem; }.about-body p { line-height:1.8; font-size:.92rem; }.about-body .lead { font-size:1.25rem; line-height:1.6; font-weight:500; }.metrics { display:flex; flex-wrap:wrap; gap:1.5rem; border-top:1px solid rgba(208,239,245,.45); padding-top:1.5rem; margin-top:2rem; }.metrics div { display:grid; gap:.3rem; }.metrics b { color:white; font:700 2rem "DM Mono"; letter-spacing:-.1em; }.metrics span { font-size:.7rem; }.education { grid-column:2/4; display:grid; grid-template-columns:.8fr 1fr 1fr; gap:1rem; padding-top:2rem; border-top:1px solid rgba(208,239,245,.45); }.education div { display:grid; gap:.3rem; }.education span { font-size:.75rem; line-height:1.5; }
.work-section { background:var(--paper); }.project-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:1.2rem; }.project-card { cursor:pointer; border:1px solid var(--line); overflow:hidden; background:white; transition:transform .3s ease; }.project-card:hover { transform:translateY(-7px); }.project-large { grid-row:span 2; }.project-wide { grid-column:1/3; display:grid; grid-template-columns:1.2fr .8fr; }.card-art { height:230px; position:relative; overflow:hidden; background:var(--blue); }.project-large .card-art { height:530px; }.project-wide .card-art { height:300px; }.card-art img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }.project-card:hover img { transform:scale(1.05); }.art-outside img { object-position:center; }.art-colors { display:flex; align-items:flex-end; padding:1.2rem; color:#f4d7b5; background:linear-gradient(140deg,#5b0d4e,#9a4980 50%,#a59cbb); }.art-colors span { font:700 clamp(2rem,4vw,4rem)/.77 "DM Mono"; letter-spacing:-.13em; }.art-douyin img { object-position:center; }.card-meta { padding:1.2rem; }.card-meta span { font:500 .6rem "DM Mono"; }.card-meta h3 { font-size:1.6rem; letter-spacing:-.07em; margin:1rem 0 .7rem; }.card-meta p { font-size:.78rem; line-height:1.7; margin:0; }
.planning-section { background:#f4eeee; }.plan-list { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }.plan-card { background:white; padding:1rem; }.plan-card img { width:100%; height:330px; object-fit:cover; object-position:center; }.plan-card>div { padding:1.5rem .6rem .6rem; }.plan-card h3 { font-size:2rem; letter-spacing:-.08em; margin:1rem 0; }.plan-card p { font-size:.8rem; line-height:1.8; }.plan-card .role { color:#aa3232; font-weight:700; }.text-button { cursor:pointer; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--ink); padding:0 0 .25rem; font:500 .76rem "DM Mono"; }.text-button span { padding-left:1rem; font-size:1rem; }
.video-section { background:var(--blue); color:var(--pale); }.video-section .section-heading { border-color:rgba(208,239,245,.4); }.video-section h2 { color:white; }.video-list { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid rgba(208,239,245,.4); }.video-item { cursor:pointer; min-height:320px; padding:1rem; border:0; border-right:1px solid rgba(208,239,245,.4); text-align:left; color:inherit; background:transparent; display:flex; flex-direction:column; justify-content:space-between; transition:background .25s; }.video-item:hover { background:var(--sky); color:var(--ink); }.video-item:last-child { border-right:0; }.video-item span { font:500 .65rem "DM Mono"; }.video-item h3 { font-size:1.55rem; line-height:1.05; letter-spacing:-.08em; margin:1rem 0; }.video-item p { font-size:.75rem; line-height:1.6; }.video-item .play { align-self:flex-end; width:2.5rem; height:2.5rem; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; }
.wechat-section { background:#90b52c; color:#173114; }.wechat-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.wechat-card { min-height:260px; cursor:pointer; padding:1.3rem; background:#eff8d5; display:flex; flex-direction:column; justify-content:space-between; transition:transform .3s; }.wechat-card:hover { transform:rotate(-2deg) translateY(-8px); }.wechat-card h3 { font-size:1.7rem; letter-spacing:-.08em; margin:0; }.wechat-card p,.wechat-card span { font-size:.75rem; line-height:1.6; }.social-section { background:var(--mist); }.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--blue); border:1px solid var(--blue); }.social-card { min-height:430px; background:var(--mist); display:flex; flex-direction:column; overflow:hidden; transition:background .25s; }.social-card:hover { background:var(--pale); }.social-card img { width:100%; height:185px; object-fit:cover; object-position:center; filter:saturate(.92); transition:transform .5s ease; }.social-card:hover img { transform:scale(1.04); }.social-card div { padding:1.5rem; display:flex; flex:1; flex-direction:column; }.social-card span { font:500 .7rem "DM Mono"; }.social-card h3 { font-size:1.9rem; letter-spacing:-.08em; margin:auto 0 1rem; }.social-card p { font-size:.78rem; line-height:1.75; margin:0; }
.contact { max-width:none; min-height:82vh; color:var(--pale); background:var(--ink); display:flex; flex-direction:column; justify-content:center; }.contact h2 { color:white; }.contact h2 em { color:var(--sky); }.contact-links { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:3rem; }.contact-links a { padding-bottom:.4rem; border-bottom:1px solid currentColor; font:500 1.1rem "DM Mono"; }.contact-links span { margin-left:.6rem; }.footer-note { margin:6rem 0 0; font:500 .6rem "DM Mono"; }
.modal { width:min(1000px,94vw); height:min(90vh,820px); border:0; padding:0; background:#091d4d; color:white; box-shadow:0 24px 80px rgba(0,0,0,.45); }.modal::backdrop { background:rgba(6,20,55,.72); backdrop-filter:blur(7px); }.modal-close { position:absolute; z-index:3; top:.5rem; right:.7rem; width:2.5rem; height:2.5rem; cursor:pointer; border:0; border-radius:50%; color:white; background:rgba(0,0,0,.45); font-size:1.8rem; }.modal video { width:100%; height:100%; object-fit:contain; }.modal-inner { width:100%; height:100%; padding:3rem; overflow:auto; }.modal-inner h3 { font-size:2rem; margin-bottom:.7rem; }.modal-inner p { line-height:1.7; }.pdf-reader { height:100%; display:grid; grid-template-rows:1fr auto; }.pdf-stage { overflow:auto; display:grid; place-items:center; background:#17234c; }.pdf-stage canvas { max-width:100%; height:auto; box-shadow:0 10px 40px #0008; }.pdf-controls { padding:.8rem; display:flex; justify-content:center; align-items:center; gap:1rem; background:#0b1738; font:500 .68rem "DM Mono"; }.pdf-controls button { cursor:pointer; border:1px solid #d0eff5; color:#d0eff5; padding:.4rem .8rem; background:transparent; }.gallery { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }.gallery img,.gallery video { width:100%; height:220px; object-fit:cover; background:#0b1738; }
@media (max-width:850px) { .site-header { height:62px; }.nav-links { position:absolute; top:62px; left:0; right:0; padding:1.5rem 4vw; background:var(--paper); display:none; flex-direction:column; }.nav-links.open { display:flex; }.menu-button { width:32px; display:grid; gap:5px; border:0; background:transparent; }.menu-button span { display:block; height:1px; background:var(--ink); }.section-shell { padding:6rem 6vw; }.hero { min-height:780px; align-content:start; padding-top:145px; }.portrait-stage { width:92vw; height:570px; right:-3vw; }.hero-copy { z-index:4; }.hero-statement { background:var(--paper); display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone; box-shadow:8px 0 var(--paper),-4px 0 var(--paper); }.about { grid-template-columns:1fr; gap:1.5rem; }.about-body { padding-top:0; }.education { grid-column:auto; grid-template-columns:1fr; }.section-heading { display:block; }.section-heading h2 { text-align:left; }.project-grid,.plan-list,.wechat-list,.social-grid { grid-template-columns:1fr; }.project-large,.project-wide { grid-column:auto; grid-row:auto; display:block; }.project-large .card-art,.project-wide .card-art { height:330px; }.video-list { grid-template-columns:1fr 1fr; }.video-item { min-height:210px; border-bottom:1px solid rgba(208,239,245,.4); }.video-item:nth-child(2n) { border-right:0; }.contact { min-height:65vh; }.contact-links { flex-direction:column; align-items:flex-start; }.modal-inner { padding:3rem 1rem 1rem; } }