/* A monochrome curtain joins the studio and the project enquiry. */
[data-page-transition]{isolation:isolate}
[data-page-transition]:active{transform:scale(.98)}
[data-page-transition] span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
[data-page-transition].is-departing{background:#e5e5e3;color:#111;transform:scale(.985)}
[data-page-transition].brief-button.is-departing span{transform:translate(8px,-8px)}
[data-transition-direction="back"]{transition:color .25s,background .25s,transform .25s;display:inline-flex;align-items:center;gap:18px}
[data-transition-direction="back"]:hover span{transform:translate(-3px,-3px)}
[data-transition-direction="back"].is-departing span{transform:translate(-8px,-8px)}
.back-link[data-transition-direction="back"]{padding:10px 12px;margin-right:-12px}
.route-cover{position:fixed;inset:0;z-index:1000;background:#e5e5e3;color:#141414;display:flex;align-items:center;justify-content:center;transform:translateY(102%);pointer-events:none}
.route-cover-inner{width:min(480px,calc(100% - 64px));display:flex;justify-content:space-between;gap:30px;padding-block:22px;border-block:1px solid #aaa;font:10px/1.5 monospace;letter-spacing:1.4px}
.route-cover-inner b{font-weight:400}.route-cover-inner span{color:#555}
.is-route-leaving #main{transition:opacity .24s ease,transform .3s ease;opacity:.25;transform:translateY(-10px)}
.is-route-returning #brief-main{transition:opacity .24s ease,transform .3s ease;opacity:.25;transform:translateY(10px)}
.is-studio-entering::before{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;background:#e5e5e3;animation:studio-curtain-reveal .58s cubic-bezier(.76,0,.24,1) both}
.is-studio-entering .header,.is-studio-entering .hero h1,.is-studio-entering .hero-bottom{animation:studio-page-enter .6s .18s cubic-bezier(.22,1,.36,1) both}
.brief-page::before{content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;background:#e5e5e3;transform:translateY(-102%);animation:brief-curtain-reveal .58s cubic-bezier(.76,0,.24,1) both}
.brief-page .brief-header{animation:brief-page-enter .55s .2s cubic-bezier(.22,1,.36,1) both}
.brief-page .brief-intro>.brief-kicker{animation:brief-page-enter .6s .21s cubic-bezier(.22,1,.36,1) both}
.brief-page .brief-intro>h1{animation:brief-page-enter .7s .27s cubic-bezier(.22,1,.36,1) both}
.brief-page .brief-intro>.brief-lead,.brief-page .brief-intro>.brief-description{animation:brief-page-enter .7s .34s cubic-bezier(.22,1,.36,1) both}
.brief-page .brief-art{animation:brief-page-enter .8s .39s cubic-bezier(.22,1,.36,1) both}
.brief-page .brief-workspace{animation:brief-page-enter .72s .3s cubic-bezier(.22,1,.36,1) both}
@keyframes brief-curtain-reveal{from{transform:translateY(0)}to{transform:translateY(-102%)}}
@keyframes brief-page-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes studio-curtain-reveal{from{transform:translateY(0)}to{transform:translateY(102%)}}
@keyframes studio-page-enter{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){[data-transition-direction="back"]:hover span,[data-transition-direction="back"].is-departing span{transform:none}.is-studio-entering::before{display:none}.is-studio-entering .header,.is-studio-entering .hero h1,.is-studio-entering .hero-bottom{animation:none}.is-route-returning #brief-main{transition:none;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-page-transition]:active,[data-page-transition].is-departing,[data-page-transition].is-departing span{transform:none}.brief-page::before{display:none}.brief-page .brief-header,.brief-page .brief-intro>*,.brief-page .brief-workspace{animation:none!important}.is-route-leaving #main{transition:none;opacity:1;transform:none}.route-cover{display:none}}