/* Separate centre-wordmark composition. Original artwork is shared unchanged. */
.hub-scene{position:relative;width:100%;max-width:1440px;height:var(--hub-height,300px);margin:0 auto;isolation:isolate}
.hub-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hub-threads path{fill:none;stroke:#ff00c7;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hub-scene .wordmark-frame{left:var(--hub-logo-x);top:var(--hub-logo-y);width:var(--hub-logo-width);height:calc(var(--hub-logo-width)*480/481)}
.hub-scene .werkflo-logo{transform:scale(var(--hub-logo-scale));transform-origin:top left}
.hub-portrait{position:absolute;display:block;left:var(--hub-photo-x);top:var(--hub-photo-y);width:var(--hub-photo-width);height:auto}
.hub-toned{position:absolute;display:block;left:var(--hub-toned-x);top:var(--hub-toned-y);width:var(--hub-toned-size);height:var(--hub-toned-height,var(--hub-toned-size))}


@font-face{font-family:Infamous;src:url('/fonts/Infamous-Regular.otf') format('opentype');font-weight:400;font-display:swap}
.hub-scene .logo-inline-source{display:block;pointer-events:none;user-select:none}
.hub-scene .werkflo-logo svg [stroke="black"],
.hub-scene .werkflo-logo svg [stroke="#000"],
.hub-scene .werkflo-logo svg [stroke="#000000"]{stroke-width:var(--hub-logo-source-weight,7px);vector-effect:none}
.hub-threads path{stroke-width:var(--hub-thread-weight,.75px)}
.hub-pending{position:absolute;display:grid;place-items:center;border:.65px solid #b9b1b6;border-radius:2px;background:#fff;color:#62565e;font:14px/1 Infamous,cursive;pointer-events:none}

.hub-portrait-frame{position:absolute;display:block;left:calc(var(--hub-photo-x) - var(--hub-photo-width)*.2828);top:calc(var(--hub-photo-y) - var(--hub-photo-width)*.4233);width:calc(var(--hub-photo-width)*1.6);height:calc(var(--hub-photo-width)*1.6*514/430);pointer-events:none}
.hub-envelope{position:absolute;display:block}

/* Centre the visible cut-out, including its pink edge, inside the reference opening. */
.hub-portrait{left:calc(var(--hub-photo-x) + var(--hub-photo-width)*0.06837396729789919);top:calc(var(--hub-photo-y) + var(--hub-photo-width)*-0.000981382604994363)}

/* Pink paper is a separate collage layer; the supplied portrait SVG is unchanged. */
.hub-portrait-paper{position:absolute;left:calc(var(--hub-photo-x) + var(--hub-photo-width)*.015);top:calc(var(--hub-photo-y) - var(--hub-photo-width)*.012);width:var(--hub-photo-width);height:auto;fill:#ffc6ed;transform:rotate(-3deg);transform-origin:49% 50%;pointer-events:none}
.hub-folder{position:absolute;display:block;min-width:44px;min-height:44px;color:inherit}
.hub-folder img{display:block;width:100%;height:auto}
.hub-folder:focus-visible{outline:1px dashed #b90092;outline-offset:4px}
.hub-scene .werkflo-logo{cursor:pointer;-webkit-tap-highlight-color:transparent}
.hub-scene .werkflo-logo:focus-visible{outline:calc(1px / var(--hub-logo-scale)) dashed #b90092;outline-offset:calc(7px / var(--hub-logo-scale))}
.hub-scene[data-arrival="waiting"]{visibility:hidden}
.hub-scene[data-arrival="logo"]>.hub-threads,
.hub-scene[data-arrival="logo"]>:not(.wordmark-frame):not(.hub-threads){opacity:0}
.hub-scene[data-arrival="growing"] .hub-portrait-frame,
.hub-scene[data-arrival="growing"] .hub-portrait-paper,
.hub-scene[data-arrival="growing"] .hub-portrait{animation:hub-art-in 360ms ease-out 1000ms both}
.hub-scene[data-arrival="growing"] .hub-folder{animation:hub-art-in 360ms ease-out 1100ms both}
.hub-scene[data-arrival="growing"] .hub-toned{animation:hub-art-in 360ms ease-out 1200ms both}
.hub-scene[data-arrival="growing"] .hub-envelope{animation:hub-art-in 360ms ease-out 1300ms both}
.hub-waiting .portfolio-experience{opacity:0}
.portfolio-experience{transition:opacity 300ms ease-out}
@keyframes hub-art-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hub-scene>*{animation:none!important}.portfolio-experience{transition:none}}

.hub-embedded .portfolio-page{min-height:0}