/* css.slopped.site exhibit: A modal with no script. From css/exhibits/modal.mjs. */
.x-modal .modals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.x-modal .way h3 { font-size: 22px; letter-spacing: -.5px; }
.x-modal .way > p { margin: 8px 0 16px; max-width: 46ch; }
.x-modal .box { width: min(440px, calc(100vw - 32px)); padding: 26px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.x-modal .box h3 { font-size: 28px; }
.x-modal .box p { margin: 10px 0 18px; }
/* key */
/* popover: hidden until its button opens it; the browser puts it in the top layer */
.x-modal [popover] { margin: auto; inset: 0; height: max-content; }
.x-modal [popover]::backdrop { background: rgb(23 24 21 / .55); }

/* :target: the box is hidden until the URL's #fragment names it */
.x-modal .target-box { display: none; }
.x-modal .target-box:target {
  display: block; position: fixed; inset: 0; z-index: 20; margin: auto; height: max-content;
  outline: 100vmax solid rgb(23 24 21 / .55); /* a backdrop without an extra element */
}
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-popover .sup-no { display: none; }
@supports not selector(:popover-open) { .sup-popover .sup-yes { display: none; } .sup-popover .sup-no { display: inline; } .sup-popover { --sup: var(--no); } }
.sup-target .sup-no { display: none; }
@supports not selector(:target) { .sup-target .sup-yes { display: none; } .sup-target .sup-no { display: inline; } .sup-target { --sup: var(--no); } }