:root{--cream:#f6f2e9;--paper:#fffdf8;--brown:#4c302c;--olive:#85862e;--pink:#d79a9c;--sage:#8fa18e;--line:rgba(76,48,44,.23);--en:"Manrope",sans-serif;--zh:"Noto Serif TC",serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--brown);font-family:var(--en);font-weight:300;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.loader{position:fixed;inset:0;z-index:300;background:var(--cream);display:grid;place-items:center;font-size:clamp(4rem,12vw,11rem);font-weight:500;letter-spacing:-.07em;transition:transform .8s}.loader span,.wordmark span{color:var(--pink)}.loader.done{transform:translateY(-100%)}.cursor{position:fixed;z-index:400;width:26px;height:26px;border:1px solid rgba(76,48,44,.45);border-radius:4px;background:#f4eee4 url("images/cursor-floral-tile-v2.png") center/cover;pointer-events:none;transform:translate(-50%,-50%);transition:width .36s,height .36s,transform .42s cubic-bezier(.22,.8,.25,1);box-shadow:0 4px 14px #4c302c29}.cursor.big{width:52px;height:52px;transform:translate(-50%,-50%) rotate(90deg)}.progress{position:fixed;z-index:250;top:0;left:0;height:2px;width:100%;background:var(--olive);transform:scaleX(0);transform-origin:left}.nav{position:absolute;z-index:100;width:100%;padding:18px 3vw;display:grid;grid-template-columns:2fr 2fr 1fr 1fr;align-items:start}.wordmark{font-size:22px;font-weight:500;letter-spacing:-.025em}.wordmark span{display:inline-block;margin:0 .13em 0 .06em;font-family:var(--zh);font-size:1.2em}.nav>p,.nav button,small{margin:0;font-size:9px;letter-spacing:.11em}.nav button{border:0;background:none;cursor:pointer}.nav nav{position:fixed;inset:0;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:10vw;opacity:0;visibility:hidden;z-index:-1;transition:.35s}.nav nav.open{opacity:1;visibility:visible}.nav nav a{font-size:clamp(3rem,7vw,7rem);border-bottom:1px solid var(--line)}.hero{min-height:100svh;padding:13vh 4vw 4vw;display:grid;grid-template-columns:.9fr 1.25fr;align-items:center;position:relative}.hero h1,.section h2,.mood h2,.contact h2{font-size:clamp(3.8rem,7.5vw,8rem);font-weight:300;line-height:.95;letter-spacing:-.06em;margin:2vw 0}.hero em,.section em,.mood em,.contact em{font-family:var(--zh);font-style:normal;color:var(--olive)}.hero-copy>p,.about-copy>p,.cards p,.panel p,.execution header>p,.mood p{font-family:var(--zh);line-height:1.95;font-size:13px}.hero-copy>p{width:72%;margin-left:18%}.hero-art{height:75vh;perspective:1000px}.hero-art img{width:124%;height:118%;margin:-8% 0 0 -12%;object-fit:contain;transform:rotateX(calc(var(--y,0)*-5deg)) rotateY(calc(var(--x,0)*6deg)) translateZ(30px);filter:drop-shadow(0 18px 18px #4c302c22);transition:.18s}.hero>b{position:absolute;right:3vw;bottom:3vw;font-size:9px}.about{padding:9vw 7vw 12vw;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(360px,.95fr) minmax(480px,1.15fr);gap:2.8vw 6vw}.about>small{grid-column:1/-1}.portrait{height:min(59vw,720px);min-height:580px;background-image:url("images/profile-photo.jpg")!important;background-position:center top!important;background-size:cover!important}.about-copy h2{font-size:clamp(3.3rem,5.7vw,6.8rem);line-height:.95;letter-spacing:-.06em;margin:0}.about-copy h3{font:300 clamp(2.8rem,4.7vw,5.6rem)/1 var(--zh);color:var(--pink);margin:1vw 0 4vw}.about-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:0 2vw;border-top:1px solid var(--line);margin-top:4vw}.about-copy dl>div{padding:17px 0;border-bottom:1px solid var(--line)}dt{font-size:8px;letter-spacing:.1em}dd{margin:10px 0 0;font-size:10px;line-height:1.8}.section{padding:10vw 5vw}.section>header{display:grid;grid-template-columns:1fr 2.5fr 1fr;gap:3vw;margin-bottom:8vw}.section>header h2{grid-column:2}.cards{display:grid;grid-template-columns:1fr 1fr;gap:9vw 2vw}.cards article:nth-child(even){margin-top:10vw}.placeholder{position:relative;margin:0;background:#d8d0c3;min-height:300px;overflow:hidden}.placeholder:before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font-size:9px;letter-spacing:.1em;color:#766f65}.placeholder:after{content:"";position:absolute;inset:12px;border:1px solid var(--line)}.cards figure{height:48vw}.cards h3{font-size:28px;font-weight:400;margin:15px 0}.cards p{width:78%;margin-left:15%}.mood{padding:11vw 6vw;background:#e6d9d0;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}.mood-buttons{display:flex;gap:7px;flex-wrap:wrap;margin:4vw 0}.mood-buttons button,.tabs button{border:1px solid var(--brown);background:transparent;padding:8px 13px;border-radius:30px;font-size:9px}.mood-buttons .active{background:var(--brown);color:white}.mood-board{height:56vw;position:relative;background:var(--paper);overflow:hidden}.mood-board i{position:absolute;display:block;width:38%;height:38%;left:5%;top:5%;background:#8c5f4a;transform:translate(calc(var(--mx,0)*-12px),calc(var(--my,0)*-8px));transition:.25s}.mood-board i:nth-child(2){left:auto;right:5%;background:var(--olive)}.mood-board i:nth-child(3){top:auto;bottom:5%;border-radius:50%;background:var(--pink)}.mood-board figure{position:absolute;width:48%;height:52%;right:6%;bottom:8%;min-height:0}.mood-board b{position:absolute;left:8%;top:52%;font-size:10px}.tabs{display:flex;border-bottom:1px solid var(--line);overflow:auto}.tabs button{border:0;border-radius:0;min-width:140px;flex:1}.tabs button.active{background:var(--cream)}.panels{background:var(--paper)}.panel{display:none;grid-template-columns:1fr 1.15fr;gap:6vw;align-items:center;padding:7vw 4vw;min-height:58vw}.panel.active{display:grid}.panel h3{font:300 clamp(2rem,4vw,4rem)/1.2 var(--zh)}.panel figure{height:48vw}.plan{border:2px solid var(--brown);background:repeating-linear-gradient(0deg,transparent 0 39px,#4c302c0d 40px),repeating-linear-gradient(90deg,transparent 0 39px,#4c302c0d 40px);display:flex;align-items:center;justify-content:center;gap:10px}.plan span{background:var(--pink);padding:20px}.panel ol{font-family:var(--zh);font-size:17px;line-height:3}.execution header>p{grid-column:3}.exec-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw 2vw}.exec-grid figure{height:36vw}.exec-grid figure:nth-child(even){margin-top:7vw}.more{background:var(--olive);color:white;padding:8vw 6vw}.more a{display:grid;grid-template-columns:60px 2fr 1fr;border-top:1px solid #ffffff66;padding:2vw 0;align-items:center}.more strong{font-size:clamp(2rem,4vw,4rem);font-weight:300}.more span{font-family:var(--zh);font-size:12px}.contact{min-height:100vh;padding:8vw 5vw 2vw;background:var(--brown);color:var(--cream);display:flex;flex-direction:column}.contact h2{margin:auto 0}.contact h2 em{color:var(--pink)}.contact>a{font-size:clamp(1.4rem,3vw,3rem);border-bottom:1px solid;align-self:flex-start}.contact footer{margin-top:auto;display:grid;grid-template-columns:1fr 2fr 1fr;border-top:1px solid #ffffff55;padding-top:12px;font-size:9px}.reveal{opacity:0;transform:translateY(30px);transition:.8s}.reveal.visible{opacity:1;transform:none}.tilt{transition:transform .2s,box-shadow .2s}.tilt.active{box-shadow:0 22px 45px #4c302c22}@media(pointer:fine){body,a,button{cursor:none}}@media(max-width:900px){.cursor{display:none}.nav{grid-template-columns:1fr auto auto}.nav>p{display:none}.hero{grid-template-columns:1fr;padding:15vh 6vw 18vw}.hero h1{font-size:15vw}.hero-art{height:58vh}.about{grid-template-columns:1fr;padding:20vw 6vw}.about>small,.portrait,.about-copy{grid-column:1}.portrait{height:125vw;min-height:0}.about-copy h2{font-size:14vw}.about-copy h3{font-size:13vw}.section{padding:20vw 5vw}.section>header{grid-template-columns:1fr}.section>header h2{grid-column:1;font-size:13vw}.cards,.exec-grid,.mood{grid-template-columns:1fr}.cards article:nth-child(even),.exec-grid figure:nth-child(even){margin-top:0}.cards figure{height:110vw}.mood-board{height:110vw}.panel{grid-template-columns:1fr}.panel figure{height:95vw}.execution header>p{grid-column:1}.exec-grid figure{height:75vw}.more a{grid-template-columns:40px 1fr}.more span{display:none}.contact footer{grid-template-columns:1fr 1fr}}
