/* The project is drawn by the browser: real type, colors and client photographs. */
.case-presentation{position:relative;width:100%;height:100%;aspect-ratio:1440/1000;overflow:hidden;background:#f1efe9;color:#3c2b21;container-type:inline-size;font-family:Georgia,serif;touch-action:pan-y;isolation:isolate}
.ps-scene{position:absolute;inset:0;padding:6%;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;pointer-events:none;background:#f1efe9}
.ps-scene.is-active{opacity:1;visibility:visible;z-index:1}
.ps-corner,.ps-bottom{position:absolute;left:6%;font:400 2.1cqw/1.4 Georgia,serif;letter-spacing:0}
.ps-corner{top:6%}.ps-bottom{bottom:7%;max-width:73%}
.ps-layer{position:absolute;inset:20% 6% 18%;display:flex;flex-direction:column;justify-content:center}
.ps-brand-name{font:400 9.2cqw/1.05 Georgia,serif;display:block;inset:36% 6% auto;letter-spacing:-.035em;white-space:nowrap}
.ps-brand-name em{font-weight:400}.ps-brand-name small{display:block;font-size:2.5cqw;letter-spacing:0;margin-top:4%}
.ps-colors{inset:24% 6% 21%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5%}
.ps-colors>div{display:flex;flex-direction:column;justify-content:end;padding:8%;background:var(--swatch);border:1px solid #3c2b2120;color:#f1efe9;font:400 2.4cqw/1.4 Georgia,serif}
.ps-colors>div:first-child{color:#3c2b21}.ps-colors>div:nth-child(3){color:#29251f}.ps-colors b{font-weight:400;margin-top:7%}
.ps-type .ps-layer{inset:22% 6% 19%;gap:5%}.ps-type strong{font:400 9.5cqw/.95 Georgia,serif}.ps-type em{font:italic 400 6.5cqw/1.1 Georgia,serif}.ps-type p{font:400 3.3cqw/1.5 Georgia,serif;margin:3% 0 0}
.ps-screen-pair{inset:22% 6% 18%;display:grid;grid-template-columns:minmax(0,1fr) 23%;gap:6%;align-items:center;perspective:1000px}
.ps-screen-pair img{display:block;width:100%;height:auto}.ps-screen-desktop{border:1px solid #c4b9aa;background:#f1efe9;transform:rotateY(5deg)}.ps-screen-phone{border:3px solid #29251f;border-radius:3cqw;overflow:hidden;transform:rotateY(-7deg)}
.ps-photography{background:#3c2b21;color:#f1efe9}.ps-photo-pair{inset:16% 6% 18%;display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:stretch}
.ps-photo-pair figure{position:relative;margin:0;min-height:0;overflow:hidden}.ps-photo-pair img{display:block;width:100%;height:89%;object-fit:contain}.ps-photo-pair figcaption{font:400 2.8cqw/1.2 Georgia,serif;text-align:center;padding-top:3%}
.ps-counter{position:absolute;z-index:3;right:6%;bottom:7%;font:400 2.1cqw/1.4 Georgia,serif;pointer-events:none}
.case-presentation[data-scene="4"] .ps-counter{color:#f1efe9}
.ps-progress{position:absolute;z-index:3;inset:auto 6% 4%;height:1px;background:#b9926240;pointer-events:none}.ps-progress i{display:block;width:100%;height:100%;background:#b99262;transform:scaleX(0);transform-origin:left}
.ps-progress i{animation:ps-progress 5.5s linear both;animation-play-state:paused}.case-presentation.is-running .ps-progress i{animation-play-state:running}.ps-scene.is-active .ps-layer{animation:ps-enter 1s cubic-bezier(.16,1,.3,1) both}
@keyframes ps-progress{to{transform:scaleX(1)}}@keyframes ps-enter{from{opacity:.25;transform:translateY(5%) scale(.97)}to{opacity:1;transform:none}}
.presentation-toggle{position:absolute;z-index:5;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #3c2b2155;border-radius:50%;background:#f1efe9e6;color:#3c2b21;padding:0;opacity:0;transition:opacity .2s;touch-action:manipulation}
.presentation-toggle svg{width:14px;height:14px;fill:currentColor}.presentation-toggle[data-state=paused] .motion-pause,.presentation-toggle[data-state=playing] .motion-play{display:none}
.project-motion:hover>.presentation-toggle,.project-motion:focus-within>.presentation-toggle,.work-entry:hover>.presentation-toggle{opacity:1}
.case-cover>.presentation-toggle{top:auto;bottom:24px;right:4%;opacity:1}
.case-cover .ps-counter{right:calc(4% + 60px)}
.project-case .case-cover .case-presentation{height:100%;min-height:0}
.native-walkthrough{position:relative;overflow:hidden;background:#f1efe9;--screen-height:400px;touch-action:pan-y}
.native-walkthrough img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:auto;object-fit:fill;transform:translateY(0)}
.native-walkthrough img{animation:walkthrough-scroll 28s ease-in-out infinite alternate;animation-play-state:paused}.native-walkthrough.is-running img{animation-play-state:running}
.native-walkthrough.is-paused img{animation-play-state:paused}
.native-walkthrough .presentation-toggle{opacity:1;top:12px;right:12px}
@keyframes walkthrough-scroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + var(--screen-height)))}}
.project-case-path{padding:8%;display:flex;flex-direction:column;gap:20px;color:#3c2b21;font:400 clamp(16px,2vw,26px)/1.4 Georgia,serif}
.project-case-path>strong{font-weight:400;border-bottom:1px solid #b99262;padding-bottom:20px}.project-case-path>div{display:flex;gap:20px;flex-wrap:wrap;padding:0 0 0 8%;border-left:1px solid #b99262}.project-case-path span{padding:8px 0}
@media(hover:none){.presentation-toggle{opacity:1}}
@media(prefers-reduced-motion:reduce){.ps-scene{transition:none}.case-presentation.is-running .ps-progress i,.case-presentation.is-running .ps-layer,.native-walkthrough.is-running img{animation:none}.ps-screen-desktop,.ps-screen-phone{transform:none}}