Extend HTML <dialog> backdrop to iPhone safe areas.

    <dialog
      ref={dialogRef}
      className="h-screen max-h-none w-screen max-w-none border-0 bg-transparent p-0 backdrop:bg-black/80"
      onClick={handleDialogClose}>
      <button className="absolute top-6 right-6 z-10 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/50 text-lg text-white transition-colors hover:text-gray-300">
        ✕
      </button>

      <div className="flex h-screen flex-col overflow-hidden">
        <div className="flex min-h-0 flex-1 items-center justify-center">
          {imageProps && (
            <Image
              placeholder="blur"
              blurDataURL={artwork.image?.asset?.metadata?.lqip ?? ''}
              onClick={(e) => e.stopPropagation()}
              src={imageProps.src}
              alt={artwork.title || ''}
              width={artwork.image?.asset?.metadata?.dimensions?.width ?? 1920}
              height={artwork.image?.asset?.metadata?.dimensions?.height ?? 1080}
              className="h-full w-auto max-w-full object-contain"
              priority
              style={{
                viewTransitionName: `artwork-${artwork._id}`,
              }}
            />
          )}
        </div>
        {/* Info overlay in dialog */}
        <div
          onClick={(e) => e.stopPropagation()}
          className="bg-black/70 p-6 text-center text-white">
          <h3 className="mb-2 text-xl">{artwork.title}</h3>
          <p className="text-lg font-light opacity-90">
            {artwork.style} • {artwork.year}
            {artwork.size ? ` • ${artwork.size}` : ''}
          </p>
        </div>
      </div>
    </dialog>