.orbit-story{height:4180vh}
.portfolio{position:absolute;inset:0;z-index:4;visibility:hidden;opacity:0;pointer-events:none}
.portfolio.is-visible{visibility:visible;pointer-events:auto}
.monitor-plane{position:absolute;top:0;left:0;width:800px;height:600px;transform-origin:0 0;overflow:hidden;background:#10171b;border-radius:3px;box-shadow:0 0 25px #b5e8ff22;isolation:isolate}
.portfolio-welcome,.work-card{position:absolute;inset:0;background:#111a1d;color:#f5f4ed}
.portfolio-welcome{padding:54px;display:flex;flex-direction:column;justify-content:center}
.portfolio-kicker{font-size:14px;letter-spacing:.16em;color:#d8ff6e}
.portfolio-welcome h2{font-size:98px;line-height:.96;letter-spacing:-.06em;margin:35px 0 18px}
.portfolio-welcome em{font-style:normal;color:#d8ff6e}
.portfolio-welcome p{font-size:22px;color:#bac5c6}
.portfolio-welcome button{display:flex;justify-content:space-between;gap:40px;align-items:center;width:max-content;background:#d8ff6e;border:0;border-radius:40px;padding:18px 25px;font-size:20px;font-weight:800;color:#111811}
.portfolio-welcome small{font-size:15px;color:#8b999c;margin-top:22px}
.work-card{display:flex;flex-direction:column;will-change:transform,opacity}
.work-browser{height:46px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:14px;color:#a8b7bc;background:#10181b}
.work-browser>span:first-child{font-size:12px;letter-spacing:4px;color:#d8ff6e}
.work-card>img{width:100%;height:426px;object-fit:cover;object-position:top;background:#eee}
.work-caption{height:128px;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:15px;background:#111a1d}
.work-caption span{font-size:12px;letter-spacing:.15em;color:#aababc}
.work-caption h3{font-size:35px;letter-spacing:-.04em;margin:6px 0 0;line-height:1.1}
.work-caption a{border:1px solid #718744;border-radius:40px;color:#d8ff6e;padding:15px 20px;font-weight:700;font-size:18px;white-space:nowrap}
.portfolio button:focus-visible,.portfolio a:focus-visible{outline:3px solid #d8ff6e;outline-offset:5px}
.work-caption a:hover{background:#d8ff6e;color:#111811}
.portfolio-side{position:absolute;left:68%;right:4%;top:50%;transform:translateY(-50%);padding:24px;background:linear-gradient(90deg,#071014dd,#071014aa);border:1px solid #ffffff20;border-radius:16px}
.portfolio-side h2{font-size:clamp(25px,2.5vw,42px);letter-spacing:-.045em;line-height:1.15;margin:20px 0}
.portfolio-side>p:not(.section-label){font-size:14px;line-height:1.7;color:#bdc8c9}
.portfolio-nav{display:flex;gap:10px;margin:25px 0}
.portfolio-nav button{width:46px;height:44px;background:transparent;border:1px solid #ffffff55;color:white;border-radius:50%;font-size:13px}
.portfolio-nav button[aria-current="true"]{background:#d8ff6e;color:#101910;border-color:#d8ff6e}
.portfolio-continue{background:transparent;border:0;border-bottom:1px solid #d8ff6e;padding:10px 0;color:#d8ff6e;font-size:13px}
.is-tablet .portfolio-side{left:77%;right:2%;padding:18px}
.is-tablet .portfolio-side h2,.is-tablet .portfolio-side>p:not(.section-label){display:none}
.orbit-sticky.portfolio-active .orbit-time{opacity:.3}
.orbit-sticky.portfolio-active .orbit-instruction span{color:#d8ff6e}
@media(max-width:800px){
 .header-nav>a.works-link{display:block}.header-nav{gap:14px}
 .portfolio{background:#07101499}
 .monitor-plane{width:calc(100% - 32px);height:auto;aspect-ratio:4/3;left:16px;top:50%;transform:translateY(-42%)!important;border-radius:12px;box-shadow:0 24px 70px #0009}
 .portfolio-side{left:20px;right:20px;top:7%;transform:none;padding:0;background:none;border:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
 .is-tablet .portfolio-side{left:20px;right:20px;padding:0}
 .portfolio-side h2,.portfolio-side>p{display:none}
 .portfolio-nav{margin:0;gap:8px}
 .portfolio-nav button{width:38px;height:38px}
 .portfolio-continue{font-size:11px}
 .portfolio-welcome{padding:25px}
 .portfolio-kicker{font-size:9px}
 .portfolio-welcome h2{font-size:clamp(35px,11vw,70px);margin:17px 0 4px}
 .portfolio-welcome p{font-size:12px;margin:10px 0 16px}
 .portfolio-welcome button{font-size:12px;padding:12px 17px}
 .portfolio-welcome small{font-size:10px;margin-top:12px}
 .work-browser{height:30px;padding:0 10px;font-size:9px}
 .work-browser>span:first-child{font-size:7px;letter-spacing:1px}
 .work-card>img{height:calc(100% - 108px);object-fit:cover}
 .work-caption{height:78px;padding:12px;gap:8px}
 .work-caption span{font-size:8px}
 .work-caption h3{font-size:clamp(17px,4.7vw,25px);margin-top:5px}
 .work-caption a{font-size:10px;padding:11px}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 .portfolio{background:transparent}
 .portfolio .monitor-plane{width:800px;height:600px;aspect-ratio:auto;left:0;top:0;border-radius:3px;box-shadow:none;transform:var(--screen-projection)!important}
 .portfolio .work-browser{height:46px;padding:0 22px;font-size:18px}
 .portfolio .work-card>img{height:400px}
 .portfolio .work-caption{height:154px;padding:20px 25px;gap:12px}
 .portfolio .work-caption span{font-size:16px;letter-spacing:.06em}
 .portfolio .work-caption h3{font-size:38px;margin-top:8px}
 .portfolio .work-caption a{font-size:24px;padding:22px}
 .portfolio .portfolio-welcome{padding:48px}
 .portfolio .portfolio-welcome h2{font-size:90px}
 .portfolio .portfolio-welcome p,.portfolio .portfolio-welcome button{font-size:25px}
 .portfolio .portfolio-welcome small,.portfolio .portfolio-kicker{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
 .orbit-story{height:auto}.orbit-sticky{height:auto;overflow:visible;padding-top:100svh}
 #orbit-canvas{height:100svh}
 .portfolio{position:relative;visibility:visible;opacity:1!important;pointer-events:auto;background:#0c1014;padding:45px 20px}
 .portfolio-side{position:static;transform:none;display:block;padding:0;background:none;border:0}
 .portfolio-side h2,.portfolio-side>p{display:block}.portfolio-nav,.portfolio-continue,.portfolio-welcome{display:none}
 .monitor-plane{position:static;width:100%;height:auto;max-width:900px;margin:auto;transform:none!important;background:none;overflow:visible;aspect-ratio:auto;box-shadow:none}
 .work-card{position:relative;transform:none!important;opacity:1!important;margin:24px 0;aspect-ratio:4/3;overflow:hidden;border-radius:12px}
 .work-card>img{height:auto;min-height:0;flex:1;object-fit:cover}.work-caption{flex-shrink:0}
 .orbit-bottom,.orbit-progress{display:none}
}

/* Keep the supplied presentation artwork fully visible inside the tablet. */
.portfolio.is-tablet .work-card>img{object-fit:contain;object-position:center;background:#eeeae2}