/* Where To Stay — shared motion layer for the inner pages */
:root{--e:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.76,0,.24,1)}
.s-w{display:inline-block}
html.s-js [data-split]:not(.s-split){visibility:hidden}
html.s-js [data-split] .s-w{transform:translateY(112%);clip-path:inset(-30% -14% 112% -14%);transition:transform 1.3s var(--e),clip-path 1.3s var(--e);transition-delay:var(--d,0s)}
html.s-js [data-split].on .s-w{transform:none;clip-path:inset(-30% -14% -40% -14%)}
html.s-js .s-in{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--e),transform 1.4s var(--e);transition-delay:var(--d,0s)}
html.s-js .s-in.on{opacity:1;transform:none}

/* nav */
.s-nav{position:sticky;top:0;z-index:50;box-sizing:border-box;background:rgba(243,235,221,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .6s var(--e),box-shadow .4s}
.s-nav.hide{transform:translateY(-100%)}
.s-nav.stuck{box-shadow:0 12px 30px -24px rgba(34,32,28,.55)}
.s-prog{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#D9B26A;transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:760px){.s-navlink{display:none}}

/* hanging ornaments */
.s-orn{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;align-self:flex-start;margin-top:-20px;margin-right:clamp(0px,4vw,60px)}
@media (max-width:900px){.s-orn{display:none!important}}
.s-pin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F8E6B6,#B88A3E 70%);box-shadow:0 3px 6px rgba(0,0,0,.3);position:relative;z-index:2}
.s-swing{transform-origin:50% 0;display:flex;flex-direction:column;align-items:center;margin-top:-8px;will-change:transform;cursor:grab}
.s-cord{width:1.5px;height:30px;background:#B88A3E}
.s-tagface{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 30px 22px;border-radius:40px 40px 6px 6px;box-shadow:0 30px 50px -26px rgba(34,32,28,.55);min-width:150px;box-sizing:border-box;text-align:center}
.s-hole{width:12px;height:12px;border-radius:50%;background:#F3EBDD;margin-bottom:4px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.s-tlabel{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.s-tnum{font-family:'Bodoni Moda',serif;font-variation-settings:'opsz' 18;font-weight:900;font-size:64px;line-height:.9}
.s-trule{width:44px;height:1px;background:currentColor;opacity:.35;margin:4px 0}
html.s-js .s-orn .s-swing.s-drop{translate:0 -60px;opacity:0;transition:translate 1.2s cubic-bezier(.34,1.5,.64,1),opacity .6s var(--e);transition-delay:.35s}
html.s-js .s-orn.on .s-swing.s-drop{translate:0 0;opacity:1}
.s-swing.fall{transition:translate 1.1s cubic-bezier(.55,0,.9,.45),opacity .9s ease-in .3s!important;translate:0 110vh!important;opacity:0!important}
.s-returned{margin-top:18px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#1E4A4C;opacity:0;transition:opacity .8s var(--e)}
.s-returned.on{opacity:1}

/* door hanger (404) */
.s-hangerface{width:250px;padding:0 26px 30px;box-sizing:border-box;border-radius:10px;background:#D9B26A;color:#22201C;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 34px 60px -28px rgba(0,0,0,.6)}
.s-hangerhole{width:84px;height:84px;margin-top:-1px;border-radius:0 0 42px 42px;background:var(--bg,#1E4A4C);display:flex;align-items:flex-end;justify-content:center}
.s-hangerhole i{display:block;width:48px;height:48px;border-radius:50%;background:var(--bg,#1E4A4C);margin-bottom:-10px}
.s-hangert{font-family:'Bodoni Moda',serif;font-variation-settings:'opsz' 18;font-weight:900;font-size:40px;line-height:.95}

/* service bell (thanks-message) */
.s-sbell{position:relative;flex:none;align-self:center;width:240px;height:170px;border:0;background:none;padding:0;cursor:pointer;margin-right:clamp(0px,4vw,60px)}
@media (max-width:900px){.s-sbell{display:none}}
.s-sbell .k{position:absolute;left:50%;top:14px;width:18px;height:20px;margin-left:-9px;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#8A6526,#F2DDA4 45%,#A57E3A);transition:transform .12s}
.s-sbell .dm{position:absolute;left:50%;top:30px;width:180px;height:92px;margin-left:-90px;border-radius:90px 90px 4px 4px;background:radial-gradient(ellipse at 34% 26%,#FFF3D2 0,#E9CF8C 18%,#B88A3E 55%,#7A5A22 100%);box-shadow:inset 0 -6px 12px rgba(60,35,10,.35);transform-origin:50% 100%}
.s-sbell .bs{position:absolute;left:50%;top:120px;width:220px;height:18px;margin-left:-110px;border-radius:4px;background:#22201C;box-shadow:0 20px 30px -16px rgba(0,0,0,.6)}
.s-sbell .wv{position:absolute;left:50%;top:76px;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;border:1.5px solid #B88A3E;opacity:0;pointer-events:none}
.s-sbell.ding .k{transform:translateY(5px)}
.s-sbell.ding .dm{animation:sShake .6s var(--e)}
.s-sbell.ding .wv{animation:sWave 1.2s var(--e)}
.s-sbell.ding .wv.b{animation-delay:.18s}
@keyframes sShake{0%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(2.4deg)}60%{transform:rotate(-1.4deg)}80%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
@keyframes sWave{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.9)}}

/* cursor label + magnetic */
.s-ctag{position:fixed;left:0;top:0;z-index:151;pointer-events:none;font-family:'DM Mono',monospace;font-weight:500;font-size:9.5px;line-height:1;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:#F3EBDD;background:#22201C;padding:7px 10px 6px;opacity:0;scale:.85;transform-origin:0 0;transition:opacity .2s,scale .35s var(--e)}
.s-ctag.show{opacity:1;scale:1}
html.s-scrolling .s-ctag{opacity:0}
[data-magnetic]{transition:translate .7s var(--e),background .3s,color .3s}
