.art{min-height:550px;align-self:center;perspective:1200px}.art .orbit{top:20%;opacity:.5}.coordinates{top:0;right:0}.computer{position:absolute;left:0;top:15%;width:96%;transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}.computer-bezel{padding:10px 10px 0;background:linear-gradient(130deg,#4e4545,#181416 70%);border:1px solid #766766;border-radius:18px 18px 0 0;box-shadow:0 28px 55px #40211c24}.screen{position:relative;background:#f9f5ee;aspect-ratio:1.48;overflow:visible;border-radius:9px 9px 0 0;isolation:isolate}.screen::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--screen-x,50%) var(--screen-y,40%),#fff6,transparent 55%);z-index:3;mix-blend-mode:soft-light}.screen-browser{height:22px;background:#e9e2d9;display:flex;gap:4px;align-items:center;padding:0 10px;border-radius:8px 8px 0 0;font-size:7px;color:#8c7f77}.screen-browser i{width:4px;height:4px;border-radius:50%;background:#bbaea4}.screen-browser span{margin:auto}.screen-nav{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;font-size:7px;gap:10px;border-bottom:1px solid #e5dcd2}.screen-nav b{font-size:12px;letter-spacing:-.4px}.screen-title{position:absolute;left:7%;top:25%;font-size:clamp(14px,1.7vw,25px);line-height:1.15;letter-spacing:-.5px;z-index:2;pointer-events:none}.screen-title em{font-family:'Instrument Serif',Georgia,serif;color:#8f0a0a;font-weight:400}.art .stage{inset:26% 0 5%;z-index:1;transform:none}.art .mountain{transform:rotateX(var(--rx)) rotateY(var(--ry));width:100%;filter:drop-shadow(0 12px 5px #590a0a18)}.art .shadow{top:76%;height:5%;opacity:.4}.screen-bottom{position:absolute;bottom:12px;left:7%;right:7%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:7px;z-index:2;pointer-events:none}.screen-pill{padding:7px;background:#8f0a0a;color:#fff4e8;border-radius:2px}.computer-chin{height:24px;background:linear-gradient(100deg,#cbbab2,#f1e7de 45%,#ad9991);border-radius:0 0 14px 14px;border:1px solid #c2b0a6;border-top:0}.computer-stand{height:53px;width:21%;margin:auto;background:linear-gradient(90deg,#b7a49c,#e1d3c8,#b6a097);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}.computer-foot{height:8px;background:linear-gradient(#e0d2c7,#ad9990);width:40%;margin:auto;border-radius:50% 50% 3px 3px;box-shadow:0 12px 18px #4c2a2422}.phone-device{position:absolute;z-index:4;width:29%;max-width:165px;right:-1%;top:43%;aspect-ratio:.49;background:#292124;padding:7px;border-radius:25px;box-shadow:12px 22px 35px #3c211c32,inset 0 0 0 1px #9c8681;transform:rotate(9deg) translateY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform}.phone-notch{position:absolute;top:12px;left:34%;width:32%;height:9px;background:#231b1d;border-radius:12px;z-index:2}.phone-screen{height:100%;border-radius:19px;background:#f7f2ea;padding:30px 13px 15px;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}.phone-content>b{font-size:14px;letter-spacing:-.5px;line-height:1}.phone-content>b small{font-size:6px;letter-spacing:3px}.phone-screen p{font-size:18px;font-weight:500;line-height:1.1;margin:17px 0 8px;letter-spacing:-.8px}.phone-screen em{font-family:'Instrument Serif',Georgia,serif;color:#8f0a0a;font-size:23px;font-weight:400}.phone-screen img{width:100%;height:auto;mix-blend-mode:multiply;margin:15px 0 24px}.phone-cta{font-size:6px;background:#8f0a0a;color:#fff7ed;padding:9px 6px;width:100%;text-align:center}.phone-lines{width:85%;height:12px;border-top:2px solid #ddd0c6;border-bottom:2px solid #ddd0c6;margin-top:15px}.phone-content>small{font-size:4px;letter-spacing:.6px;margin-top:auto}.phone-home{position:absolute;bottom:11px;left:36%;width:28%;height:3px;background:#483237;border-radius:4px}.art .art-caption{bottom:-2%;left:5%;right:5%}.hero::before{display:none}.ambient-field{position:fixed;inset:0;z-index:20;pointer-events:none;background:radial-gradient(ellipse 330px 280px at var(--gx,-1000px) var(--gy,-1000px),#b329201f,transparent 75%);opacity:var(--ambient-strength,0);transition:opacity .25s;mix-blend-mode:multiply}.work,.contact{position:relative;isolation:isolate}.work::before,.contact::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 70%,#aa20100c,transparent 50%),radial-gradient(ellipse at 95% 15%,#b37e4110,transparent 45%)}.device-cursor{position:fixed;top:0;left:0;width:42px;height:42px;border:1px solid #8f0a0a99;border-radius:50%;pointer-events:none;z-index:100;opacity:0;transform:translate(-100px,-100px);background:#f7f2ea18;box-shadow:0 0 22px #8f0a0a15;transition:opacity .2s,width .3s,height .3s,border-color .3s;display:grid;place-items:center}.device-cursor span{width:4px;height:4px;background:#8f0a0a;border-radius:50%}.device-cursor.on-phone{width:54px;height:54px;border-style:dashed;background:#fff4e820}.cursor-active .computer,.cursor-active .phone-device,.cursor-active .computer *,.cursor-active .phone-device *{cursor:none}.ambient-off .ambient-field,.ambient-off .work::before,.ambient-off .contact::before{display:none}.reduced .computer,.reduced .phone-device{transition:none!important}.reduced .device-cursor,.paused .device-cursor{display:none}.paused .ambient-field{opacity:0!important}
@media(max-width:1000px) and (min-width:761px){.art{min-height:470px}.phone-screen{padding:26px 9px 10px}.phone-screen p{font-size:14px}.phone-screen em{font-size:18px}.phone-screen img{margin:8px 0 12px}.phone-content>small{display:none}}
@media(max-width:760px){.art{min-height:380px;height:380px;margin-top:35px;width:100%}.computer{top:8%;width:94%;left:0;transform:rotateY(-5deg)}.computer-bezel{padding:6px 6px 0;border-radius:12px 12px 0 0}.screen-nav{padding:9px 12px}.screen-nav b{font-size:9px}.screen-nav>span{font-size:5px}.screen-browser{height:16px}.screen-title{font-size:17px;top:25%}.screen-bottom{font-size:5px;bottom:8px}.screen-pill{padding:5px}.computer-chin{height:17px}.computer-stand{height:37px}.phone-device{top:40%;width:28%;border-radius:19px;padding:5px}.phone-notch{top:9px;height:6px}.phone-screen{padding:22px 9px 12px;border-radius:14px}.phone-content>b{font-size:10px}.phone-content>b small{font-size:4px}.phone-screen p{font-size:13px;margin:12px 0 3px}.phone-screen em{font-size:17px}.phone-screen img{margin:12px 0}.phone-cta{font-size:4px;padding:6px 3px}.phone-lines{height:7px;margin-top:10px}.phone-content>small{font-size:3px}.art .art-caption{bottom:1%}.coordinates{top:0;font-size:7px}.device-cursor{display:none!important}}
@media(pointer:coarse){.device-cursor{display:none!important}.cursor-active .computer,.cursor-active .phone-device,.cursor-active .computer *,.cursor-active .phone-device *{cursor:auto}}

/* Reserve the device group's full height before the caption. */
.hero{
  height:auto;
  min-height:0;
  max-height:none;
  padding-top:clamp(32px,4vw,64px);
  padding-bottom:24px;
  row-gap:36px;
}
.hero-footer{
  position:relative;
  grid-column:1 / -1;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
  margin:0;
}
@media (min-width:761px){
  .hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:clamp(24px,4vw,80px)}
}
.art{display:grid;grid-template-rows:auto auto;gap:44px;min-height:0;height:auto;width:100%;padding-top:40px}
.computer{position:relative;left:auto;top:auto;width:94%}
.phone-device{top:32%}
.art .art-caption{position:relative;bottom:auto;left:auto;right:auto;margin:0 5%;min-height:34px}
.screen-bottom{justify-content:flex-end}
.project .project-visual{aspect-ratio:auto;min-height:0;padding:24px;gap:22px}
.project .project-number{position:static}
.project-screenshot{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 12px 30px #0002}
.project .project-arrow{position:static;align-self:flex-end;font-size:22px;line-height:1}
@media (max-width:760px){
  .project .project-visual{padding:18px;gap:16px}
  .hero{gap:32px}
  .art{height:auto;min-height:0;padding-top:24px;gap:32px}
  .computer{top:auto;left:auto}
  .phone-device{top:32%}
  .art .art-caption{bottom:auto}
}

.phone-content{display:flex;flex-direction:column;align-items:flex-start;width:100%;flex-shrink:0}
.phone-content>small{margin-top:16px}
.phone-more{width:100%;padding:24px 0 10px;font-size:7px;line-height:1.5}
.phone-more strong{display:block;font-size:15px;font-weight:500;line-height:1.15;margin-bottom:14px;letter-spacing:-.5px}
.phone-more>span{display:block;border-top:1px solid #ded5ca;padding:9px 0;width:100%}

/* Small shared offset, independent of the hover and arrival transforms. */
.computer,.phone-device{translate:-12px 0}
@media(max-width:760px){.computer,.phone-device{translate:-6px 0}}

/* Keep the device visible while its animated content waits for the viewport. */
.art.intro-waiting .geometry,.art.intro-waiting .ridge,.art.intro-waiting .phone-device{visibility:hidden}
.reduced .art.intro-waiting .geometry,.reduced .art.intro-waiting .ridge,.reduced .art.intro-waiting .phone-device{visibility:visible}
@media(max-width:760px){
  .art{grid-template-rows:auto;gap:0}
  .computer{max-width:100%}
  .hero-copy .detail{max-width:36ch}
}