*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{color:#59435a;background:#d5cde0;font-family:ui-sans-serif,system-ui,sans-serif}
img{max-width:100%;user-select:none;-webkit-user-drag:none}
.landing-page,.opening-mobile{position:relative;width:100%;height:100svh;height:100dvh;overflow:hidden}
.opening-mobile{isolation:isolate;background:linear-gradient(180deg,#a5889bb8,#8069799c),url('images/paper-lavender-v2.webp') center/cover no-repeat}
.opening-mobile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 9vw #66517020}
.curtain-stage{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.curtain-stage[hidden]{display:none}
.curtain-panel{position:absolute;top:0;bottom:0;width:50.1%;overflow:hidden;will-change:transform;filter:drop-shadow(0 8px 16px #37282a38);transform:translateX(0);transition:transform 1850ms cubic-bezier(.45,0,.14,1) 140ms}
.curtain-panel-left{left:0;transform-origin:left center}
.curtain-panel-right{right:0;transform-origin:right center}
.curtain-panel img{position:absolute;top:-1.5%;width:200%;max-width:none;height:104%;object-fit:fill}
.curtain-panel-left img{left:0}
.curtain-panel-right img{right:0}
.curtain-stage.is-open .curtain-panel-left{transform:translateX(-102%) scaleX(.86)}
.curtain-stage.is-open .curtain-panel-right{transform:translateX(102%) scaleX(.86)}
.curtain-open-button{position:absolute;left:50%;top:24%;width:clamp(132px,17vw,225px);padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;transform:translateX(-50%);transform-origin:50% -100px;filter:drop-shadow(0 9px 14px #31263338);transition:transform 550ms cubic-bezier(.3,0,.2,1),opacity 350ms ease;z-index:3}
.curtain-open-button img{display:block;width:100%;height:auto}
.curtain-open-button:hover{transform:translateX(-50%) rotate(-2deg)}
.curtain-open-button:focus-visible{outline:3px solid #7e607b;outline-offset:8px;border-radius:12px}
.curtain-button-string{position:absolute;bottom:90%;left:50%;width:2px;height:30vh;background:linear-gradient(#e2c994,#987842);box-shadow:1px 0 1px #fff8;transform:translateX(-50%)}
.curtain-stage.is-open .curtain-open-button{transform:translateX(-50%) translateY(-24px) rotate(3deg);opacity:0;pointer-events:none}
.theater-frame{position:absolute;inset:0;z-index:10;pointer-events:none}
.curtain-left,.curtain-right{position:absolute;top:-2%;width:36%;max-width:none;height:105%;object-fit:fill;filter:drop-shadow(0 8px 12px #55324c35)}
.curtain-left{left:-1.5%}
.curtain-right{right:-1.5%}
.mobile-layer{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity 1000ms ease}
.opening-mobile:not(.mobile-ready) .mobile-layer{opacity:0}
.hanger{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;z-index:2}
.swing-arm{position:relative;display:block;width:100%;transform-origin:50% 0;will-change:transform}
.pin{position:absolute;top:0;left:calc(50% + var(--attach,0px));z-index:5;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#ad935e;box-shadow:0 2px 4px #392d3c30}
.double-hung .pin-left{left:var(--left-string)}
.double-hung .pin-right{left:var(--right-string)}
.single-string{position:relative;display:block;width:18px;height:calc(var(--string) + var(--string-overlap,16px));margin-inline:auto;transform:translateX(var(--attach,0px))}
.double-string{position:relative;width:100%;height:calc(var(--string) + var(--string-overlap,16px))}
.double-string span{position:absolute;top:0;width:18px;height:100%;transform:translateX(-50%)}
.double-string span:first-child{left:var(--left-string)}
.double-string span:last-child{left:var(--right-string)}
.single-string::before,.double-string span::before{content:'';position:absolute;inset:0;background:linear-gradient(var(--string-color-top,#ded2ba),var(--string-color-bottom,#b88e54));clip-path:polygon(44% 0,56% 0,56% 100%,44% 100%);filter:drop-shadow(2px 2px 1px #5d465e25)}
.swing-arm img{display:block;width:100%;height:auto;margin-top:calc(0px - var(--string-overlap,16px));transform:rotate(var(--tilt,0deg));transform-origin:50% 8%;filter:drop-shadow(0 9px 7px #4e365b2b)}
.cloud{z-index:7;--string-overlap:20px}
.cloud .single-string::before,.cloud .double-string span::before{opacity:.55}
.letter{z-index:5;--string-overlap:24px}
.sun{z-index:8;padding:0;border:0;background:none;cursor:pointer;pointer-events:none;--string-overlap:90px}
.mobile-ready .sun{pointer-events:auto}
.sun:focus-visible{outline:2px solid #765573;outline-offset:8px;border-radius:50%}
.sun .swing-arm img{transition:transform 180ms ease;filter:drop-shadow(0 11px 9px #72533d2b)}
.sun.is-angry .swing-arm img{transform:rotate(var(--tilt,0deg)) scale(1.04)}
.dont-touch-callout{position:absolute;left:calc(var(--frame-inset) + var(--frame-side) + 6px);bottom:calc(var(--frame-inset) + var(--frame-bottom) + 12px);z-index:18;width:clamp(145px,24vw,230px);max-width:calc(100% - 2 * (var(--frame-inset) + var(--frame-side)) - 24px);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(18px) rotate(-4deg);filter:drop-shadow(0 6px 7px #4c365b30)}
.dont-touch-callout.is-showing{visibility:visible;animation:puppetPop 2600ms ease both}
@keyframes puppetPop{0%,100%{opacity:0;transform:translateY(18px) rotate(-4deg)}15%,82%{opacity:1;transform:translateY(0) rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.dont-touch-callout.is-showing{opacity:1;transform:none}}
.hanger.string-wiggle .single-string::before,.hanger.string-wiggle .double-string span::before{animation:stringWiggle 650ms ease}
@keyframes stringWiggle{0%,100%{clip-path:polygon(44% 0,56% 0,56% 100%,44% 100%)}30%{clip-path:polygon(44% 0,56% 0,68% 25%,45% 50%,65% 75%,56% 100%,44% 100%,53% 75%,33% 50%,56% 25%)}65%{clip-path:polygon(44% 0,56% 0,43% 25%,65% 50%,44% 75%,56% 100%,44% 100%,32% 75%,53% 50%,31% 25%)}}
.cloud-1{--x:10%!important;--w:min(15vw,190px)!important;--string:18dvh!important}
.cloud-2{--x:33%!important;--w:min(23vw,290px)!important;--string:22dvh!important}
.cloud-3{--x:59%!important;--w:min(14vw,185px)!important;--string:17dvh!important}
.letter-m{--x:13%!important;--w:min(12vw,165px)!important;--string:43dvh!important}
.letter-d{--x:26%!important;--w:min(11.5vw,160px)!important;--string:40dvh!important}
.letter-s{--x:39%!important;--w:min(12vw,165px)!important;--string:48dvh!important}
.letter-n{--x:52%!important;--w:min(11.5vw,162px)!important;--string:44dvh!important}
.sun{--x:68%!important;--w:min(25vw,365px)!important;--string:25dvh!important}
@media(max-width:760px) and (orientation:portrait){
 .curtain-open-button{top:26%;width:42vw;max-width:205px}
 .curtain-left,.curtain-right{width:43%}
 .curtain-left{left:-4%}.curtain-right{right:-4%}
 .cloud-1{--x:9%!important;--w:27vw!important;--string:20dvh!important}
 .cloud-2{--x:34%!important;--w:35vw!important;--string:15dvh!important}
 .cloud-3{--x:70%!important;--w:24vw!important;--string:24dvh!important}
 .letter-m{--x:10%!important;--w:19vw!important;--string:47dvh!important}
 .letter-d{--x:30%!important;--w:17vw!important;--string:44dvh!important}
 .letter-s{--x:48%!important;--w:19vw!important;--string:52dvh!important}
 .letter-n{--x:68%!important;--w:18vw!important;--string:48dvh!important}
 .sun{--x:50%!important;--w:43vw!important;--string:29dvh!important;--string-overlap:55px}
}
@media(max-height:550px) and (orientation:landscape){
 .cloud-1,.cloud-2,.cloud-3{--w:16dvh!important;--string:13dvh!important}
 .cloud-2{--w:24dvh!important}
 .letter-m,.letter-d,.letter-s,.letter-n{--w:24dvh!important}
 .sun{--w:43dvh!important;--string:22dvh!important;--string-overlap:40px}
 .curtain-open-button{top:20%;width:27dvh}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .curtain-stage{display:none}
 .mobile-layer{opacity:1!important}
 .sun{pointer-events:auto}
 .swing-arm{transform:none!important;will-change:auto}
}

/* Layered paper proscenium; all details remain inside the viewport. */
.opening-mobile{--frame-inset:0px;--frame-side:clamp(44px,14vw,180px);--frame-top:clamp(64px,20vw,120px);--frame-bottom:clamp(54px,17vw,100px)}
.theater-frame{z-index:22;inset:var(--frame-inset)}
.paper-proscenium{position:absolute;inset:0;border-style:solid;border-color:transparent;border-width:var(--frame-top) var(--frame-side) var(--frame-bottom);border-image-source:url('images/paper-theater-v6.webp');border-image-slice:240 140 220 140;border-image-repeat:stretch;border-image-outset:1px;filter:drop-shadow(0 2px 2px #54424c20)}
.stage-sign{position:absolute;top:calc(var(--frame-inset) + var(--frame-top) + 24px);left:50%;transform:translateX(-50%);z-index:12;width:max-content;max-width:70%;text-align:center;pointer-events:none;opacity:0;transition:opacity 900ms ease 450ms}
.stage-sign h1{margin:0;color:#685127;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(19px,1.7vw,27px);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 0 #fff9}
.stage-sign p{margin:8px 0 0;color:#66533f;font-size:clamp(8px,.7vw,10px);font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.mobile-ready .stage-sign{opacity:1}
.opening-mobile::after{box-shadow:inset 0 0 6vw #715a7120}
.swing-arm img{filter:drop-shadow(1px 2px 0 #755a6318) drop-shadow(0 7px 6px #4e365b25)}
.single-string::before,.double-string span::before{background:linear-gradient(180deg,#eadbcb,var(--string-color-bottom,#b88e54));opacity:.82}
.cloud-1{--x:13%!important;--string:28dvh!important}
.cloud-2{--string:31dvh!important}
.cloud-3{--string:27dvh!important}
.letter-m{--x:14%!important}
.letter-d{--x:27%!important}
.letter-s{--x:40%!important}
.letter-n{--x:53%!important}
.sun{--x:66%!important;--w:min(21vw,330px)!important}
@media(max-width:760px) and (orientation:portrait){
 .stage-sign{max-width:76%}
 .stage-sign h1{font-size:20px;letter-spacing:.16em}
 .stage-sign p{font-size:7px;letter-spacing:.1em;margin-top:6px}
 .cloud-1{--x:19%!important;--w:24vw!important;--string:28dvh!important}
 .cloud-2{--x:42%!important;--w:29vw!important;--string:31dvh!important}
 .cloud-3{--x:65%!important;--w:19vw!important;--string:34dvh!important}
 .letter-m{--x:18%!important;--w:18vw!important;--string:64dvh!important}
 .letter-d{--x:35%!important;--w:16vw!important;--string:59dvh!important}
 .letter-s{--x:50%!important;--w:17vw!important;--string:72dvh!important}
 .letter-n{--x:67%!important;--w:17vw!important;--string:66dvh!important}
 .sun{--x:44%!important;--w:39vw!important;--string:38dvh!important}
}
@media(max-height:550px) and (orientation:landscape){
 .opening-mobile{--frame-top:13dvh;--frame-bottom:12dvh;--frame-side:15dvh}
 .stage-sign{top:calc(var(--frame-inset) + var(--frame-top) + 8px)}
 .dont-touch-callout{width:34dvh}
 .cloud-1,.cloud-2,.cloud-3{--string:30dvh!important}
 .stage-sign h1{font-size:15px}
 .stage-sign p{display:none}
 .sun{--w:43dvh!important}
}
@media(prefers-reduced-motion:reduce){.stage-sign{opacity:1;transition:none}}

/* Handheld paper navigation signs, raised inside the stage opening. */
.stage-links{position:absolute;left:50%;bottom:calc(var(--frame-bottom) + 24px);z-index:13;display:flex;gap:clamp(18px,4vw,54px);justify-content:center;transform:translateX(-50%);visibility:hidden;pointer-events:none;max-width:calc(100% - 2 * var(--frame-side) - 20px)}
.stage-link{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;width:clamp(100px,14vw,164px);padding:12px 18px;border:1px solid #b69c71;color:#60472e;background:linear-gradient(#f7e9c6d9,#e9d4acd9),url('images/paper-lavender-v2.webp') center/cover;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(20px,2vw,28px);text-decoration:none;box-shadow:inset 0 0 0 4px #fff5,2px 5px 7px #46314730;border-radius:2px 5px 3px 2px;transform:translateY(90px) rotate(var(--sign-tilt));opacity:0;transition:transform 700ms cubic-bezier(.2,.8,.25,1.15),opacity 500ms ease;isolation:isolate}
.stage-link::before{content:'';position:absolute;top:calc(100% - 2px);left:calc(50% - 6px);width:12px;height:24px;z-index:-1;background:repeating-linear-gradient(92deg,#ab7b45 0 2px,#d6b183 3px 6px,#bb925f 7px 9px);border:1px solid #ab8159;box-shadow:2px 3px 3px #46314720}
.stage-link-tarot{--sign-tilt:-5deg;transition-delay:1900ms}
.stage-link-beads{--sign-tilt:4deg;transition-delay:2100ms;background:linear-gradient(#eddcc6df,#dbc4a9df),url('images/paper-lavender-v2.webp') center/cover}
.mobile-ready .stage-links{visibility:visible}
.mobile-ready .stage-link{transform:translateY(0) rotate(var(--sign-tilt));opacity:1}
.stage-links.is-ready{pointer-events:auto}
.stage-links.is-ready .stage-link{transition:transform 180ms ease,box-shadow 180ms ease}
.stage-links.is-ready .stage-link:hover,.stage-links.is-ready .stage-link:focus-visible{transform:translateY(-4px) rotate(0deg);box-shadow:inset 0 0 0 4px #fff5,2px 8px 10px #46314740}
.stage-link:focus-visible{outline:3px solid #745a85;outline-offset:6px}
.stage-link:active{transform:translateY(1px) rotate(0deg)!important}
@media(max-width:760px) and (orientation:portrait){.letter-s{--string:64dvh!important}.stage-links{gap:22px}.stage-link{width:104px;min-height:52px;padding:10px 16px;font-size:22px}.dont-touch-callout{bottom:calc(var(--frame-bottom) + 100px)}}
@media(max-height:550px) and (orientation:landscape){.stage-links{gap:24px;bottom:calc(var(--frame-bottom) + 20px)}.stage-link{width:116px;min-height:44px;padding:8px 16px;font-size:20px}.dont-touch-callout{left:auto;right:calc(var(--frame-side) + 8px);bottom:calc(var(--frame-bottom) + 18px)}}
/* Enter sign settles into a swing; clicking snaps its thread and drops it. */
.curtain-open-button{animation:enterDrop 900ms cubic-bezier(.18,.89,.32,1.18) 180ms both,enterSwing 3400ms ease-in-out 1080ms infinite;transform-origin:50% -120px}
.curtain-open-button img{transition:scale 150ms ease}
.curtain-open-button:hover img,.curtain-open-button:focus-visible img{scale:1.035}
.curtain-open-button:active img{scale:.96}
.curtain-stage.is-open .curtain-open-button{animation:enterFall 700ms cubic-bezier(.45,0,.88,.3) forwards;opacity:1}
.curtain-stage.is-open .curtain-button-string{animation:enterThreadBreak 360ms ease-in forwards}
@keyframes enterDrop{0%{opacity:0;transform:translateX(-50%) translateY(-140px) rotate(-3deg)}68%{opacity:1;transform:translateX(-50%) translateY(10px) rotate(2deg)}100%{opacity:1;transform:translateX(-50%) rotate(0)}}
@keyframes enterSwing{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg)}}
@keyframes enterFall{0%{opacity:1;transform:translateX(-50%) rotate(0)}28%{transform:translateX(-48%) translateY(18px) rotate(8deg)}100%{opacity:0;transform:translateX(-35%) translateY(115dvh) rotate(34deg)}}
@keyframes enterThreadBreak{0%{opacity:1;transform:translateX(-50%) rotate(0)}100%{opacity:0;transform:translateX(-50%) translateY(38px) rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.mobile-ready .stage-link{opacity:1;transform:rotate(var(--sign-tilt));transition:none}}

/* Composition measured from the approved paper-theater design. */
.opening-mobile{background:#a28b9e url('images/paper-mauve-v8.webp') center/cover no-repeat}
.opening-mobile::after{box-shadow:inset 0 0 8vw #50394d25}
.mobile-layer{width:min(100%,80dvh);left:50%;right:auto;transform:translateX(-50%);container-type:inline-size}
.stage-sign{top:14.6dvh;max-width:78%}
.stage-sign h1{font-size:clamp(20px,5.2vw,32px);letter-spacing:.16em;color:#685125}
.stage-sign p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(7.5px,1.95vw,11px);font-weight:400;letter-spacing:.18em;margin-top:7px;color:#594530}
.cloud-1{--x:15%!important;--w:24cqw!important;--string:29dvh!important}
.cloud-2{--x:37%!important;--w:24cqw!important;--string:38dvh!important}
.cloud-3{--x:59%!important;--w:22cqw!important;--string:27dvh!important}
.letter-m{--x:14%!important;--w:22cqw!important;--string:49dvh!important}
.letter-d{--x:36%!important;--w:18cqw!important;--string:60dvh!important}
.letter-s{--x:52%!important;--w:12cqw!important;--string:64dvh!important}
.letter-n{--x:68%!important;--w:18cqw!important;--string:62dvh!important}
.sun{--x:62%!important;--w:28cqw!important;--string:37dvh!important}
.double-string span:first-child{left:50%}
.double-string span:last-child{display:none}
.single-string::before,.double-string span::before{opacity:.72;clip-path:polygon(47% 0,53% 0,53% 100%,47% 100%)}
.swing-arm img{filter:drop-shadow(1px 2px 0 #755a6315) drop-shadow(1px 5px 4px #4e365b30)}
.stage-links{bottom:calc(var(--frame-bottom) - 3dvh);gap:clamp(18px,4vw,32px)}
.stage-link{width:clamp(104px,27vw,190px);min-height:44px;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none;filter:drop-shadow(1px 4px 4px #46314730)}
.stage-link::before{content:none}
.stage-link img{display:block;width:100%;height:auto;pointer-events:none}
.stage-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage-links.is-ready .stage-link:hover,.stage-links.is-ready .stage-link:focus-visible{box-shadow:none;filter:drop-shadow(1px 6px 5px #46314740)}
@media(orientation:portrait){
 .opening-mobile{--frame-top:15.625dvh;--frame-side:13.67vw;--frame-bottom:14.323dvh}
 .paper-proscenium{border:0;border-image:none;background:url('images/paper-theater-v6.webp') center/100% 100% no-repeat}
 .dont-touch-callout{bottom:calc(var(--frame-bottom) + 110px);width:clamp(125px,32vw,175px)}
}
@media(max-height:550px) and (orientation:landscape){
 .stage-sign{top:14dvh}.stage-sign h1{font-size:19px}.stage-sign p{display:none}
 .cloud-1,.cloud-2,.cloud-3{--w:18cqw!important}
 .cloud-1{--string:30dvh!important}.cloud-2{--string:39dvh!important}.cloud-3{--string:28dvh!important}
 .sun{--w:24cqw!important;--string:32dvh!important}
 .letter-d{--string:54dvh!important}
 .letter-s,.letter-n{--string:55dvh!important}
 .stage-link{width:clamp(95px,24dvh,130px)}
 .stage-links{bottom:calc(var(--frame-bottom) - 3dvh);gap:20px}
}
@media(min-width:761px) and (orientation:portrait){
 .letter-s{--string:60dvh!important}
 .letter-n{--string:58dvh!important}
}

/* Actual Mountains of Christmas lettering over blank paper placards. */
@font-face{font-family:'Mountains of Christmas';src:url('fonts/mountains-of-christmas-latin.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
.stage-link{container-type:inline-size}
.stage-link span{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);width:62%;height:auto;overflow:visible;clip-path:none;white-space:nowrap;text-align:center;font-family:'Mountains of Christmas',Georgia,serif;font-style:normal;font-weight:400;font-size:25cqw;line-height:1.1;letter-spacing:0;color:#50311f;text-shadow:0 1px 0 #fff2;pointer-events:none}