/* A public viewing, one full painting at a time. */
.spotlight{max-width:1800px;margin:0 auto;padding:0 24px}
.painting-open{position:relative;display:block;width:100%;padding:0;border:0;background:#f0f0e9;cursor:zoom-in;color:var(--ink)}
.painting-open:disabled{cursor:wait}
.painting-open img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;visibility:hidden}
.painting-open img[data-ready=true]{visibility:visible}
.enlarge-hint{position:absolute;bottom:18px;right:18px;padding:7px 13px;background:var(--paper);font-size:12px}
.painting-open:disabled .enlarge-hint{display:none}
.spotlight-caption{align-items:center;gap:24px;padding:22px 24px 10px}
.painting-label .eyebrow{margin:0 0 7px;font-size:9px}
.painting-label h2{font-size:28px;letter-spacing:-.5px;overflow-wrap:anywhere}
.painting-controls{display:flex;align-items:center;gap:17px;flex-shrink:0}
.painting-position{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.painting-arrow,.spotlight-caption .painting-arrow{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;padding:0;border:1px solid var(--line);background:transparent;color:var(--ink);text-decoration:none;font-size:25px;line-height:1;cursor:pointer;border-radius:50%}
.painting-arrow:hover,.spotlight-caption .painting-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.painting-arrow:disabled{opacity:.35;cursor:default}
#painting-status{margin:0 24px;min-height:21px;font-size:11px}
.preview-note{margin:28px 24px 0;padding-top:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.1fr 1fr;gap:60px}
.preview-note p{margin:0;max-width:62ch;font-size:14px}
.preview-note strong{display:block;font-weight:600;margin-bottom:4px}
.preview-note .quiet{font-size:13px}
.painting-is-open{overflow:hidden}
#dog-dialog{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px);max-height:none;overflow:hidden;margin:auto;padding:0;background:var(--paper)}
#dog-dialog::backdrop{background:rgba(19,22,18,.88)}
.viewing-room{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:22px 28px;gap:16px}
.viewing-header{display:flex;align-items:center;justify-content:space-between;gap:25px}
.viewing-header .eyebrow{margin:0 0 5px;font-size:9px}
.viewing-header h2{font-size:28px;letter-spacing:-.5px;overflow-wrap:anywhere}
.viewing-art{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.viewing-art img{display:block;width:100%;height:100%;object-fit:contain}
.viewing-footer{padding:14px 0 0!important;display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);font-size:12px}
.viewing-footer p{margin:0;font-size:12px;line-height:1.5}
.viewing-links{display:flex;flex-direction:column;gap:9px;align-items:end;font-size:12px}
@media(max-width:650px){
  .spotlight{padding:0}
  .spotlight-caption{padding:18px 20px 10px;gap:12px}
  .painting-label h2{font-size:23px}
  .painting-label .eyebrow{font-size:8px;letter-spacing:1px}
  .painting-controls{gap:10px}
  .painting-arrow,.spotlight-caption .painting-arrow{width:44px;height:44px}
  .painting-position{font-size:11px}
  .enlarge-hint{bottom:10px;right:10px;padding:5px 9px;font-size:10px}
  #painting-status{margin:0 20px}
  .preview-note{display:block;margin:22px 20px 0;padding-top:20px}
  .preview-note .quiet{margin-top:12px}
  #dog-dialog{width:100vw;height:100dvh;max-height:100dvh}
  .viewing-room{padding:18px 16px;gap:12px}
  .viewing-header h2{font-size:24px}
  .viewing-header .eyebrow{letter-spacing:1px}
  .viewing-footer{display:grid;grid-template-columns:1fr auto;gap:14px}
  .viewing-links{gap:8px;font-size:10px}
  .viewing-footer>p{grid-column:1/-1;grid-row:2;font-size:11px;text-align:center}
}
@media(max-height:480px) and (orientation:landscape){
  .viewing-room{padding:8px 16px;gap:6px}
  .viewing-header .eyebrow,.viewing-footer>p{display:none}
  .viewing-header h2{font-size:20px}
  .viewing-header .painting-arrow,.viewing-footer .painting-arrow{width:36px;height:36px}
  .viewing-footer{padding-top:7px!important}
  .viewing-links{flex-direction:row;gap:18px}
}