/* ---------- Modal: fills the whole page ---------- */
dialog {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;   /* override the browser's dialog insets */
  background: #fff; color: var(--ink);
  overflow: hidden;
}
dialog::backdrop { background: #fff; }   /* the browser's default is a grey veil, which showed as a grey band behind iPhone Safari's address bar */
dialog[open] { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }

/* the sheet takes the opening focus, so the X shows its focus outline only when reached by keyboard */
.sheet { outline: none; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); height: 100%; }
.stage {
  background: #f6f4f0;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 64px; min-height: 0; position: relative;   /* side room for the chevrons */
}
.stage img { max-width: 100%; max-height: calc(100dvh - 56px); object-fit: contain; box-shadow: 0 6px 24px rgba(0,0,0,.18); background: #fff; }
/* details panel: artist, title, a hairline, then medium/size and price; centred vertically beside the painting */
.info { padding: 56px 44px; overflow-y: auto; border-left: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: safe center; }
.info .artist { margin: 0; font: 400 11px/1 "Open Sans", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.info h2 { font: 400 32px/1.15 "Iowan Old Style", "Palatino Linotype", Georgia, serif; margin: 20px 0 0; text-wrap: balance; }
.info .details { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); font: 400 13px/1.6 "Open Sans", system-ui, sans-serif; letter-spacing: .04em; color: var(--muted); }
.info .details::first-letter { text-transform: uppercase; }
.info .price { margin: 8px 0 0; font: 400 19px/1.3 "Iowan Old Style", "Palatino Linotype", Georgia, serif; letter-spacing: .03em; font-variant-numeric: lining-nums; }

/* previous / next: bare thin chevrons in the margin beside the painting, drawn like the X (no circle, no background) */
.nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; font-size: 0; }
.nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border: solid var(--ink); border-width: 1.5px 1.5px 0 0; }
.nav.prev { left: 10px; } .nav.next { right: 10px; }
.nav.prev::before { translate: -25% -50%; rotate: -135deg; }
.nav.next::before { translate: -75% -50%; rotate: 45deg; }
/* close: a plus that turns into an X as the dialog opens (uiux's plusToX motion, rebuilt in CSS), no circle */
.close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; }
.close span, .close span::before { position: absolute; top: 50%; left: 50%; width: 24px; height: 1.5px; margin: -.75px 0 0 -12px; background: var(--ink); }
.close span { rotate: 45deg; }
.close span::before { content: ""; rotate: 90deg; }
dialog[open] .close span { animation: plus-to-x .45s cubic-bezier(.2,.8,.2,1) .15s backwards; }
@keyframes plus-to-x { from { rotate: 0deg; } }
.nav { top: 50%; transform: translateY(-50%); }
.nav.prev { left: 12px; } .nav.next { right: 12px; }
.close:focus-visible, .nav:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

/* full screen: the painting alone, as large as the screen allows, with the same X above it */
.stage img { cursor: zoom-in; }
dialog.zoom .sheet { display: block; overflow: hidden; }
dialog.zoom .info, dialog.zoom .nav { display: none; }
dialog.zoom .stage { height: 100%; box-sizing: border-box; padding: 56px; }   /* 56px keeps the X clear of the painting */
dialog.zoom .stage img { width: 100%; height: 100%; max-height: none; background: none; box-shadow: none; cursor: zoom-out; }   /* object-fit: contain enlarges it to the screen */
/* entering full screen: the painting eases in from slightly smaller and faint */
@media (prefers-reduced-motion: no-preference) { dialog.zoom .stage img { animation: zoom-in .9s cubic-bezier(.2,.7,.2,1); } }
@keyframes zoom-in { from { opacity: 0; scale: .955; } }

@media (max-width: 760px) {
  dialog.zoom .stage { padding: 56px 0; }   /* phones: edge to edge */
  .sheet { grid-template-columns: 1fr; overflow-y: auto; }
  .stage { padding: 60px 44px 16px; }
  .nav.prev { left: 0; } .nav.next { right: 0; }   /* room for the X above the painting */
  .stage img { max-height: 55vh; }
  .info { border-left: 0; border-top: 1px solid var(--rule); padding: 32px 22px; overflow: visible; }
}