*{box-sizing:border-box}html{background:#070707;color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}html[data-mode=design]{background:#fff;color:#070707}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #776bff;outline-offset:5px}a{color:inherit}.header{position:absolute;inset:0 0 auto;z-index:10;height:112px;padding:24px}.logo{display:flex;justify-content:space-between;width:40px;height:24px;padding:0 8px;align-items:center;border:1px solid currentColor;border-radius:12px;text-decoration:none;font-weight:700;font-size:16px}.intro{font-size:12px;line-height:16px;position:absolute;left:24px;top:72px;margin:0}.avatar{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center}.navigation{position:absolute;right:24px;top:24px;display:flex;gap:8px}.navigation button{height:24px;background:transparent;border:1px solid currentColor;border-radius:14px;padding:1px 8px;font-size:14px;line-height:20px}.navigation .mode-switch{display:flex;gap:5px;align-items:center;border-color:#0d00ff;color:#837cff;font-weight:500}html[data-mode=design] .mode-switch{color:#0d00ff}.menu-toggle{font-weight:700}.menu{position:absolute;right:24px;top:60px;width:240px;background:#181818;padding:12px;border:1px solid #444;border-radius:16px;box-shadow:0 12px 40px #0003}html[data-mode=design] .menu{background:white;border-color:#ddd}.menu button{display:flex;justify-content:space-between;width:100%;border:0;background:none;text-align:left;padding:14px 8px;border-radius:8px}.menu button:hover{background:#8882}.screen{min-height:100svh;overflow:hidden}.composition{position:relative;width:100%;height:max(100svh,71.111111vw)}.portrait,.project{position:absolute;display:block;object-fit:cover;border-radius:1.666667vw}.portrait{width:27.5%;height:auto;aspect-ratio:2/3;transform-origin:top left}.right{left:68.0374%;top:11.388889vw;transform:rotate(15deg)}.center{left:36.25%;top:7.777778vw}.left{left:5.416667%;top:18.5064vw;transform:rotate(-15deg)}h1{font-weight:400;margin:0;letter-spacing:-.05em;line-height:.9}.portrait-title{position:absolute;left:1.666667%;top:44.513889vw;width:96.666667%;text-align:center;font-size:25.833333vw}.project-title{position:absolute;left:1.666667%;top:52.777778vw;font-size:8.333333vw}.project{top:11.180556vw;height:auto;aspect-ratio:566/815}.large{left:59.027778%;width:39.305556%}.small{left:1.666667%;width:22.916667%}html[data-mode=photo] .design-screen,html[data-mode=photo] .design-copy,html[data-mode=design] .photo-screen,html[data-mode=design] .photo-copy{display:none}
@media(min-width:1600px){.header{padding:1.666667vw}.logo{margin:0}.intro{left:1.666667vw;top:5vw}.avatar{top:1.666667vw}.navigation{right:1.666667vw;top:1.666667vw}}
@media(max-width:700px){.header{padding:20px;height:150px}.intro{left:20px;top:62px;font-size:10px;line-height:14px}.avatar{width:44px;height:44px;top:104px}.navigation{right:20px;top:20px}.navigation button{font-size:12px}.menu{right:20px;top:56px}.composition{height:max(100svh,170vw);min-height:600px}.portrait{width:42%;border-radius:14px}.center{left:29%;top:43vw}.left{left:1%;top:60vw;transform:rotate(-15deg)}.right{left:58.5%;top:49vw;transform:rotate(15deg)}.portrait-title{top:115vw;font-size:25.8vw;left:1.5%;width:97%}.project{border-radius:14px;top:46vw}.small{left:5%;width:27%}.large{left:40%;width:55%}.project-title{left:5%;top:132vw;font-size:13vw}}
@media(prefers-reduced-motion:no-preference){.screen{animation:appear .4s ease both}@keyframes appear{from{opacity:0}to{opacity:1}}button{transition:background .2s}button:hover{background:#8882}}

/* Each card is its own rounded clipping surface. The source photos contain
   white export margins, so their edges sit outside this surface. */
.portrait{overflow:hidden;isolation:isolate;border:0;background:#252724}
.portrait img{display:block;position:absolute;width:106%;height:106%;max-width:none;left:-3%;top:-3%;object-fit:cover}
.portrait.left{--card-angle:-15deg;--deal-delay:180ms}
.portrait.center{--card-angle:0deg;--deal-delay:0ms}
.portrait.right{--card-angle:15deg;--deal-delay:360ms}
@media(prefers-reduced-motion:no-preference){
.photo-screen{animation:none}
html[data-mode=photo] .category-slide.is-active .portrait{animation:deal-card 1250ms cubic-bezier(.16,1,.3,1) var(--deal-delay) both}
@keyframes deal-card{
 from{transform:translate3d(0,115vh,0) rotate(0deg)}
 to{transform:translate3d(0,0,0) rotate(var(--card-angle))}
}
}

/* Native scroll snap supports wheel, trackpad, touch and keyboard. */
html[data-mode=photo] body{overflow:hidden}
.photo-screen{height:100svh;min-height:0;display:flex;overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.photo-screen::-webkit-scrollbar{display:none}
.category-slide{flex:0 0 100%;min-width:0;height:100svh;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.category-slide .composition{container-type:inline-size;width:min(100%,140.625svh);height:auto;min-height:0;aspect-ratio:1440/1024;flex-shrink:0}
.category-slide .right{top:11.388889cqw}
.category-slide .center{top:7.777778cqw}
.category-slide .left{top:18.5064cqw}
.category-slide .portrait{border-radius:1.666667cqw}
.category-slide .portrait-title{top:44.513889cqw;font-size:25.833333cqw}
.category-nav{position:fixed;z-index:9;bottom:16px;left:24px;right:24px;display:flex;gap:18px;align-items:center;font-size:12px}
.category-nav button{border:0;background:transparent;padding:8px 0;color:#888}
.category-nav button[aria-current=true]{color:#fff}
.category-nav button span{margin-left:5px}.scroll-hint{margin-left:auto;color:#888}
.placeholder{background:#24231f}.placeholder.center{background:#34322c;display:grid;place-items:center}.placeholder.right{background:#1d201e}
.placeholder span{font-size:clamp(12px,1.25cqw,20px);text-align:center;line-height:1.5;color:#aaa79e;padding:24px}
@media(max-width:700px){
.category-slide .composition{width:min(100%,58.82svh);aspect-ratio:100/170}
.category-slide .center{top:43cqw}.category-slide .left{top:60cqw}.category-slide .right{top:49cqw}
.category-slide .portrait-title{top:115cqw;font-size:25.8cqw}
.category-slide .portrait{border-radius:3.3cqw}
.category-nav{left:20px;right:20px;bottom:12px;font-size:11px}
}

/* Hover uses independent transform properties, preserving the dealing angle. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.portrait{transition:translate 350ms cubic-bezier(.2,.8,.2,1),scale 350ms cubic-bezier(.2,.8,.2,1),filter 350ms ease}
.portrait:hover{translate:0 -8px;scale:1.012;filter:brightness(1.035)}
}
.portrait-title a{color:inherit;text-decoration:none}.portrait[href]{color:inherit;text-decoration:none;cursor:pointer}