:root { --ink:#23302e; --soft:#566260; --paper:#f8f7f2; --sage:#b9c4b5; --rose:#a56c69; --rose-pale:#ddc4bf; --blue:#aec0cf; --line:rgba(35,48,46,.22); --display:"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; --body:"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif; --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font:400 18px/1.72 var(--body); }
a { color:inherit; text-decoration:none; } img { display:block; width:100%; } figure, p, h1, h2, h3, dl { margin:0; }
.intro-screen { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--paper); background:var(--ink); transition:opacity .48s ease, visibility .48s step-end; }.intro-screen.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }.intro-word { font:700 clamp(48px,10vw,150px)/.9 var(--display); transform:translateY(18px); opacity:0; animation:intro-word-in .58s cubic-bezier(.2,.8,.2,1) .12s forwards; }.intro-rule { width:min(280px,43vw); height:6px; margin:22px 0 17px; background:var(--rose-pale); transform:scaleX(0); transform-origin:left; animation:intro-rule-in .42s cubic-bezier(.2,.8,.2,1) .63s forwards; }.intro-number, .intro-note { color:#d9e1d4; font:600 11px/1 var(--mono); letter-spacing:.16em; opacity:0; animation:intro-fade-in .34s ease .86s forwards; }.intro-number { position:absolute; top:32px; left:clamp(20px,4vw,62px); } @keyframes intro-word-in { to { opacity:1; transform:translateY(0); } } @keyframes intro-rule-in { to { transform:scaleX(1); } } @keyframes intro-fade-in { to { opacity:1; } }
.site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:84px; max-width:1500px; padding:0 5.2vw; margin:auto; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; }.brand span { display:grid; place-items:center; width:33px; height:33px; color:var(--paper); background:var(--ink); font:700 11px/1 var(--mono); transform:rotate(-4deg); }
nav { display:flex; gap:28px; font-size:14px; font-weight:600; } nav a { position:relative; } nav a:after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--rose); transform:scaleX(0); transition:transform .25s ease; } nav a:hover:after { transform:scaleX(1); }
.header-contact { justify-self:end; padding-bottom:3px; border-bottom:1px solid var(--ink); font-size:14px; font-weight:700; }.header-contact b, .button b, .contact a b { color:var(--rose); font-size:18px; }
.section-shell { max-width:1500px; margin:auto; padding:clamp(88px,11vw,165px) 5.2vw; }.kicker { color:var(--soft); font:700 11px/1.2 var(--mono); letter-spacing:.09em; }.section-title { margin-bottom:clamp(48px,6vw,84px); }.section-title h2, .contact h2 { margin-top:16px; font:650 clamp(45px,5.5vw,82px)/1.07 var(--display); letter-spacing:0; }.section-title em, h1 em, h3 em, .contact em { color:var(--rose); font-style:normal; font-weight:520; }.title-right { text-align:right; }
.hero { position:relative; display:grid; grid-template-columns:minmax(380px,.95fr) minmax(360px,.8fr); align-items:center; column-gap:6vw; min-height:calc(100vh - 84px); padding-top:70px; padding-bottom:90px; overflow:hidden; }.hero:before { content:""; position:absolute; width:48vw; height:48vw; max-width:740px; max-height:740px; right:-13vw; top:8%; border-radius:50%; background:var(--sage); opacity:.55; }.hero-copy { position:relative; z-index:1; }.hero h1 { margin:25px 0 20px; font:650 clamp(56px,8vw,126px)/.93 var(--display); }.hero h1 em { display:block; margin-top:12px; font-size:.47em; }.hero-lead { max-width:560px; font-size:clamp(20px,2vw,28px); font-weight:600; line-height:1.45; }.hero-detail { max-width:530px; color:var(--soft); margin-top:17px; }.hero-actions { display:flex; gap:12px; margin-top:35px; }.button { min-width:145px; display:flex; align-items:center; justify-content:space-between; padding:13px 13px 13px 18px; font-weight:700; font-size:14px; transition:transform .22s ease, background .22s ease; }.button:hover { transform:translateY(-3px); }.button-ink { background:var(--ink); color:var(--paper); }.button-paper { border:1px solid var(--ink); }.hero-portrait-wrap { position:relative; z-index:1; width:min(100%,510px); justify-self:end; padding:0 30px 45px 0; }.hero-portrait { position:relative; width:85%; margin-left:auto; transform:rotate(3deg); box-shadow:13px 14px 0 var(--rose-pale); }.hero-portrait:after { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.8); pointer-events:none; }.hero-portrait img { aspect-ratio: .76; object-fit:cover; object-position:center; }.hero-portrait figcaption, .campus-photo figcaption, .entry-media figcaption, .project-image figcaption, .moment figcaption { position:absolute; bottom:0; left:0; padding:11px 13px; background:rgba(248,247,242,.94); font:700 10px/1.25 var(--mono); letter-spacing:.05em; }.portrait-rule { position:absolute; width:64%; height:68%; left:0; bottom:0; border:2px solid var(--ink); transform:rotate(-8deg); }.portrait-note { position:absolute; left:0; top:8%; font:700 12px/1.5 var(--mono); letter-spacing:.07em; }.portrait-note span { color:var(--rose); font:400 11px/1.4 var(--body); letter-spacing:0; }.hero-meta { position:absolute; right:5.2vw; bottom:32px; display:grid; grid-template-columns:auto auto; gap:3px 18px; font:700 10px/1.4 var(--mono); letter-spacing:.07em; }.hero-meta span { color:var(--soft); }.hero-meta b { font-size:11px; }
.education { background:var(--sage); max-width:none; padding-left:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); padding-right:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); }.education-title h2 em { display:block; text-align:center; }.education-grid { display:grid; grid-template-columns:1.28fr .72fr; gap:clamp(30px,5vw,85px); align-items:end; }.education-statement { border-top:2px solid var(--ink); min-height:470px; display:flex; flex-direction:column; justify-content:space-between; padding-top:26px; }.education-statement>p { max-width:790px; font:600 clamp(31px,3.6vw,54px)/1.25 var(--display); }.degree-list { display:flex; gap:9px; flex-wrap:wrap; padding:24px 0 0; border-top:1px solid var(--line); }.degree-list span { padding:8px 10px; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:600; }.campus-photo { position:relative; margin:0 0 38px; transform:translateY(35px); box-shadow:-12px 13px 0 rgba(35,48,46,.14); }.campus-photo img { aspect-ratio:.82; object-fit:cover; }.campus-photo figcaption { right:0; display:flex; justify-content:space-between; gap:8px; }.campus-photo b { color:var(--rose); }.education-notes { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin-top:72px; border-top:1px solid var(--line); }.education-notes article { padding:23px 27px 0; border-left:1px solid var(--line); }.education-notes article:first-child { padding-left:0; border:0; }.education-notes span, .entry-no { color:var(--rose); font:700 11px/1 var(--mono); }.education-notes h3 { margin:36px 0 8px; font:650 28px/1.25 var(--display); }.education-notes p { color:var(--soft); font-size:16px; }
.experience { background:#eef0ec; max-width:none; padding-left:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); padding-right:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); }.experience-list { display:grid; gap:clamp(88px,12vw,180px); }.experience-entry { display:grid; align-items:start; gap:clamp(20px,3vw,52px); border-top:2px solid var(--ink); padding-top:21px; }.entry-gis { grid-template-columns:44px minmax(0,1fr) minmax(280px,.58fr); }.entry-jd { grid-template-columns:44px minmax(230px,.5fr) minmax(0,1fr); }.entry-no { padding-top:3px; }.entry-content { max-width:720px; }.entry-meta { display:flex; justify-content:space-between; color:var(--soft); font:700 11px/1 var(--mono); letter-spacing:.06em; }.entry-content h3 { margin:24px 0; font:650 clamp(30px,3.3vw,49px)/1.18 var(--display); }.entry-content>p { margin:0 0 17px; font-size:18px; }.entry-detail { margin-top:25px; padding-top:14px; border-top:1px solid var(--line); color:var(--soft); }.entry-detail span, .project-method span { display:block; color:var(--rose); margin-bottom:8px; font:700 11px/1.2 var(--mono); letter-spacing:.06em; }.entry-detail p { margin:0; font-size:16px; }.entry-media { position:relative; margin:0; overflow:hidden; box-shadow:10px 11px 0 rgba(35,48,46,.12); }.media-brand { width:100%; margin-left:auto; margin-top:34px; }.media-brand img { aspect-ratio:1.35; object-fit:cover; object-position:center; }.media-jd { width:100%; margin-top:110px; }.media-jd img { aspect-ratio:1.08; object-fit:cover; object-position:center; }.entry-media figcaption { background:var(--ink); color:var(--paper); }
.projects { background:var(--rose-pale); max-width:none; padding-left:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); padding-right:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); }.project { position:relative; display:grid; gap:clamp(25px,4vw,66px); margin-bottom:clamp(80px,12vw,170px); }.project-dispatch { grid-template-columns:1.03fr .72fr; padding-right:8vw; }.project-mobility { grid-template-columns:.72fr 1.03fr; padding-left:8vw; align-items:center; }.project-info { padding:35px 0 25px; }.project-label { display:flex; justify-content:space-between; gap:15px; color:var(--soft); font:700 11px/1.2 var(--mono); letter-spacing:.07em; }.project-info h3 { margin:46px 0 21px; font:650 clamp(35px,4.5vw,66px)/1.1 var(--display); }.project-info>p:not(.project-label) { max-width:590px; font-size:18px; }.project-info dl { display:grid; grid-template-columns:110px 1fr; gap:20px; margin-top:40px; padding-top:15px; border-top:1px solid var(--line); font-size:16px; }.project-info dt { color:var(--soft); font:700 11px/1.4 var(--mono); }.project-info dd { margin:0; font-weight:700; text-align:right; }.project-image { position:relative; margin:0; overflow:hidden; align-self:start; box-shadow:12px 13px 0 rgba(35,48,46,.14); }.project-dispatch .project-image { margin-top:-35px; transform:rotate(1.8deg); }.project-dispatch .project-image img { aspect-ratio:.86; object-fit:cover; object-position:center; }.project-mobility .project-image { transform:rotate(-2.4deg); }.project-mobility .project-image img { aspect-ratio:1.16; object-fit:cover; }.project-image figcaption { background:var(--ink); color:#fff; }.project-method { max-width:580px; margin-top:-20px; padding:18px 22px; background:rgba(248,247,242,.76); font-size:16px; line-height:1.68; }.project-method p { margin:0; }
.toolkit { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(40px,11vw,180px); align-items:end; }.toolkit .section-title { margin:0; }.tool-list { border-top:2px solid var(--ink); }.tool-list article { display:grid; grid-template-columns:45px 1fr 1.1fr; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); }.tool-list span { color:var(--rose); font:700 11px/1 var(--mono); }.tool-list h3 { margin:0; font:650 25px/1.2 var(--display); }.tool-list p { margin:0; color:var(--soft); font-size:16px; }
.project-image.project-image-contain { background:#dce3e7; }.project-dispatch .project-image.project-image-contain img, .project-mobility .project-image.project-image-contain img { object-fit:contain; background:#dce3e7; }
.moments { background:#e6ecee; max-width:none; padding-left:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); padding-right:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); }.moment-grid { display:grid; grid-template-columns:1.12fr .65fr .9fr; grid-template-rows:210px 320px; gap:20px; }.moment { position:relative; margin:0; overflow:hidden; background:#ddd; }.moment img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }.moment:hover img { transform:scale(1.035); }.m-train { grid-row:span 2; }.m-award { grid-column:span 2; }.m-campus { transform:translateY(-58px); }.m-night { grid-column:2 / span 2; transform:translateY(36px); }.moment figcaption { right:0; display:flex; justify-content:space-between; }
.contact { max-width:none; min-height:680px; display:grid; grid-template-columns:1fr .5fr; gap:10vw; align-items:center; background:var(--blue); padding-left:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); padding-right:max(5.2vw,calc((100% - 1500px)/2 + 5.2vw)); }.contact>div>p:not(.kicker) { max-width:530px; margin:22px 0 40px; }.contact a { display:flex; justify-content:space-between; max-width:650px; padding:13px 0; border-top:1px solid var(--line); font:600 clamp(19px,2vw,29px)/1.2 var(--display); }.contact a:last-child { border-bottom:1px solid var(--line); }.contact figure { position:relative; margin:0; width:min(100%,290px); justify-self:end; transform:rotate(5deg); box-shadow:10px 11px 0 rgba(35,48,46,.18); }.contact figure:after { content:""; position:absolute; inset:9px; border:1px solid var(--ink); pointer-events:none; }.contact figure img { aspect-ratio:.67; object-fit:cover; object-position:center top; }.contact figcaption { position:absolute; bottom:19px; right:12px; padding:8px; background:#e4cf8c; font:700 11px/1 var(--mono); z-index:1; }
footer { display:flex; justify-content:space-between; gap:20px; max-width:1500px; margin:auto; padding:25px 5.2vw; font:700 10px/1 var(--mono); } footer a { border-bottom:1px solid var(--ink); padding-bottom:3px; }
@media (max-width:820px) { body { font-size:17px; }.site-header { height:68px; grid-template-columns:1fr auto; padding:0 20px; }.site-header nav { display:none; }.header-contact { font-size:13px; }.section-shell { padding:90px 20px; }.hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; }.hero h1 { font-size:clamp(58px,17vw,86px); }.hero-portrait-wrap { width:min(100%,420px); margin:65px auto 0; justify-self:center; }.hero-meta { position:static; margin-top:25px; justify-self:start; }.education, .experience, .projects, .moments, .contact { padding-left:20px; padding-right:20px; }.education-grid { grid-template-columns:1fr; }.education-statement { min-height:0; }.campus-photo { width:72%; margin:8px 0 0 auto; transform:translateY(0); }.education-notes { grid-template-columns:1fr; margin-top:45px; }.education-notes article, .education-notes article:first-child { padding:20px 0; border:0; border-top:1px solid var(--line); }.education-notes h3 { margin:15px 0 6px; }.title-right { text-align:left; }.entry-gis, .entry-jd { grid-template-columns:30px 1fr; }.entry-content { grid-column:2; }.entry-media { grid-column:1 / -1; grid-row:auto; width:min(88%,480px); margin:12px 0 0 auto; }.media-jd { margin-left:0; }.project-dispatch, .project-mobility { grid-template-columns:1fr; padding:0; }.project-dispatch .project-image, .project-mobility .project-image { width:88%; margin:0; }.project-mobility .project-image { margin-left:auto; }.project-info { padding-top:0; }.project-info h3 { margin:30px 0 16px; }.project-method { margin-top:0; }.toolkit { grid-template-columns:1fr; gap:45px; }.tool-list article { grid-template-columns:30px 1fr; gap:10px; }.tool-list p { grid-column:2; }.moment-grid { grid-template-columns:1fr 1fr; grid-template-rows:260px 180px 220px; gap:13px; }.m-train { grid-row:span 2; }.m-award { grid-column:auto; }.m-campus { grid-column:span 2; transform:none; }.m-night { display:none; }.contact { grid-template-columns:1fr; min-height:0; }.contact figure { justify-self:end; width:190px; margin-top:22px; }.contact>div>p:not(.kicker) { margin-bottom:28px; }.section-title h2, .contact h2 { font-size:clamp(43px,11vw,60px); } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }.intro-screen { display:none; } }