/* ---------------------------------------------------------------------------------
   THE EVENT POP-UP
   Used by the front page and the events page, so it carries its own colours and does not
   depend on either page's. Cream paper on a dimmed page, the flyer whole beside the facts.
   The middle scrolls and the buy bar stays put underneath, so a long description never
   hides the button. */
.hm-dlg {
  --d-paper: #f8f5ed; --d-paper-2: #f0eadc; --d-forest: #414b34; --d-forest-2: #333c28;
  --d-rust: #a64d2c; --d-ink: #201e18; --d-rule: rgba(32, 30, 24, .14);
  --d-display: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
  border: 0; padding: 0; width: min(1000px, calc(100vw - 32px)); max-height: min(88vh, 900px);
  background: var(--d-paper); color: var(--d-ink); border-radius: 6px; margin: auto; overflow: hidden;
  box-shadow: 0 40px 120px rgba(10, 14, 8, .55); font-family: var(--sans, 'Inter', system-ui, sans-serif);
}
.hm-dlg[open] { display: flex; flex-direction: column; animation: hm-dlg-in .35s cubic-bezier(.2, .7, .2, 1) both; }
.hm-dlg::backdrop { background: rgba(20, 24, 16, .72); backdrop-filter: blur(3px); }
@keyframes hm-dlg-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
body:has(.hm-dlg[open]) { overflow: hidden; }

.hm-dlg-x { position: absolute; top: 10px; right: 12px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--d-paper) 88%, transparent); color: var(--d-ink); font: 300 30px/1 var(--sans, sans-serif); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.hm-dlg-x:hover { background: var(--d-paper-2); }
.hm-dlg-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
.hm-dlg-grid.no-poster { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; width: 100%; }
.hm-dlg-poster { margin: 0; padding: 32px; background: var(--d-paper-2); }
.hm-dlg-poster img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 50px rgba(30, 24, 12, .28); position: sticky; top: 32px; }
.hm-dlg-poster.is-plate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 320px; background: var(--d-forest); color: #f4efe2; text-align: center; }
.hm-dlg-poster.is-plate::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(217, 201, 163, .4); pointer-events: none; }
/* the date plate, which the events page draws on its cards too */
.ec-pm { font: 600 11px/1 var(--sans, sans-serif); letter-spacing: .3em; text-transform: uppercase; color: #d9c9a3; }
.ec-pd { font: 500 clamp(76px, 9vw, 112px)/.95 var(--d-display, serif); letter-spacing: -.04em; margin: 6px 0 2px; }
.ec-pd.is-multi { font-size: clamp(44px, 5vw, 62px); letter-spacing: -.02em; }
.ec-pd.is-words { font-size: clamp(40px, 4.4vw, 56px); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.ec-pw { font: 400 12px/1 var(--sans, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 239, 226, .72); }
.hm-dlg-body { padding: 44px 44px 32px; }
.hm-dlg-eyebrow { margin: 0 0 10px; font: 600 10.5px/1.4 var(--sans, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: var(--d-rust); }
.hm-dlg-body h2 { margin: 0 0 22px; padding-right: 36px; font: 500 clamp(30px, 3.4vw, 42px)/1.05 var(--d-display); letter-spacing: -.02em; color: var(--d-ink); }
.hm-dlg-facts { margin: 0 0 24px; border-top: 1px solid var(--d-rule); }
.hm-dlg-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--d-rule); }
.hm-dlg-facts dt { font: 600 10.5px/1.7 var(--sans, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--d-rust); }
.hm-dlg-facts dd { margin: 0; font-size: 15px; line-height: 1.55; }
.hm-dlg-h { margin: 0 0 10px; font: 600 10.5px/1 var(--sans, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--d-rust); }
.hm-dlg-dates { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.hm-dlg-dates a { display: inline-block; padding: 10px 16px; border: 1px solid var(--d-forest); border-radius: 2px; color: var(--d-forest); font: 600 12px/1 var(--sans, sans-serif); letter-spacing: .08em; text-decoration: none; transition: background .2s, color .2s; }
.hm-dlg-dates a:hover { background: var(--d-forest); color: var(--d-paper); }
.hm-dlg-inc { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.hm-dlg-inc li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; }
.hm-dlg-inc li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--d-rust); }
.hm-dlg-text { font-size: 15px; line-height: 1.7; color: #4a463a; padding-top: 22px; border-top: 1px solid var(--d-rule); }
.hm-dlg-text p { margin: 0 0 12px; }
.hm-dlg-text strong { color: var(--d-ink); font-weight: 600; }
.hm-dlg-text .blurb-list { margin: 0 0 14px; padding: 0 0 0 1.1em; }
.hm-dlg-text .blurb-list li { margin: 0 0 4px; }
.hm-dlg .cal-extras { display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--d-rule); }
.hm-dlg .cal-extra h4 { margin: 0 0 6px; font: 600 10.5px/1.4 var(--sans, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--d-rust); }
.hm-dlg .cal-extra p { margin: 0 0 6px; font-size: 13.5px; color: #6b6657; }
.hm-dlg .cal-extra ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.55; }
.hm-dlg-cta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 32px; background: var(--d-paper); border-top: 1px solid var(--d-rule); }
.hm-dlg-cost { font-size: 13px; color: #6b6657; }
.hm-dlg-cost b { font: 500 30px/1 var(--d-display); color: var(--d-ink); margin-right: 8px; }
.hm-dlg-btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; background: var(--d-forest); color: var(--d-paper); border-radius: 2px; font: 600 11.5px/1 var(--sans, sans-serif); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.hm-dlg-btn:hover { background: var(--d-forest-2); }
@media (max-width: 760px) {
  .hm-dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .hm-dlg-grid, .hm-dlg-grid.no-poster { display: block; max-width: none; }
  .hm-dlg-poster { padding: 60px 20px 20px; }
  .hm-dlg-poster.is-plate { min-height: 0; padding: 72px 20px 36px; }
  .hm-dlg-poster.is-plate .ec-pd { font-size: 72px; }
  .hm-dlg-poster img { max-width: 320px; margin: 0 auto; position: static; }
  .hm-dlg-grid.no-poster .hm-dlg-body { padding-top: 64px; }
  .hm-dlg-body { padding: 24px 22px 28px; }
  .hm-dlg-inc { grid-template-columns: minmax(0, 1fr); }
  .hm-dlg-facts > div { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .hm-dlg-cta { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .hm-dlg-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hm-dlg[open] { animation: none; } }