/* Shared material details: text explains the choice; the image shows the edge. */
.em-note { font-size: 14px; line-height: 1.5; color: var(--muted, #555555); }
.em-dialog { width: min(1040px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); border: 0; padding: 0; color: var(--ink); background: var(--bg); }
.em-dialog::backdrop { background: rgb(0 0 0 / .6); }
.em-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 28px; line-height: 1; }
.em-close:hover { background: var(--ocean); }
.em-close:active { transform: scale(.95); }
.em-dialog-layout { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 440px; }
.em-dialog-visual { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 28px; background: var(--surface); min-width: 0; }
.em-dialog-visual img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.em-dialog-visual figcaption { font-size: 14px; line-height: 1.5; padding-top: 20px; color: var(--muted); }
.em-dialog-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 72px 36px 36px; }
.em-dialog-copy h2 { font-size: 32px; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.em-dialog-copy p, .em-dialog-copy li { font-size: 16px; line-height: 1.5; }
.em-dialog-copy ul { display: grid; gap: 16px; padding-left: 20px; list-style: disc; }
.em-dialog-copy .em-note { font-size: 14px; }
.em-dialog-copy .button { margin-top: auto; }
@media (max-width: 700px) {
  .em-dialog-layout { grid-template-columns: 1fr; }
  .em-dialog-visual { padding: 56px 20px 20px; }
  .em-dialog-visual img { max-height: 240px; }
  .em-dialog-copy { padding: 28px 24px; gap: 20px; }
  .em-dialog-copy h2 { font-size: 28px; }
  .em-dialog-copy .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .em-dialog * { transition: none; } }