@property --p{syntax:"<number>";inherits:true;initial-value:0}.unpacked{--hl:clamp(56px, 11vw, 170px);--gap:18vh;--rest:36vh;--ov:.12;--door-top:24vh;--tooth2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 0 0 0 -0.95'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23t)' opacity='0.07'/%3E%3C/svg%3E");--tooth3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2 0.2' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.6 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23d)' opacity='0.07'/%3E%3C/svg%3E");--mottle2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E");--rawcanvas:#d6c7a5;--papertone:#fbf9f4;width:100%;padding-top:1.5vh;display:block;position:relative}.unpacked.paper{--door-top:14vh;padding-top:84px}.unpacked .title{z-index:3;pointer-events:none;grid-template-columns:1fr auto;align-items:start;column-gap:24px;padding:0 5vw;display:grid;position:relative}.headline{font-family:var(--font-sans);letter-spacing:-.05em;font-weight:900;font-stretch:125%;line-height:.86;font-size:var(--hl);margin:0}.count{font-family:var(--font-mono);padding-top:calc(.12 * var(--hl));text-align:right;white-space:nowrap;margin:0;font-size:12px;font-weight:700}.work{width:fit-content;max-width:none;color:inherit;text-decoration:none;display:block}.work .obj{width:fit-content;display:block;position:relative}.work .art{height:var(--h,60vh);width:auto;max-width:none;max-height:none;display:block}.piece{margin-top:var(--gap);z-index:1;padding:0 5vw;display:flex;position:relative}.piece-l{justify-content:flex-start}.piece-r{justify-content:flex-end}.piece-c{justify-content:center}:is(.piece:has(.work:hover),.piece:has(.work:focus-within)){z-index:4}.piece .work{--p:0;--h:min(82vh, calc(78vw / var(--ar)));position:relative}.piece-first{z-index:1;margin-top:2vh}.piece-first.piece-l{padding-left:var(--wx,16vw)}.piece-first .work{--h:min(68vh, calc((97vw - var(--wx,16vw)) / var(--ar)))}.piece-tall .work{--h:min(92vh, calc(60vw / var(--ar)))}.piece-duet-b{z-index:2;--ah:min(82vh, calc(78vw / var(--aar)));margin-top:calc(-1 * (var(--ov) * var(--ah)) - 26px)}.piece-duet-b.duet-a-tall{--ah:min(92vh, calc(60vw / var(--aar)))}.piece-duet-b.duet-cross:not(.piece-tall) .work{--h:min(64vh, calc(66vw / var(--ar)))}.piece-duet-b.duet-corner .work{--h:min(40vh, calc(30vw / var(--ar)))}.piece-duet-b.duet-corner{margin-top:calc(-.3 * var(--ah) - 26px)}.piece-duet-b.duet-corner.piece-r{padding-right:17vw}.piece-duet-b.duet-corner.piece-l{padding-left:17vw}.piece-coda{margin-top:9vh}.piece-coda-1 .work{--h:min(50vh, calc(48vw / var(--ar)))}.piece-coda-2 .work{--h:min(38vh, calc(36vw / var(--ar)))}.piece-coda-3 .work{--h:min(30vh, calc(28vw / var(--ar)))}.piece-coda-1.piece-l{padding-left:12vw}.piece-coda-2.piece-r{padding-right:24vw}.piece-coda-3.piece-l{padding-left:36vw}.piece-rest{margin-top:var(--rest)}.caption{align-items:flex-start;gap:14px;margin-top:10px;display:flex}.piece-r .caption{text-align:right;flex-direction:row-reverse}.meta{flex-direction:column;gap:3px;max-width:52ch;display:flex}.piece-r .meta{align-items:flex-end}.meta-row{flex-wrap:wrap;align-items:baseline;gap:4px 12px;display:flex}.piece-r .meta-row{justify-content:flex-end}.meta-title{font-family:var(--font-sans);font-size:15px;font-weight:700;line-height:16px}.meta-facts{font-family:var(--font-mono);font-size:12px;line-height:16px}.meta-description{font-family:var(--font-sans);max-width:46ch;margin-top:4px;font-size:14px;font-weight:400;line-height:20px}.meta-comment{font-family:var(--font-sans);max-width:46ch;margin-top:4px;font-size:14px;font-style:italic;font-weight:400;line-height:20px}.meta-demo-label{font-family:var(--font-mono);opacity:.55;margin-bottom:4px;font-size:11px}.unpacked.canvas .piece-l .art{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}.unpacked.canvas .piece-r .art{clip-path:inset(0 0 0 calc((1 - var(--p)) * 100%))}.roll{--s:clamp(20px, 2.6vw, 36px);--w:calc(var(--h) * var(--ar));width:var(--s);box-sizing:border-box;background-color:var(--rawcanvas);background-image:linear-gradient(90deg, #1111118c 0%, #1111112e 20%, #ffffff38 46%, #11111124 72%, #1119 100%), var(--img);background-size:100% 100%, var(--w) 100%;background-repeat:no-repeat,no-repeat;background-position:0 0, calc(var(--s) / 2 - var(--p) * var(--w)) 0;pointer-events:none;z-index:2;opacity:clamp(0, calc((1 - var(--p)) * 30), 1);scale:calc(.45 + .55 * (1 - var(--p))) 1;position:absolute;top:-2px;bottom:-2px}.piece-l .roll{left:calc(var(--p) * 100%);border-right:3px solid var(--rawcanvas);border-left:1px solid #1111118c;translate:-50%}.piece-r .roll{right:calc(var(--p) * 100%);border-left:3px solid var(--rawcanvas);border-right:1px solid #1111118c;translate:50%}.unpacked.paper .roll{display:none}.door{padding:var(--door-top,24vh) 5vw 14vh;display:flex;position:relative}.door-right{justify-content:flex-end}.door-center{justify-content:center}.door a{color:inherit;text-decoration:none}.door-sheet,.deckle-door{background-color:var(--papertone);background-image:var(--tooth3), var(--tooth2), var(--mottle2);pointer-events:none;z-index:-1;position:absolute;left:2vw;right:2vw}.door-sheet{top:calc(var(--door-top) + .46 * var(--hl));border-left:1px solid #11111124;border-right:1px solid #11111124;bottom:0}.deckle-door{top:calc(var(--door-top) + .46 * var(--hl) - 26px);filter:url(#unpacked-deckle);border-top:1px solid #11111124;height:52px}.page-sheet,.deckle{background-color:var(--papertone);background-image:var(--tooth3), var(--tooth2), var(--mottle2);pointer-events:none;z-index:-1;position:absolute;left:2vw;right:2vw}.page-sheet{top:68px;bottom:calc(var(--door-h,0px) + 26px);border-left:1px solid #11111124;border-right:1px solid #11111124}.deckle{filter:url(#unpacked-deckle);height:52px}.deckle-top{border-top:1px solid #11111124;top:42px}.deckle-bottom{bottom:var(--door-h,0px);border-bottom:1px solid #11111124}.unpacked.paper .piece .obj{transform-style:preserve-3d}.unpacked.paper .piece-l .obj{transform-origin:0%;transform:perspective(1600px) rotateY(calc(180deg * (1 - var(--p))))}.unpacked.paper .piece-r .obj{transform-origin:100%;transform:perspective(1600px) rotateY(calc(-180deg * (1 - var(--p))))}.unpacked.paper .piece .art{backface-visibility:hidden}.back{backface-visibility:hidden;background-color:var(--papertone);background-image:var(--tooth3), var(--tooth2), var(--mottle2);pointer-events:none;border:1px solid #11111129;position:absolute;inset:0;overflow:hidden;transform:rotateY(180deg)}.back img{opacity:.08;filter:grayscale(.5);width:100%;height:100%;position:absolute;inset:0}.unpacked.canvas .back{display:none}@keyframes unpacked-unpack{0%{--p:0}to{--p:1}}@keyframes unpacked-appear{0%{opacity:0}to{opacity:1}}@keyframes unpacked-drift-l{0%{translate:-14vw}to{translate:0}}@keyframes unpacked-drift-r{0%{translate:14vw}to{translate:0}}@supports (animation-timeline:view()){.piece-l .work{animation:linear both unpacked-unpack,linear both unpacked-appear,linear both unpacked-drift-l;animation-timeline:view(),view(),view();animation-range:entry 12% cover 46%,entry entry 26%,entry entry 75%}.piece-r .work{animation:linear both unpacked-unpack,linear both unpacked-appear,linear both unpacked-drift-r;animation-timeline:view(),view(),view();animation-range:entry 12% cover 46%,entry entry 26%,entry entry 75%}.piece-duet-b .work{animation-range:entry cover 34%,entry entry 18%,entry entry 60%}.piece-first .work{animation-duration:.76s,.24s,.52s;animation-timeline:auto,auto,auto;animation-timing-function:var(--ease-press), linear, var(--ease-press)}}.piece .work.is-in{--p:1!important;opacity:1!important;animation:none!important;translate:0!important}.unpacked.no-sda .piece .work{--p:0;opacity:0;transition:--p .76s var(--ease-press), opacity .24s linear, translate .52s var(--ease-press)}.unpacked.no-sda .piece-l .work{translate:-14vw}.unpacked.no-sda .piece-r .work{translate:14vw}.unpacked.no-sda .piece-first .work{--p:1;opacity:1;translate:0}@media (prefers-reduced-motion:reduce){.piece .work{--p:1!important;opacity:1!important;transition:none!important;animation:none!important;translate:0!important}.roll{display:none}}@keyframes unpacked-drift-l-m{0%{translate:-22vw}70%{translate:2.5vw}to{translate:0}}@keyframes unpacked-drift-r-m{0%{translate:22vw}70%{translate:-2.5vw}to{translate:0}}@media (max-width:640px){.unpacked{--hl:clamp(44px, 17vw, 90px);--gap:12vh;--rest:24vh;--ov:.1;--door-top:28vh}.unpacked.paper{--door-top:12vh;padding-top:74px}.unpacked .title{column-gap:12px;padding:0 4vw}.piece{padding:0}.piece-first{margin-top:1.5vh}.piece-first.piece-l{padding-left:var(--wx,12vw)}.piece .work{--h:min(70svh, calc(88vw / var(--ar)))}.piece-first .work{--h:min(50svh, calc((97vw - var(--wx,12vw)) / var(--ar)))}.piece-tall .work{--h:min(78svh, calc(84vw / var(--ar)))}.piece-duet-b{--ah:min(70svh, calc(88vw / var(--aar)))}.piece-duet-b.duet-a-tall{--ah:min(78svh, calc(84vw / var(--aar)))}.piece-duet-b.duet-cross:not(.piece-tall) .work{--h:min(46svh, calc(80vw / var(--ar)))}.piece-duet-b.duet-corner .work{--h:min(30svh, calc(44vw / var(--ar)))}.piece-coda{margin-top:7vh}.piece-coda-1 .work{--h:min(40svh, calc(70vw / var(--ar)))}.piece-coda-2 .work{--h:min(32svh, calc(50vw / var(--ar)))}.piece-coda-3 .work{--h:min(26svh, calc(40vw / var(--ar)))}.piece-coda-1.piece-l{padding-left:6vw}.piece-coda-2.piece-r{padding-right:18vw}.piece-coda-3.piece-l{padding-left:30vw}.piece-rest{margin-top:var(--rest)}.piece-l .caption{padding-left:4vw}.piece-r .caption{padding-right:4vw}.meta{max-width:74vw}.meta-description,.meta-comment{max-width:70vw}.page-sheet,.deckle,.door-sheet,.deckle-door{left:1.5vw;right:1.5vw}.page-sheet{top:62px}.deckle-top{top:36px}.roll{--s:clamp(16px, 5vw, 24px)}.door{padding-bottom:14vh;padding-left:5vw;padding-right:5vw}.unpacked.paper .piece-l .obj{transform:perspective(700px) rotateY(calc(180deg * (1 - var(--p))))}.unpacked.paper .piece-r .obj{transform:perspective(700px) rotateY(calc(-180deg * (1 - var(--p))))}@supports (animation-timeline:view()){.piece-l .work{animation-name:unpacked-unpack,unpacked-appear,unpacked-drift-l-m;animation-range:entry 10% cover 42%,entry entry 26%,entry entry 80%}.piece-r .work{animation-name:unpacked-unpack,unpacked-appear,unpacked-drift-r-m;animation-range:entry 10% cover 42%,entry entry 26%,entry entry 80%}.piece-duet-b .work{animation-range:entry cover 32%,entry entry 18%,entry entry 64%}}}