.tech-text{position:relative;width:100%;height:100%;touch-action:pan-y;user-select:none}.tech-text-canvas{display:block;width:100%;height:100%}.showcase{display:grid;gap:clamp(3.5rem,8vw,6rem);margin-top:3.5rem}.piece{margin:0;display:grid;gap:1.6rem;align-items:center}.piece figcaption h3{font-size:1.9rem;margin-bottom:.35rem}.piece figcaption p{margin:0;color:var(--fb-ink-soft);max-width:26rem}.piece .no{display:block;margin-bottom:.6rem;font:500 .74rem/1.4 var(--fb-font-sans);letter-spacing:var(--fb-tracking-caps);text-transform:uppercase;color:var(--fb-taupe-dark)}.stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:20rem;padding:1.5rem 1rem;background:#fcfaf699;border:1px solid var(--fb-line);border-radius:var(--fb-radius-window);box-shadow:var(--fb-shadow-soft);overflow:hidden}@media(min-width:60rem){.piece{grid-template-columns:1fr 1.5fr;gap:4rem}.piece:nth-child(2n){grid-template-columns:1.5fr 1fr}.piece:nth-child(2n) figcaption{order:2}.stage{min-height:26rem}}.showcase-note{text-align:center}.showcase-ctrl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.25rem;font:500 .74rem/1 var(--fb-font-sans);letter-spacing:var(--fb-tracking-caps);text-transform:uppercase;color:var(--fb-taupe-dark)}.showcase-ctrl button{display:grid;place-items:center;min-width:2.75rem;height:2.75rem;padding:0 .9rem;border:1px solid var(--fb-line);border-radius:var(--fb-radius-pill);background:var(--fb-chip);color:var(--fb-ink);font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:var(--fb-shadow-chip)}.showcase-ctrl button.text{font-size:.9rem}.showcase-ctrl button:disabled{opacity:.4;cursor:default}.showcase-ctrl button:focus-visible,.album-leaf:focus-visible,.voucher-stub:focus-visible{outline:2px solid var(--fb-ink);outline-offset:3px}.showcase-ctrl [role=status]{min-width:7rem;text-align:center}.stage:has(.album){padding:1.25rem .5rem}.album{--pw: min(21rem, calc((100cqw - .5rem)/2) );--ph: calc(var(--pw) * 1.4);width:100%;container-type:inline-size}.album-stage{display:grid;place-items:center;padding:1rem 0 1.6rem;perspective:2200px}.album-book{position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;transform:rotateX(8deg)}.album-cover{position:absolute;inset:-.55rem -.6rem -.75rem;border-radius:6px;background:linear-gradient(135deg,#4a3d33,#2d241d);box-shadow:0 30px 50px -18px #291e1480,0 10px 18px #291e1440;z-index:0}.album-base,.album-leaf{position:absolute;top:0;width:50%;height:100%}.album-base{z-index:1;background:#f4efe6}.album-base-l{left:0;border-radius:3px 0 0 3px;box-shadow:-1px 1px #e6dfd2,-2px 2px #f4efe6,-3px 3px #e2dacb,-4px 4px #f1ebe0}.album-base-r{left:50%;border-radius:0 3px 3px 0;box-shadow:1px 1px #e6dfd2,2px 2px #f4efe6,3px 3px #e2dacb,4px 4px #f1ebe0}.album-blank{background:#f4efe6 url(/images/paper.webp) 0 0 / 640px 480px}.album .face{display:block;position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.album .face img{width:100%;height:100%;object-fit:cover;user-select:none}.album-base-l .face{border-radius:3px 0 0 3px}.album-base-l .face:after,.album-leaf .back:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(41,30,20,.34),rgba(41,30,20,.08) 12%,transparent 30%)}.album-base-r .face:after,.album-leaf .front:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(41,30,20,.34),rgba(41,30,20,.08) 12%,transparent 30%)}.album-leaf{left:50%;z-index:var(--z);padding:0;border:0;background:#f4efe6;transform-origin:left center;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.65,0,.35,1);cursor:pointer;border-radius:0 3px 3px 0;box-shadow:0 0 #291e1400}.album-leaf[data-turned=true]{transform:rotateY(-180deg)}.album-leaf:not([data-turned=true]):hover{transform:rotateY(-7deg)}.album-leaf .front{border-radius:0 3px 3px 0}.album-leaf .back{border-radius:3px 0 0 3px;transform:rotateY(180deg)}.album-gutter{position:absolute;left:50%;top:0;bottom:0;width:14%;transform:translate(-50%) translateZ(0);z-index:40;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(41,30,20,.22) 46%,rgba(41,30,20,.4) 50%,rgba(41,30,20,.22) 54%,transparent);mix-blend-mode:multiply}.album-leaf[data-hint=true]{animation:page-hint 5s cubic-bezier(.45,0,.25,1) 1.6s infinite}.album-leaf[data-hint=true]:hover,.album-leaf[data-hint=true]:focus-visible{animation:none}.album-leaf[data-hint=true]:before{content:"";position:absolute;right:0;bottom:0;width:22%;aspect-ratio:1;z-index:2;pointer-events:none;transform:translateZ(1px);background:linear-gradient(135deg,transparent 50%,#e9e2d4 50%,#fbf8f1 78%);clip-path:polygon(100% 0,0 100%,100% 100%);box-shadow:-6px -6px 12px #291e1440;opacity:0;animation:corner-curl 5s ease-in-out 1.6s infinite}@keyframes page-hint{0%,62%,to{transform:rotateY(0)}74%{transform:rotateY(-13deg)}86%{transform:rotateY(-4deg)}92%{transform:rotateY(-8deg)}}@keyframes corner-curl{0%,60%,to{opacity:0;transform:translateZ(1px) scale(.4)}74%{opacity:1;transform:translateZ(1px) scale(1)}90%{opacity:0;transform:translateZ(1px) scale(.6)}}@media(prefers-reduced-motion:reduce){.album-leaf[data-hint=true],.album-leaf[data-hint=true]:before{animation:none}}.voucher-scene{width:100%;max-width:34rem}.voucher{position:relative;display:flex;flex-direction:column;filter:drop-shadow(0 22px 30px rgba(41,30,20,.18));transform-origin:50% 60%;will-change:transform}.voucher-main,.voucher-stub,.voucher-slot{background:var(--fb-card) url(/images/paper.webp) 0 0 / 640px 480px}.voucher-main{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-height:13rem;padding:1.6rem 1.5rem}.voucher[data-torn=true] .voucher-main{clip-path:polygon(0 0,100% 0,100% 96%,94% 99%,88% 95%,80% 100%,72% 96%,63% 99%,55% 95%,46% 100%,38% 96%,29% 99%,20% 95%,11% 100%,5% 96%,0 99%)}.voucher-frame{position:absolute;inset:.7rem;border:1px solid rgba(107,92,79,.3);pointer-events:none}.voucher-main .kicker{margin:0}.voucher-title{margin:0;font:italic 400 1.75rem/1.1 var(--fb-font-serif);color:var(--fb-ink);text-wrap:balance}.voucher-sub{margin:.6rem 0 0;font:400 .66rem/1.4 var(--fb-font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fb-ink-soft)}.voucher-slot{position:relative;height:6.5rem;background:none}.voucher-ghost{position:absolute;inset:.7rem;border:1px dashed rgba(107,92,79,.3)}.voucher-stub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;border:0;color:var(--fb-taupe-dark);cursor:pointer;transition:transform .35s var(--fb-ease-out, ease)}.voucher-stub:hover{transform:translateY(3px) rotate(-1.5deg)}.voucher-stub .kicker{margin:0;color:var(--fb-ink)}.voucher-hint{font-size:.78rem;color:var(--fb-ink-soft)}.perf{position:absolute;left:.7rem;right:.7rem;top:0;border-top:2px dotted rgba(107,92,79,.55)}.voucher-falling{position:absolute;inset:0;background:var(--fb-card) url(/images/paper.webp) 0 0 / 640px 480px;transform-origin:50% 30%;animation:stub-fall 1.1s cubic-bezier(.5,0,1,.6) forwards;pointer-events:none}@keyframes stub-fall{0%{transform:none;opacity:1}22%{transform:translate(8px,26px) rotate(-6deg) scale(.92);opacity:1}to{transform:translate(30px,300px) rotate(-40deg) scale(.42);opacity:0}}.voucher-creases{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}@media(min-width:40rem){.voucher{flex-direction:row}.voucher-main{flex:1;min-height:14rem;padding:2rem}.voucher-title{font-size:2.1rem}.voucher[data-torn=true] .voucher-main{clip-path:polygon(0 0,96% 0,99% 6%,95% 12%,100% 20%,96% 28%,99% 37%,95% 45%,100% 54%,96% 62%,99% 71%,95% 80%,100% 89%,96% 95%,98% 100%,0 100%)}.voucher-slot{width:9.5rem;height:auto;flex-shrink:0}.perf{left:0;right:auto;top:.7rem;bottom:.7rem;border-top:0;border-left:2px dotted rgba(107,92,79,.55)}}.stage .loupe-image{max-width:34rem;box-shadow:var(--fb-shadow-lift)}@media(max-width:40rem){#work>.wrap{padding-left:12px;padding-right:12px}#work .head,#work .piece figcaption,#work .showcase-note{padding-left:12px;padding-right:12px}.stage{padding:1rem .5rem;min-height:0}}.loupe-image{position:relative;isolation:isolate;width:100%;user-select:none;-webkit-user-select:none;outline:none}.loupe-image:focus-visible{outline:2px solid color-mix(in oklch,currentColor 45%,transparent);outline-offset:4px}
