/* Choreographed movement; the work and the reader stay in control. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .16s ease both}
::view-transition-new(root){animation:page-in .24s ease both}
.hero-line{display:block;animation:headline-arrive .65s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(80ms + var(--line-index)*85ms)}
.directed-hero .role-hero-title{font-size:clamp(72px,8.3vw,135px);line-height:.92;letter-spacing:-.045em}
.role-hero-title .hero-line em{display:inline;font-size:inherit;letter-spacing:inherit;line-height:inherit}
.hero-stage{min-width:0;display:flex;flex-direction:column;background:#201a16;color:#fff4dc}
.hero-stage .hero-feature{flex:1;min-height:520px;aspect-ratio:auto;isolation:isolate}
.hero-stage .hero-feature>.cover-photo{animation:var(--artwork-animation,artwork-arrive) .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:.15s;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .2s}
.hero-feature.is-loading>.cover-photo{opacity:.5}.hero-feature.is-switching>.cover-photo{animation:work-arrive .55s cubic-bezier(.16,1,.3,1) both}
.hero-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #fff4dc44}
.hero-switcher>button{padding:19px 15px;background:transparent;color:#d3c4af;font-size:10px;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:9px;position:relative;min-height:58px}
.hero-switcher>button>span{font-size:8px;opacity:.7}.hero-switcher>button:after{position:absolute;content:'';height:3px;left:15px;right:15px;bottom:0;background:#fff4dc;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.hero-switcher>button[aria-pressed=true]{color:#fff4dc;background:#ffffff0a}.hero-switcher>button[aria-pressed=true]:after{transform:scaleX(1)}.hero-switcher>button:hover{background:#ffffff13;color:#fff4dc}
.hero-announcement{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.project-caption h3 svg,.feature-arrow svg,.circle-cta svg,.hero-work-link>span{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.project-card:has(.project-cover:hover) .project-caption h3 svg,.project-caption a:hover svg,.project-caption a:focus-visible svg{transform:translate(4px,-4px)}
.hero-feature:hover .feature-arrow svg,.hero-feature:focus-visible .feature-arrow svg,.circle-cta:hover svg,.circle-cta:focus-visible svg{transform:translate(3px,-3px)}
.hero-work-link:hover>span,.hero-work-link:focus-visible>span{transform:translateY(4px)}
.editorial-case .lightbox[open],.recipe-dialog[open]{animation:dialog-arrive .22s cubic-bezier(.16,1,.3,1)}
.motion-enter{opacity:0;transform:translateY(25px);transition:opacity .65s ease,transform .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--motion-delay,0ms)}
.motion-enter.is-visible{opacity:1;transform:none}
.case-toolbar .case-progress::-webkit-progress-value{transition:width .12s linear}
.contact-strip .circle-cta{transition:background .25s,color .25s,transform .4s cubic-bezier(.16,1,.3,1)}
.contact-strip:hover .circle-cta{transform:rotate(-5deg)}
@media(hover:hover) and (pointer:fine){.hero-stage .hero-feature:hover>.cover-photo{transform:translate(calc(var(--pointer-x,0)*7px),calc(var(--pointer-y,0)*7px)) scale(1.04)}}
@keyframes headline-arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes artwork-arrive{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes work-arrive{from{opacity:.25;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.directed-hero .role-hero-title{font-size:8.2vw}.hero-stage .hero-feature{min-height:470px}.hero-switcher>button{font-size:9px;padding:17px 10px;gap:6px}}
@media(max-width:650px){
 .directed-hero .role-hero-title{font-size:clamp(54px,15.3vw,90px);line-height:.91;letter-spacing:-.045em;max-width:none;word-spacing:normal}
 .role-hero-title .hero-line em{display:inline;margin:0}.hero-stage .hero-feature{flex:initial;min-height:0;height:auto;aspect-ratio:1.05}
 .hero-switcher>button{font-size:10px;min-height:57px;padding:14px 10px;gap:8px}.hero-switcher>button>span{font-size:8px}
 .hero-work-link{max-width:105px;font-size:10px}.hero-foot{grid-template-columns:1fr 105px;gap:20px}.hero-foot>p{font-size:11px}
 .motion-enter{transform:translateY(16px)}
}
@media(max-width:360px){.hero-switcher>button{font-size:9px;padding:14px 7px;gap:5px}.hero-foot{grid-template-columns:1fr 95px;gap:15px}.hero-work-link{max-width:95px}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
 .hero-line,.hero-stage .hero-feature>.cover-photo,.hero-feature.is-switching>.cover-photo,.editorial-case .lightbox[open],.recipe-dialog[open]{animation:none!important}
 .motion-enter,.motion-enter.is-visible{opacity:1;transform:none;transition:none!important}
 .hero-stage .hero-feature:hover>.cover-photo,.contact-strip:hover .circle-cta{transform:none}
 .project-caption h3 svg,.feature-arrow svg,.circle-cta svg,.hero-work-link>span,.hero-switcher>button:after{transition:none}
}
/* Keep entrances within the artwork canvas, including during their first frame. */
.hero-stage{overflow:clip}.hero-stage .hero-feature{overflow:clip;contain:paint}
.hero-stage .hero-feature.product-feature{background:#ffdab7}.hero-stage .hero-feature.product-feature>.cover-photo{object-fit:contain}
.hero-stage .product-feature .feature-top{background:#38113e;padding:8px 12px;right:auto}.hero-stage .product-feature .feature-bottom{background:#38113edb;padding:14px 15px}
.contact-strip h2{min-width:0;overflow-wrap:anywhere}
@media(max-width:650px){.contact-strip h2{font-size:clamp(40px,12.5vw,60px)}}
@media(max-width:650px){.selected-work .section-heading h2{font-size:clamp(38px,12vw,58px);overflow-wrap:anywhere}}