/* Reuse the finished paper layouts, always showing the complete raster preview. */
.gallery-empty>.live-category{grid-column:1 / -1;min-width:0}
.live-category .gallery-works{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.live-category .gallery-work img,.home-work-paper img,.tile-paper img{object-fit:contain;background:var(--cream)}
.work-paper img{width:100%;height:auto;object-fit:contain}
#live-detail .work-paper:has(img){width:calc(100% - 14px);max-width:636px;justify-self:start}
.live-category [hidden],#live-status[hidden],.work-paper img[hidden]{display:none!important}
#live-status{margin:24px 0;overflow-wrap:anywhere}
/* Reserve the asynchronous gallery's first viewport, not guessed artwork proportions.
   Loading text is out of flow so its removal cannot move headings or filters. */
html:not([data-gallery-state]) #live-status{position:absolute;margin:0;padding:8px 0}
.page-intro:has(#live-status){position:relative}
html:not([data-gallery-state]) .page-intro #live-status{top:100%;left:0;font-size:14px}
.work-unavailable{padding:var(--page-top) 0 32px;max-width:760px}
.work-unavailable h1{font-size:var(--title-inner)}
.work-recovery{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:24px}
.work-recovery a{display:inline-flex;align-items:center;min-height:44px}
#live-detail{min-height:calc(100svh - 112px)}
html:not([data-gallery-state]) .live-category{min-height:70svh}
.image-error{display:block;margin:12px 0;max-width:70ch;font-size:14px;line-height:1.5}
.gallery-work figure,.home-work{position:relative}
.image-local-error{position:absolute;top:24px;left:24px;right:24px;z-index:2;max-height:calc(100% - 48px);overflow:auto;margin:0;padding:8px;background:var(--paper);color:var(--ink);font-size:14px}
.image-local-error>span{display:block}
.home-work>.image-local-error{top:16px;left:12px;right:20px;padding:4px;font-size:12px;line-height:1.3}
.image-retry{min-height:44px;background:none;border:0;color:var(--rust);font:inherit;cursor:pointer}
.image-retry:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.image-failed{color:transparent;font-size:0;background:var(--paper)}
.art-retry{align-self:center}
#live-status button,.live-category button{min-height:44px;cursor:pointer;background:none;border:0;font:inherit;color:var(--rust)}
.live-category .gallery-work p{white-space:pre-line;overflow-wrap:anywhere}
/* Focused inspection, with the same paper / ink vocabulary as the detail. */
.art-open{display:block;margin:12px auto 0;min-height:44px;padding:8px 16px;background:var(--paper);border:1px solid var(--line);color:var(--rust);font:inherit;cursor:zoom-in}
.art-viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:var(--paper);color:var(--ink);overflow:auto}
.art-viewer[open]{display:flex;flex-direction:column;gap:12px}
.art-viewer::backdrop{background:var(--ink)}
.art-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;flex-wrap:wrap}
/* Short zoomed viewports scroll vertically; neither the image nor controls collapse. */
.art-bar>*{min-width:0;max-width:100%}
.art-title{margin:0;font:normal clamp(18px,3vw,28px)/1.25 Georgia,serif;overflow-wrap:anywhere}
.art-viewer button,.art-back{min-width:44px;min-height:44px;padding:8px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.art-close{flex:none}
.art-viewer button,.art-open,.art-back{touch-action:manipulation}
.art-stage{position:relative;flex:1 0 120px;min-height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sand)}
.art-image{display:block;flex:none;max-width:none;max-height:none;width:auto;height:auto;object-fit:contain;user-select:none;transform-origin:center}
.art-stage{touch-action:none;overscroll-behavior:contain}
.art-stage.is-zoomed{cursor:grab}
.art-stage.is-zoomed:active{cursor:grabbing}
.art-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;flex:none}
.art-level{min-width:4.5em;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}
.art-hint{margin:0;text-align:center;font-size:13px;color:var(--muted);line-height:1.4;flex:none}
.art-viewer button:disabled{opacity:.5;cursor:default}
.art-viewer button:hover:not(:disabled){border-color:var(--rust);color:var(--rust)}
.art-message{margin:auto;max-width:38em;line-height:1.6}
.art-back{align-self:flex-start;display:inline-flex;align-items:center}
.art-viewer [hidden]{display:none!important}
.art-viewer :focus-visible,.art-open:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
@media(max-width:600px){.art-viewer{padding:12px;gap:8px}}