[data-artwork-control] { cursor: zoom-in; }
[data-artwork-control]:focus-visible { outline: 2px solid #e0d2b8; outline-offset: -3px; }
@media (hover: hover) { [data-artwork-control]:hover { filter: brightness(1.04); } }
.artwork-destination { display: block; color: inherit; text-decoration: none; }
.artwork-modal {
    position: fixed; inset: 0; box-sizing: border-box;
    width: 100%; height: 100%; height: 100dvh;
    max-width: none; max-height: none; margin: 0; padding: 64px 16px 24px;
    border: 0; background: transparent; color: #fff; overflow: hidden;
}
.artwork-modal[open] { display: flex; align-items: center; justify-content: center; }
.artwork-modal::backdrop { background: rgba(0,0,0,.88); }
.artwork-modal img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; border: 0; border-radius: 0; box-shadow: none;
}
.artwork-modal-close {
    position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
    width: 48px; height: 48px; padding: 0; border: 0; background: #111;
    color: white; font: 36px/1 Arial, sans-serif; cursor: pointer; border-radius: 4px;
}
.artwork-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.artwork-modal-status { position: absolute; bottom: 8px; margin: 0; color: #ccc; font: 14px Arial,sans-serif; }