/* The roll hangs from the hero artwork rather than occupying a page section. */
.paper-pull-widget{--roll-width:110px;position:absolute;z-index:7;top:22%;right:-.65rem;width:var(--roll-width);pointer-events:none;color:var(--ink)}
.roll-stage{--pull:0px;--progress:0;position:relative;width:100%;height:calc(var(--roll-width)*.78 + 120px);isolation:isolate}
.pull-caption{position:absolute;top:-7px;right:7px;padding:3px 6px;background:var(--ink);color:var(--paper);font:700 .5rem/1.4 var(--mono);white-space:nowrap;transform:rotate(5deg);box-shadow:2px 2px 0 #0a239550}
.roll-assembly{position:absolute;top:18px;left:0;width:100%;height:calc(var(--roll-width)*.58)}
.pull-roll{position:relative;z-index:2;width:100%;height:auto;overflow:visible;filter:drop-shadow(3px 4px 0 #10277b88);transform:rotate(calc(-7deg + var(--progress)*-6deg));transition:transform .45s var(--ease)}
.hanging-paper{position:absolute;top:calc(var(--roll-width)*.43);left:36%;width:42%;height:calc(var(--roll-width)*.42 + var(--pull));background:linear-gradient(90deg,#d7ddf7,#fffdf2 16%,#fffdf2 80%,#d4d8f3);border-inline:1px solid #b6c0e6;filter:drop-shadow(3px 4px 0 #10277b66);transform-origin:top;transition:height .45s var(--ease);clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),90% 100%,80% calc(100% - 4px),70% 100%,60% calc(100% - 4px),50% 100%,40% calc(100% - 4px),30% 100%,20% calc(100% - 4px),10% 100%,0 calc(100% - 4px))}
.hanging-paper i{position:absolute;left:0;width:100%;height:1px;border-top:1px dashed #9ca8d5}.hanging-paper i:nth-child(1){top:30%}.hanging-paper i:nth-child(2){top:62%}.hanging-paper i:nth-child(3){top:92%}
.pull-tab{position:absolute;z-index:3;top:calc(18px + var(--roll-width)*.78 + var(--pull));left:57%;transform:translateX(-50%) rotate(5deg);display:flex;align-items:center;justify-content:center;gap:.4rem;width:calc(var(--roll-width)*.48);min-width:54px;min-height:44px;padding:0 4px;background:var(--yellow);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink);font:700 .55rem var(--mono);cursor:grab;touch-action:none;user-select:none;pointer-events:auto;transition:top .45s var(--ease),box-shadow .2s}
.pull-tab>span:last-child{font-size:1.1rem}.pull-tab:hover{box-shadow:5px 5px 0 var(--ink)}
.is-pulling .pull-tab{cursor:grabbing;box-shadow:2px 2px 0 var(--ink)}
.is-pulling .pull-tab,.is-pulling .hanging-paper,.is-pulling .pull-roll{transition:none}
.paper-reset{position:absolute;top:calc(18px + var(--roll-width)*.78 + 54px);left:57%;transform:translateX(-50%) rotate(-4deg);min-height:44px;min-width:72px;padding:3px 6px;background:var(--paper);border:1px solid var(--ink);box-shadow:2px 2px 0 var(--ink);color:var(--ink);font:700 .48rem var(--mono);pointer-events:auto;white-space:nowrap}
.paper-reset:not([hidden]){display:flex;align-items:center;justify-content:center;gap:4px}.paper-reset span{font-size:1rem}.paper-reset:hover{background:var(--yellow)}
.paper-pull-widget.is-papered .pull-caption{background:var(--yellow);color:var(--ink)}
.paper-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:640px){.paper-pull-widget{--roll-width:130px;top:36%;right:-1.4rem}}
@media(min-width:1024px){.paper-pull-widget{--roll-width:150px;top:45%;right:-2.2rem}.pull-caption{font-size:.55rem}.pull-tab{font-size:.6rem}}

/* One continuous sheet wraps the control. Labels stay above its shaded folds. */
.paper-wrap-host{isolation:isolate}
.paper-wrap-positioned{position:relative}
.paper-wrapped{color:var(--ink)}
.paper-wrap-host>svg.button-paper{opacity:1}
.menu-button.paper-wrapped[aria-expanded=true]>span:last-of-type{transform:translateY(-4px) rotate(-45deg)}
.pull-tab.paper-wrapped>span:last-of-type{font-size:1.1rem}
.button-paper{position:absolute;left:-12px;top:-8px;z-index:-1;display:block;max-width:none;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 2px #14244b29);transform:none!important;animation:paper-sleeve-in .65s var(--ease) both}
.paper-curl{transform-box:fill-box;transform-origin:top center;animation:paper-curl-in .8s .2s var(--ease) both}
.paper-wrapped:hover .button-paper{filter:drop-shadow(0 3px 3px #14244b35)}
.motion-paused .button-paper,.motion-paused .paper-curl{animation:none!important}
@keyframes paper-sleeve-in{from{clip-path:inset(-10px 105% -20px -10px)}to{clip-path:inset(-10px -10px -20px -10px)}}
@keyframes paper-curl-in{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.button-paper,.paper-curl{animation:none!important}}