/* Original gestural artwork: one continuous stroke connects the studio's disciplines. */
.line-stage{position:relative;isolation:isolate}.studio-line{position:absolute;pointer-events:none;z-index:-1;overflow:visible;fill:none;color:#f5efce;width:100%;height:100%;inset:0}.studio-line path{stroke:currentColor;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lines-active .studio-line path{stroke-dasharray:1;stroke-dashoffset:var(--line-draw,1)}
.line-manifesto{height:270px;top:auto;bottom:-60px;color:#f5efce;opacity:.7}.line-capabilities{width:57%;left:43%;top:0;height:100%;color:#f5efce;opacity:.85}.line-story{top:-60px;height:240px;opacity:.55}
.line-about{top:auto;bottom:-110px;height:340px;width:115%;left:-7.5%;opacity:.9}.about-hero.line-stage{overflow:visible;margin-bottom:80px}.line-founder{height:390px;top:-60px;opacity:.16}.line-services{height:100%;color:#f5efce;opacity:.2}.line-deck{height:100%;opacity:.5;left:-5%;width:110%}.line-contact{height:380px;top:65px;width:110%;left:-5%;opacity:.6}.line-archive{height:170px;top:auto;bottom:-100px;opacity:.85}.line-detail{height:220px;top:auto;bottom:-15px;opacity:.2}.line-journal{width:70%;left:30%;height:230px;top:auto;bottom:-70px;opacity:.5}.line-closing{top:auto;bottom:35px;height:260px;color:#f5efce;opacity:.75}.closing.line-stage{overflow:hidden}
.heading-line{display:block;overflow:hidden}.heading-line-inner{display:block;animation:headline-rise 850ms cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--line-index,0)*90ms)}@keyframes headline-rise{from{opacity:0;transform:translateY(105%) rotate(1.5deg)}to{opacity:1;transform:translateY(0)}}
h1 .heading-line:last-child{padding:.08em 0 .13em;margin-bottom:-.13em;overflow:visible}
@view-transition{navigation:auto}::view-transition-old(root){animation:page-leave 220ms ease both}::view-transition-new(root){animation:page-enter 500ms cubic-bezier(.2,.75,.2,1) both}@keyframes page-leave{to{opacity:0;transform:translateY(-10px)}}@keyframes page-enter{from{opacity:.3;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(max-width:800px){.studio-line path{stroke-width:8}.line-manifesto{height:150px;bottom:-30px}.line-capabilities{width:100%;left:0;opacity:.3}.line-story{height:150px;top:-35px}.line-about{height:190px;bottom:-85px}.about-hero.line-stage{margin-bottom:60px}.line-founder{height:270px;opacity:.12}.line-contact{height:220px;top:20px}.line-archive{display:none}.line-journal{height:120px;bottom:-30px}.line-closing{height:140px;bottom:70px}.line-deck{left:0;width:100%;opacity:.2}.heading-line-inner{animation-duration:600ms}}
.reduce-motion .studio-line path{stroke-dashoffset:0!important}.reduce-motion .heading-line-inner{animation:none!important;transform:none!important}.reduce-motion::view-transition-old(root),.reduce-motion::view-transition-new(root){animation:none!important}
@media(prefers-reduced-motion:reduce){.studio-line path{stroke-dashoffset:0!important}.heading-line-inner{animation:none!important;transform:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* Clip decorative strokes, while keeping normal page scrolling and sticky content. */
.line-stage{overflow:clip}.about-hero.line-stage{overflow:clip;padding-bottom:210px;margin-bottom:25px}.line-about{bottom:0}.capability-story.line-stage{overflow:clip}.work-archive aside.line-stage{overflow:visible}.line-archive{width:100%;overflow:hidden}
@media(max-width:800px){.about-hero.line-stage{padding-bottom:120px;margin-bottom:20px}.line-about{bottom:0}}

/* A full-screen curved splash bridges documents without a white flash. */
@view-transition{navigation:none}
.page-curtain{position:fixed;inset:-20vh -10vw;z-index:10000;background:#c82032;pointer-events:none;transform:translateY(120%);border-radius:48% 48% 0 0;display:grid;place-items:center;will-change:transform}
.page-curtain img{width:clamp(85px,12vw,165px);filter:brightness(0) invert(92%) sepia(15%) saturate(400%);opacity:.9}
.page-curtain.is-covering{pointer-events:all;animation:curtain-cover 580ms cubic-bezier(.65,0,.25,1) both}
.page-arriving .page-curtain{transform:translateY(0);border-radius:0}
.page-arriving:before{content:"";position:fixed;inset:0;background:#c82032;z-index:9999}
.page-curtain.is-revealing{animation:curtain-reveal 720ms cubic-bezier(.65,0,.25,1) both}
@keyframes curtain-cover{from{transform:translateY(120%);border-radius:48% 48% 0 0}to{transform:translateY(0);border-radius:0}}
@keyframes curtain-reveal{from{transform:translateY(0);border-radius:0}to{transform:translateY(-120%);border-radius:0 0 48% 48%}}
.reduce-motion .page-curtain{display:none}.reduce-motion.page-arriving:before{display:none}
@media(prefers-reduced-motion:reduce){.page-curtain,.page-arriving:before{display:none}}

/* Organic ink splash: a looping stroke swells to cover, then contracts. */
.page-curtain{inset:0;transform:none;border-radius:0;background:transparent;color:#c82032;display:block;visibility:hidden;will-change:auto}
.page-curtain svg{position:absolute;inset:-15%;width:130%;height:130%;overflow:visible;fill:none}
.page-curtain path{stroke:currentColor;stroke-width:0;stroke-linecap:round;stroke-linejoin:round}
.page-curtain.is-covering,.page-curtain.is-revealing,.page-arriving .page-curtain{visibility:visible;animation:none;transform:none;border-radius:0}
.page-curtain.is-covering path{animation:ink-cover 720ms cubic-bezier(.65,0,.25,1) both}
.page-arriving .page-curtain path{stroke-width:650}
.page-curtain.is-revealing path{animation:ink-reveal 850ms cubic-bezier(.65,0,.25,1) both}
.page-arriving:before{background:#c82032}
@keyframes ink-cover{0%{stroke-width:0}30%{stroke-width:40}100%{stroke-width:650}}
@keyframes ink-reveal{0%{stroke-width:650}70%{stroke-width:40}100%{stroke-width:0}}

/* The splash travels along the gesture rather than exposing the whole path. */
.page-curtain path{stroke-dasharray:1;stroke-dashoffset:1}
.page-curtain.is-covering path{animation:ink-draw-cover 780ms cubic-bezier(.65,0,.35,1) both}
.page-arriving .page-curtain path{stroke-width:650;stroke-dashoffset:0}
.page-curtain.is-revealing path{animation:ink-trace-reveal 1200ms cubic-bezier(.65,0,.35,1) both}
@keyframes ink-draw-cover{0%{stroke-width:45;stroke-dashoffset:1}22%{stroke-width:45}100%{stroke-width:650;stroke-dashoffset:0}}
@keyframes ink-trace-reveal{0%{stroke-width:650;stroke-dashoffset:0}78%{stroke-width:45}100%{stroke-width:45;stroke-dashoffset:-1}}
