/* Shared portfolio frame. Project identity belongs in the work, while navigation,
   type and page rhythm remain consistent from one destination to the next. */
@font-face{font-family:Inter;src:url('/assets/5a9db70e0fbc3067-s.p.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/d938fffb5d040305-s.p.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
:root{--site-ink:#232323;--site-muted:#737379;--site-line:#eaeaec;--site-font:Inter,Arial,sans-serif}
.portfolio-page{margin:0;background:#fff;color:var(--site-ink);font-family:var(--site-font);font-weight:500;font-synthesis:none;-webkit-font-smoothing:antialiased}
.portfolio-page *{box-sizing:border-box}
.portfolio-shell{position:relative;width:100%;max-width:856px;margin:0 auto;padding:0 24px;min-width:0}
.portfolio-page .site-header{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px;min-height:40px;margin:76px 0 64px;padding:0;border:0;z-index:40}
.portfolio-page .site-header .wordmark{position:static;display:inline-flex;align-items:center;min-height:40px;margin:0;color:var(--site-ink);font:600 23px/1.2 var(--site-font);letter-spacing:-1px;text-decoration:none;white-space:nowrap}
.portfolio-page .header-actions{position:static;display:flex;gap:8px;align-items:center;flex:none}
.portfolio-page .site-header .nav-pill{position:relative;inset:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border:1px solid #e7e7e9;border-radius:999px;background:#fff;color:#45454a;font:500 13px/20px var(--site-font);text-decoration:none;white-space:nowrap;cursor:pointer}
.portfolio-page .site-header .nav-pill svg{flex:none;display:block;color:#808087}
.portfolio-page .site-header .nav-pill:hover{background:#f7f7f8;border-color:#d9d9dc}
.portfolio-page :is(a,button,summary,[tabindex]):focus-visible{outline:2px solid #006aff;outline-offset:5px}
.portfolio-page .portfolio-footer{position:static;inset:auto;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:20px 30px;margin:80px 0 0;padding:28px 0 48px;border-top:1px solid var(--site-line);font:500 13px/1.8 var(--site-font);color:var(--site-muted)}
.portfolio-footer a{color:inherit;text-decoration:none}
.portfolio-footer a:hover{color:var(--site-ink);text-decoration:underline;text-underline-offset:4px}
.portfolio-footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.portfolio-page .home-footer{display:block;margin-top:96px;padding-bottom:100px}
.home-footer p{margin:0}
.portfolio-page .home-story{padding:0;margin-top:0}
.portfolio-page .home-intro{margin-bottom:64px}
.portfolio-page .page{overflow:visible;padding-bottom:0}
.portfolio-page .article-heading{padding-top:0}
.portfolio-page .article-heading h1{font-size:56px;line-height:1.12;letter-spacing:-2px}
.portfolio-page .article-deck{font-size:21px;line-height:1.6}
.portfolio-page .about-shell{display:block}
.portfolio-page .about-copy{font-size:19px}
.portfolio-page .featured-app-art{border-radius:12px}
.portfolio-page .featured-app-description{font-size:14px;line-height:1.65}
.portfolio-page .featured-app-action{font-size:13px}
.portfolio-page .featured-app-name p,.portfolio-page .featured-work-note{font-size:12px;color:var(--site-muted)}
.portfolio-page .featured-work-heading>a{font-size:13px}
.collection-note{max-width:640px;margin:0;font-size:13px;line-height:1.8;color:var(--site-muted)}
.portfolio-page .story-continuation{font-size:40px;line-height:1.6;letter-spacing:0}
.portfolio-page .mini-reel,.portfolio-page .mini-reel.active,.portfolio-page .mini-reel.active:hover{display:block;width:360px;max-width:100%;margin:28px 0 0;transform:none;opacity:1}
.portfolio-page .mini-reel .reel-frame{display:block}
/* Reserve decorative space before animation so scrolling cannot reflow the story. */
.portfolio-page .creative-stack,.portfolio-page .creative-stack.active{width:132px;transition:none}
.portfolio-page .icon-product,.portfolio-page .icon-product.active{width:100px;transition:none}
.portfolio-page .word{opacity:1}
.portfolio-page .story-continuation .spacer{height:48px}
.portfolio-page .art-3d canvas{max-width:260px;max-height:321px}
.portfolio-page .skip-link{position:absolute;top:-100px;left:24px;z-index:999;background:#fff;color:var(--site-ink);padding:12px;transform:none}
.portfolio-page .skip-link:focus{top:12px}
@media(min-width:1024px){
  .portfolio-page .creative-stack,.portfolio-page .creative-stack.active{width:172px}
}
@media(max-width:700px){
  .portfolio-page .site-header{margin-top:32px;margin-bottom:56px}
  .portfolio-page .article-heading h1{font-size:38px;line-height:1.16;letter-spacing:-1.3px}
  .portfolio-page .article-deck{font-size:19px}
  .portfolio-page .story-continuation{font-size:30px;letter-spacing:0}
  .portfolio-page .art-3d canvas{display:none}
  .portfolio-page .art-3d.loaded .art-label{opacity:1;color:inherit}
  .portfolio-page .icon-calendar{width:100px}
  .portfolio-page .icon-calendar canvas{width:140px;height:120px;transform:translate(-50%,-50%)}
  .portfolio-page .portfolio-footer{margin-top:56px;padding-bottom:36px}
  .portfolio-page .home-footer{margin-top:64px;padding-bottom:100px}
  .portfolio-page .featured-apps{grid-template-columns:1fr;gap:32px}
  .portfolio-page .featured-app:not(:first-child) .featured-app-name>img{width:36px;height:36px;border-radius:9px}
  .portfolio-page .featured-app:not(:first-child) .featured-app-name h3{font-size:17px}
  .portfolio-page .featured-app:not(:first-child) .featured-app-name p{font-size:12px}
  .portfolio-page .featured-app-description{margin-block:10px}
  .portfolio-page .featured-work{margin-bottom:64px}
}
@media(max-width:380px){
  .portfolio-shell{padding-inline:20px}
  .portfolio-page .site-header{gap:12px}
  .portfolio-page .site-header .wordmark{font-size:21px}
  .portfolio-page .header-actions{gap:6px}
  .portfolio-page .site-header .nav-pill{padding-inline:11px;font-size:12px;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .portfolio-page .creative-stack,.portfolio-page .inline-icon{display:none}
}