@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Inter:wght@300;400;500;600&display=swap');
:root{--yz-ink:#0b0b0b;--yz-paper:#f2f1ed;--yz-acid:#d7ff3f;--yz-line:rgba(11,11,11,.18)}
html{scroll-behavior:smooth}body.yz-portfolio{margin:0;background:var(--yz-paper);color:var(--yz-ink);font-family:Inter,Arial,sans-serif}body.yz-portfolio.admin-bar .yz-header{top:32px}
.yz-site *{box-sizing:border-box}.yz-site a{color:inherit;text-decoration:none}.yz-site img{display:block;max-width:100%}.yz-mono,.yz-eyebrow{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:12px}.yz-eyebrow{margin:0}
.yz-header{position:fixed;z-index:1000;top:0;left:0;right:0;height:72px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;color:#fff;mix-blend-mode:difference}.yz-mark{font-size:20px;font-weight:600;letter-spacing:-.06em}.yz-nav{display:flex;gap:32px;align-items:center;font-family:'DM Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.yz-nav a{transition:opacity .25s}.yz-nav a:hover{opacity:.55}
.yz-hero{position:relative;min-height:100svh;overflow:hidden;background:#111;color:#fff}.yz-hero-image{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;transform:translate(var(--mx,0),var(--my,0)) scale(1.03);transition:transform .7s cubic-bezier(.2,.7,.2,1);animation:yzHero 1.5s cubic-bezier(.2,.65,.2,1) both}.yz-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.04) 45%,rgba(0,0,0,.7))}.yz-hero-copy{position:absolute;z-index:2;left:3vw;right:3vw;bottom:7vh}.yz-hero h1{margin:.5rem 0 1rem;font-size:clamp(88px,16vw,240px);line-height:.78;letter-spacing:-.08em;font-weight:500}.yz-hero-meta{display:flex;justify-content:space-between;gap:2rem;border-top:1px solid rgba(255,255,255,.65);padding-top:.9rem;font-size:clamp(13px,1.1vw,16px)}.yz-hero-meta p{margin:0}.yz-scroll{position:absolute;z-index:3;right:3vw;bottom:18px;margin:0;font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase}.yz-scroll span{color:var(--yz-acid)}
.yz-intro{min-height:60vh;padding:16vh 3vw 12vh;display:grid;grid-template-columns:1fr 3fr;border-bottom:1px solid var(--yz-line)}.yz-intro h2{max-width:1100px;margin:-.15em 0 0;font-size:clamp(44px,6vw,106px);line-height:.97;font-weight:400;letter-spacing:-.055em}
.yz-project{position:sticky;top:var(--stack,0);display:block;min-height:92svh;margin:0 3vw 5vh;overflow:hidden;background:#151515;color:#fff}.yz-project>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.yz-project.yz-contain>img{object-fit:contain;background:#c8c8c6}.yz-project:hover>img{transform:scale(1.035)}.yz-project-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.46),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.58),transparent 50%)}.yz-number{position:absolute;top:32px;left:32px}.yz-project-title{position:absolute;left:32px;bottom:32px}.yz-project-title h3{margin:0 0 16px;font-size:clamp(48px,7vw,118px);line-height:.84;letter-spacing:-.065em;font-weight:400}.yz-project-title p{margin:0}.yz-arrow{position:absolute;right:32px;bottom:32px;width:56px;height:56px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;font-size:22px}
.yz-index,.yz-case-overview,.yz-reality,.yz-detail{padding:15vh 3vw}.yz-section-head{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--yz-line)}.yz-index-row{min-height:108px;display:grid;grid-template-columns:80px minmax(280px,2fr) 1fr 80px;align-items:center;border-top:1px solid var(--yz-line);transition:.25s}.yz-index-row:hover{background:var(--yz-acid);padding:0 16px}.yz-index-row strong{font-size:clamp(24px,2.7vw,48px);font-weight:400;letter-spacing:-.04em}
.yz-about{min-height:100svh;padding:14vh 3vw 5vh;display:grid;grid-template-columns:1fr 3fr;grid-template-rows:1fr auto;background:var(--yz-ink);color:#fff}.yz-about-copy{font-size:clamp(38px,5vw,90px);line-height:.98;letter-spacing:-.055em}.yz-about-copy p{margin:0 0 .8em}.yz-muted{color:#777}.yz-disciplines{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #444}.yz-disciplines span{padding:16px 0;border-right:1px solid #444}.yz-disciplines span:not(:first-child){padding-left:16px}
.yz-footer{min-height:85svh;padding:12vh 3vw 28px;display:flex;flex-direction:column;background:var(--yz-acid)}.yz-footer h2{margin:auto 0;font-size:clamp(56px,9vw,160px);line-height:.82;letter-spacing:-.075em;font-weight:400}.yz-footer-line{display:grid;grid-template-columns:1fr 2fr 1fr;border-top:1px solid rgba(0,0,0,.45);padding-top:16px}.yz-footer-line span:last-child{text-align:right}
.yz-case-hero{position:relative;min-height:100svh;overflow:hidden;background:#bfc0bd;color:#fff}.yz-case-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.yz-case-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 45%,rgba(0,0,0,.62))}.yz-case-hero-copy{position:absolute;z-index:2;left:3vw;right:3vw;bottom:3vw}.yz-case-hero h1{margin:.5rem 0 2rem;font-size:clamp(78px,12vw,190px);line-height:.76;letter-spacing:-.08em;font-weight:400}.yz-case-meta{display:grid;grid-template-columns:repeat(3,1fr);padding-top:14px;border-top:1px solid rgba(255,255,255,.7)}.yz-case-meta span:last-child{text-align:right}
.yz-case-overview{min-height:88svh;display:grid;grid-template-columns:1fr 2.4fr;gap:8vw}.yz-facts div{display:grid;grid-template-columns:100px 1fr;padding:16px 0;border-top:1px solid var(--yz-line)}.yz-facts strong{font-size:15px;font-weight:500}.yz-case-lead{font-size:clamp(42px,5.6vw,104px);line-height:.98;letter-spacing:-.058em}.yz-case-lead p{margin:0 0 .65em}.yz-case-lead .yz-small{color:#999;font-size:.48em;line-height:1.2}.yz-award{min-height:105px;padding:0 3vw;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:2rem;background:var(--yz-acid)}.yz-award strong{font-size:clamp(18px,2.2vw,38px);font-weight:500}.yz-award span:last-child{text-align:right}
.yz-concept{padding:15vh 3vw;display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:7vw}.yz-concept-copy{position:sticky;top:12vh;height:max-content}.yz-concept-copy h2{margin:48px 0;font-size:clamp(76px,9vw,160px);line-height:.76;letter-spacing:-.08em;font-weight:500}.yz-concept-copy>p:last-child{max-width:390px;font-size:18px;line-height:1.45}.yz-concept-images{display:grid;gap:18vh}.yz-concept-images figure:nth-child(2){width:80%;margin-left:auto}.yz-concept-images img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#c5c6c3}.yz-site figure{margin:0}.yz-site figcaption{margin-top:10px;font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase}
.yz-gallery{padding:12vh 0 10vh;background:var(--yz-ink);color:#fff;overflow:hidden}.yz-gallery .yz-section-head{margin:0 3vw 48px;border-color:#444}.yz-gallery-track{display:flex;gap:2vw;overflow-x:auto;padding:0 3vw 32px;scroll-snap-type:x mandatory}.yz-gallery-track figure{flex:0 0 min(78vw,1180px);scroll-snap-align:start}.yz-gallery-track img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#bfc0bd}.yz-reality-grid{display:grid;grid-template-columns:1fr 1fr;gap:2vw;margin-top:64px}.yz-image-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#bbb}.yz-image-frame img{width:100%;height:100%;object-fit:cover}.yz-image-frame span{position:absolute;top:16px;left:16px;padding:7px 11px;background:var(--yz-acid)}.yz-detail{background:#dfdfdc}.yz-detail-grid{margin-top:14vh;display:grid;grid-template-columns:repeat(3,1fr);gap:4vw}.yz-detail-grid>div{border-top:1px solid var(--yz-line);padding-top:16px}.yz-detail-grid h3{margin:80px 0 16px;font-size:clamp(32px,3vw,56px);font-weight:400;letter-spacing:-.05em}.yz-detail-grid p{line-height:1.5}.yz-next{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;color:#fff}.yz-next>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}.yz-next:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4)}.yz-next:hover>img{transform:scale(1.035)}.yz-next>div{position:relative;z-index:2;text-align:center}.yz-next h2{margin:32px 0;font-size:clamp(64px,10vw,160px);line-height:.82;letter-spacing:-.075em;font-weight:400}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}[data-reveal].is-visible{opacity:1;transform:none}@keyframes yzHero{from{opacity:0;filter:blur(10px);transform:scale(1.08)}to{opacity:1;filter:blur(0)}}
@media(max-width:720px){body.yz-portfolio.admin-bar .yz-header{top:46px}.yz-header{padding:0 20px}.yz-nav a:not(:first-child),.yz-nav span{display:none}.yz-hero-copy{left:20px;right:20px;bottom:80px}.yz-hero h1{font-size:clamp(72px,25vw,128px)}.yz-hero-meta{display:grid;gap:6px}.yz-scroll{right:20px}.yz-intro{padding:110px 20px;grid-template-columns:1fr;gap:48px}.yz-project{position:sticky;top:0;margin:0 20px 20px;min-height:78svh}.yz-project-title,.yz-number{left:20px}.yz-project-title,.yz-arrow{bottom:20px}.yz-index,.yz-case-overview,.yz-reality,.yz-detail{padding:100px 20px}.yz-index-row{grid-template-columns:38px 1fr auto;min-height:86px}.yz-index-row span:nth-child(3){display:none}.yz-about{padding:100px 20px 24px;grid-template-columns:1fr;gap:48px}.yz-disciplines{grid-template-columns:1fr 1fr}.yz-footer{padding:96px 20px 24px}.yz-footer-line{grid-template-columns:1fr;gap:10px}.yz-footer-line span:last-child{text-align:left}.yz-case-hero-copy{left:20px;right:20px;bottom:32px}.yz-case-hero h1{font-size:clamp(66px,21vw,112px)}.yz-case-meta{grid-template-columns:1fr;gap:6px}.yz-case-meta span:last-child{text-align:left}.yz-case-overview{grid-template-columns:1fr;gap:70px}.yz-award{padding:24px 20px;grid-template-columns:1fr;gap:8px}.yz-award span:last-child{text-align:left}.yz-concept{padding:100px 20px;grid-template-columns:1fr}.yz-concept-copy{position:relative;top:0}.yz-concept-images{gap:48px}.yz-concept-images figure:nth-child(2){width:100%}.yz-gallery .yz-section-head{margin:0 20px 32px}.yz-gallery-track{padding-left:20px;gap:16px}.yz-gallery-track figure{flex-basis:88vw}.yz-reality-grid,.yz-detail-grid{grid-template-columns:1fr;gap:48px}.yz-detail-grid{margin-top:70px}.yz-detail-grid h3{margin-top:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}