.project.project-blueprint{height:100vh;height:100dvh}
.project-blueprint{background:var(--red);color:var(--ink)}
.blueprint-grid{background-color:var(--red)}
.bp-top{position:absolute;top:88px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:8px}
.bp-tag{position:absolute;left:25px;bottom:35px;font-size:8px}
.bp-mark{position:absolute;right:2vw;bottom:2vh;font:700 clamp(64px,12vw,200px)/.8 var(--display);letter-spacing:-.03em;color:rgba(17,17,15,.09);pointer-events:none;white-space:nowrap}
.bp-title{position:absolute;left:4vw;top:17vh;width:40vw;z-index:3}.bp-title h3{margin-top:35px;color:var(--paper);text-shadow:.045em .045em 0 var(--ink)}.bp-title h3 em{font-family:var(--serif);font-weight:400}.bp-title>p{font-size:28px;line-height:1;max-width:420px;color:var(--ink)}
.exploded{position:absolute;right:.5vw;top:10vh;width:40vw;height:80vh}
.bp-diagram{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.exploded svg .lead{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:8 7}.exploded svg .mp{fill:none;stroke:#fff;stroke-width:20;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .15s linear}.exploded svg circle{fill:var(--ink);opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.project-blueprint.is-in .exploded svg .mp{stroke-dashoffset:0}
.project-blueprint.is-in .exploded svg circle{opacity:1;transform:scale(1)}
.exploded svg .w1{transition-delay:.75s}.exploded svg .w2{transition-delay:1.25s}.exploded svg .w3{transition-delay:1.75s}.exploded svg .w4{transition-delay:2.25s}.exploded svg .w5{transition-delay:2.75s}
.exploded svg .d1{transition-delay:.4s}.exploded svg .d2{transition-delay:.9s}.exploded svg .d3{transition-delay:1.4s}.exploded svg .d4{transition-delay:1.9s}.exploded svg .d5{transition-delay:2.4s}.exploded svg .d6{transition-delay:2.9s}
.bp-arg{pointer-events:none;opacity:0;transition:opacity .4s ease}
.project-blueprint.is-in .bp-arg{opacity:.24}
.bp-arg path{fill:rgba(17,17,15,.06);stroke:var(--ink);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.exploded svg text{fill:var(--ink);font:14px var(--mono);letter-spacing:.06em;text-anchor:middle;dominant-baseline:central}
.exploded svg .pg-shadow{fill:var(--ink);fill-opacity:.15}
.exploded svg .pg-box{fill:var(--paper);stroke:var(--ink);stroke-width:4}
.piece-g{transform-box:fill-box;transform-origin:center;transform:translate(var(--tx),var(--ty)) rotate(var(--r));opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.project-blueprint.is-in .piece-g{transform:translate(0,0) rotate(0deg);opacity:1}
.pg1{--tx:180px;--ty:160px;--r:-18deg;transition-delay:.45s}
.pg2{--tx:-120px;--ty:90px;--r:9deg;transition-delay:.95s}
.pg3{--tx:-210px;--ty:160px;--r:-12deg;transition-delay:1.45s}
.pg4{--tx:-220px;--ty:-60px;--r:16deg;transition-delay:1.95s}
.pg5{--tx:-90px;--ty:-170px;--r:-8deg;transition-delay:2.45s}
.pg6{--tx:-150px;--ty:150px;--r:14deg;transition-delay:2.95s}

@media(max-width:900px){
  .bp-title h3{font-size:12.5vw}
  .bp-title>p{font-size:6.5vw}
  .bp-title{left:18px;top:12vh;width:86vw}.exploded{width:100vw;height:59vh;right:0;top:41vh}.bp-top{top:68px;left:14px;right:14px}.bp-tag{display:none}.bp-mark{font-size:11vw;bottom:2vh}.bp-diagram{transform:scale(.88)}
}