/* Warm cream separates the event questions from the green page. */
html.modal-open { overflow:hidden; }
dialog.event-modal { width:min(700px,calc(100vw - 24px)); height:min(700px,calc(100dvh - 32px)); max-height:none; max-width:none; padding:12px; border:0; border-radius:28px; overflow:hidden; background:var(--linen); box-shadow:4px 10px 30px rgba(28,23,16,.22); }
dialog.event-modal::backdrop { background:rgba(63,41,44,.4); }
.event-modal iframe { display:block; width:100%; height:100%; border:1px solid rgba(63,41,44,.2); border-radius:18px; }
.event-modal-close { position:absolute; right:18px; top:18px; z-index:2; width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--rule); background:var(--linen); color:var(--ink); border-radius:50%; font-size:26px; line-height:1; }
@media(hover:hover) { .event-modal-close:hover { background:#3F292C; color:#F1EBDF; border-color:#F1EBDF; box-shadow:inset 0 0 0 4px #3F292C, inset 0 0 0 5px #F1EBDF; } }
@media(max-width:480px) { dialog.event-modal { width:calc(100vw - 16px); height:calc(100dvh - 24px); padding:8px; } .event-modal-close { right:12px; top:12px; } }

/* Pin the host page while the iframe scrolls, including on mobile Safari. */
html.modal-open body { position:fixed; top:var(--modal-scroll-top,0); left:0; right:0; width:100%; }
.event-modal iframe { background:#F1EBDF; }
@media(min-width:700px) { dialog.event-modal { height:min(760px,calc(100dvh - 32px)); } }