/* A quiet introduction beside a moving project feed. */
.studio-page{padding-bottom:0;background:var(--bg)}
.studio-page ::selection{background:var(--accent);color:#fff}
.studio-page ::-moz-selection{background:var(--accent);color:#fff}
.studio-transition{position:fixed;inset:0;z-index:120;pointer-events:none;background:var(--bg);opacity:0;transition:opacity 320ms var(--ease)}
.studio-page.studio-is-leaving .studio-transition{opacity:1}
.studio-motion-ready .studio-contact-nav{animation:studio-intro-in 620ms var(--ease) both}
.studio-motion-ready .studio-intro{animation:studio-intro-in 760ms var(--ease) 80ms both}
.studio-layout{display:grid;grid-template-columns:minmax(310px,.85fr) minmax(0,1.15fr);gap:clamp(48px,7vw,120px);max-width:1660px;margin:0 auto;padding:24px clamp(24px,3.3vw,56px) 40px}
.studio-intro{align-self:start;position:static;max-width:490px;min-width:0;display:flex;flex-direction:column;min-height:calc(100svh - 64px)}
.studio-intro-footer{margin-top:auto;padding-top:24px}
.studio-intro-footer p{font:400 var(--type-caption)/1.5 var(--body);color:var(--muted);margin:16px 0 0}
.studio-home{padding-bottom:0}
.studio-bio{container-type:inline-size}
.studio-bio h1,.work-heading h1{font:700 var(--type-h1)/1.15 var(--display);letter-spacing:-.025em;color:var(--accent);margin:28px 0}
.studio-bio h1.studio-lede{font:500 var(--type-h2)/1.48 var(--body);letter-spacing:-.025em;color:var(--ink);margin:0 0 22px;text-wrap:pretty}
.studio-bio > p{font-size:var(--type-lead);line-height:1.55;color:var(--ink-2);margin:0 0 28px}
.studio-portrait{display:inline-block;width:1.25em;height:1.25em;margin:0 .08em;border-radius:50%;object-fit:cover;vertical-align:-.23em}
.studio-bio .studio-location{display:flex;align-items:baseline;font-size:var(--type-caption);color:var(--muted);margin:-12px 0 28px}
.studio-location .profile-clock{display:inline;white-space:nowrap}
.studio-bio .company-link{border:0;text-decoration-thickness:1px}
.studio-page :is(.company-link,.studio-all-work,.work-back){transition:color var(--motion-fast)}
.studio-page :is(.company-link,.studio-all-work,.work-back):is(:hover,:focus-visible){color:var(--green)}
.studio-all-work{display:inline-flex;gap:18px;align-items:center;min-height:44px;color:var(--accent);font-size:var(--type-body)}
.studio-all-work > span{transition:translate var(--motion-response)}.studio-all-work:hover > span{translate:2px -2px}
.studio-page-footer{max-width:1660px;margin:auto;padding:72px clamp(24px,3.3vw,56px) 24px;color:var(--muted);font-size:var(--type-caption)}
.studio-feed{display:flex;flex-direction:column;gap:20px;min-width:0;scroll-margin-top:24px}
.project-card{--project-radius:22px;position:relative;min-width:0}
.studio-motion-ready .project-card{opacity:0;transform:translateY(30px);transition:opacity 720ms var(--ease),transform 720ms var(--ease)}
.studio-motion-ready .project-card.is-in-view{opacity:1;transform:none}
.project-link{display:block;border-radius:var(--project-radius);min-width:0;overflow:visible}
.studio-media{position:relative;isolation:isolate;aspect-ratio:25/18;background:var(--surface-soft);border-radius:var(--project-radius);overflow:hidden;clip-path:inset(0 round var(--project-radius))}
.studio-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease);will-change:transform}
.studio-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .24s;background:var(--surface-soft)}
.project-card.is-video-playing .studio-video{opacity:1}
.project-cover-caption{position:absolute;inset:auto 0 0;z-index:1;padding:64px 76px 24px 24px;isolation:isolate}
.project-cover-caption::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,transparent,rgba(15,17,19,.5) 55%,rgba(15,17,19,.78));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 48%);mask-image:linear-gradient(to bottom,transparent,#000 48%);pointer-events:none}
.project-year{font:400 var(--type-caption)/1.5 var(--body);color:rgba(255,255,255,.8);margin:0 0 6px}
.project-cover-caption h2{font:700 var(--type-h3)/1.25 var(--display);letter-spacing:-.02em;margin:0;color:var(--card);text-wrap:pretty;transition:color var(--motion-fast)}

.studio-media .project-arrow{z-index:2}
.studio-media .project-lock{top:16px;bottom:auto;z-index:2}
.project-caption{padding:18px 2px 2px}
.project-meta{font-size:var(--type-caption);line-height:1.5;color:var(--muted);margin:0 0 6px}
.project-caption h2{font:700 var(--type-h3)/1.25 var(--display);letter-spacing:-.02em;margin:0;color:var(--ink);transition:color var(--motion-fast)}
.project-description{font-size:var(--type-body);line-height:1.65;color:var(--ink-2);margin:10px 0 0}
.studio-home .project-description{display:block;max-width:62ch}
.project-motion,.project-arrow{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:0 4px 18px #0f11131a}
.project-motion{top:16px;right:16px;z-index:3;border:1px solid var(--rule);padding:0;cursor:pointer;transition:box-shadow var(--motion-fast)}
.project-motion:hover{box-shadow:0 6px 22px #0f111333}.project-motion svg{width:20px;height:20px}
.project-arrow{right:16px;bottom:16px;opacity:0;translate:-4px 4px;transition:opacity .24s,translate .24s}
.project-link:hover .project-arrow,.project-link:focus-visible .project-arrow{opacity:1;translate:0 0;background:var(--mark);color:var(--accent)}
.project-lock{position:absolute;bottom:16px;left:16px;display:flex;align-items:center;gap:7px;background:var(--ink);color:var(--card);padding:8px 12px;border-radius:99px;font-size:var(--type-micro);line-height:1.5}.project-lock svg{width:16px;height:16px}
.studio-page .contact{margin-top:12px;padding:32px;border-radius:22px}.studio-page .contact h2{font-size:var(--type-h2)}
.studio-page .contact h2 .accent{font-family:inherit;font-style:normal}
.studio-page .ways a:is(:hover,:focus-visible){background:var(--mark);border-color:var(--mark);color:var(--accent)}
.work-shell{max-width:1460px;margin:auto;padding:40px clamp(24px,4vw,64px)}
.work-heading{margin-bottom:40px}.work-heading h1{margin:24px 0 16px}.work-heading p{color:var(--muted);font-size:var(--type-body);margin:0}.work-back{display:inline-flex;align-items:center;min-height:44px;font-size:var(--type-caption)}.work-back:hover{color:var(--accent)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.studio-work .contact{margin-top:64px}
.studio-work-footer{color:var(--muted);font-size:var(--type-caption);padding-top:24px}
.studio-empty{font-size:var(--type-lead);padding:40px 0}.studio-empty a{color:var(--accent)}
.studio-skip{position:fixed;top:8px;left:8px;z-index:100;background:var(--card);padding:12px 18px;border:1px solid var(--accent);border-radius:8px;transform:translateY(-160%)}.studio-skip:focus{transform:none}
@media(min-width:981px){.studio-intro.intro-can-stick{position:sticky;top:32px}}
@keyframes studio-cover-drift{0%,100%{transform:scale(1.015) translate3d(-.35%,0,0)}50%{transform:scale(1.055) translate3d(.35%,-.25%,0)}}
@keyframes studio-intro-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.project-card.is-in-view:not(.is-video-playing) .studio-image{animation:studio-cover-drift 8s var(--ease) infinite}.project-card:nth-of-type(even).is-in-view:not(.is-video-playing) .studio-image{animation-direction:reverse;animation-duration:9.5s}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.project-link:hover .studio-image{animation:none;transform:scale(var(--image-hover-scale))}}
@media(max-width:1180px){.studio-layout{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);gap:40px}}
@media(max-width:980px){
 .studio-layout{grid-template-columns:1fr;max-width:780px;padding-top:32px;gap:56px}.studio-intro{position:static;max-width:none}.studio-bio{max-width:65ch}.studio-page-footer{max-width:780px}
 .work-grid{gap:32px 22px}.project-caption h2{font-size:var(--type-h4)}
}
@media(max-width:640px){
 .project-cover-caption{padding:48px 68px 18px 18px}.project-cover-caption h2{font-size:var(--type-h4)}.studio-media .project-lock{top:12px;bottom:auto}
 .studio-intro{min-height:calc(100svh - 40px)}
 .studio-page{padding-bottom:0}.studio-layout,.work-shell{padding-left:20px;padding-right:20px}.studio-layout{gap:44px;padding-top:20px}.studio-feed{gap:20px}.work-grid{grid-template-columns:1fr;gap:48px}.work-heading{margin-bottom:28px}
 .studio-home{padding-bottom:0}.studio-bio h1.studio-lede{font-size:var(--type-h2);line-height:1.42}.studio-bio > p{font-size:var(--type-body);line-height:1.7;margin-bottom:22px}.studio-page-footer{padding:24px 20px}
 .project-motion{top:12px;right:12px}.project-lock{bottom:12px;left:12px}.project-card{--project-radius:18px}.project-caption{padding-top:14px}.project-meta{font-size:var(--type-micro)}.studio-page .contact{padding:24px}.studio-work .contact{margin-top:40px}
}
@media(hover:none){.project-arrow{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.studio-page *{animation:none!important;transition:none!important}.studio-image{transform:none!important}.project-motion{display:none!important}.studio-motion-ready .project-card{opacity:1;transform:none}.studio-transition{display:none}}

/* All project information shares the cover's blurred caption. */
.project-cover-caption .project-description{color:var(--card);line-height:1.5;margin-top:10px}
.project-cover-caption .project-description strong{font-weight:700;color:inherit}
@media(max-width:640px){.studio-layout{grid-template-columns:minmax(0,1fr)}.studio-feed{min-width:0}.studio-media{width:100%;min-height:360px}}

@media(max-width:980px){
 .studio-home .studio-intro-footer .sidebar-contact-nav{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
 .studio-home .studio-intro-footer .sidebar-contact-nav a{margin-left:0;padding:10px 0}
}

/* Carry the mobile scrim above metadata, including on pale covers. */
@media(max-width:640px){
 .project-cover-caption::before{
  top:-56px;
  background:linear-gradient(to bottom,transparent 0,rgba(15,17,19,.76) 96px,rgba(15,17,19,.88) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 88px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 88px);
 }
 .project-cover-caption .project-year{color:var(--card)}
}