/* The hanging sign, its rope, and the details it opens over the blurred scene. */
.sign-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;visibility:hidden;transition:opacity .3s ease}
.details-open .sign-layer,.details-open #details-sign{opacity:0}
.sign-over{z-index:3}
.sign-rope{fill:none;stroke:#2a2a2a;stroke-linecap:round;stroke-linejoin:round}
.sign-hole{fill:#ffffff;stroke:#2a2a2a}
#details-sign{position:absolute;left:0;top:0;z-index:2;visibility:hidden;margin:0;padding:.56em 1.1em .63em;border:0;border-radius:.2em;background:#ffffff;color:#000000;box-shadow:inset 0 0 0 2px #000000,inset 0 0 0 .24em #ffffff,inset 0 0 0 calc(.24em + 1px) #000000;font-family:Caslon,serif;font-weight:400;line-height:1;letter-spacing:.045em;white-space:nowrap;cursor:pointer;transition:opacity .3s ease;transform-origin:50% 50%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#details-sign:hover{background:#ffffff}
#details-sign.held{cursor:grabbing}
#details-sign i{font-family:Instrument,serif;font-style:italic;letter-spacing:0;padding:0 .08em}
#details-sign:focus-visible,.details a:focus-visible,.details button:focus-visible{outline:2px solid #000000;outline-offset:4px}
#details-sign::after{content:'';position:absolute;inset:-10px}
@media (max-width:600px){#details-sign{padding:.46em .9em .52em;font-family:Instrument,serif;font-style:italic;letter-spacing:.01em}#details-sign i{padding:0 .04em}}
.details{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:12px;border:0;background:transparent;color:#000000;overflow:hidden}
.details[open]{display:flex;align-items:center;justify-content:center}
.details::backdrop{background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.details-box{position:relative;max-width:100%;max-height:100%;display:flex;--side:min(4.4em,8vw);font:400 clamp(20px,min(2.3vw,3.4vh),29px)/1.2 Caslon,serif}
.details-page{position:relative;z-index:1;box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:3.2em var(--side) 3em;text-align:center}
.details-page>*,.details-page dl>*{animation:focus-in .5s cubic-bezier(.2,.7,.2,1) calc(var(--line,0) * 40ms) backwards}
.details[open]::backdrop{animation:wash-in .5s ease}
.details.closing .details-page{animation:blur-out .2s ease forwards}
.details.closing::backdrop{animation:wash-out .2s ease forwards}
@keyframes focus-in{from{opacity:0;filter:blur(6px);transform:translateY(4px)}}
@keyframes blur-out{to{opacity:0;filter:blur(6px)}}
@keyframes wash-in{from{opacity:0}}
@keyframes wash-out{to{opacity:0}}
.details-page h2{margin:0;font:inherit}
.details-page h2:focus{outline:none}
.details-page p{margin:0}
.details-page i,.details-page dt{font-family:Instrument,serif;font-style:italic;font-size:1.03em}
.details-page .details-reply{margin-top:1.1em}
.details-rsvp{color:#000000;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.details-page dl{margin:1.1em 0 0;animation:none}
.details-page dt{margin-top:1.1em}
.details-page dt:first-child{margin-top:0}
.details-page dd{margin:0}
.details-close{display:block;width:30px;height:30px;margin:0 auto 1.1em;padding:0;border:0;background:none;cursor:pointer}
.details-close svg{display:block;width:100%;height:100%;fill:none;stroke:#000000;stroke-width:1.5}
@media (prefers-reduced-motion:reduce){.details-page>*,.details-page dl>*,.details[open]::backdrop,.details.closing .details-page,.details.closing::backdrop{animation:none}}
