/* ============================================================
   Exhibit viewer · GLOBAL viewing behavior. One source of truth
   for every artifact plate, enlarged graphic, screenshot and
   before/after comparison across JasonWalker.design.

   Doctrine: inspection first. When an exhibit opens it expands to
   use nearly the whole viewport, preserves aspect ratio, and
   scales until the viewport itself is the limiting factor. The
   artifact dominates; the modal frame recedes. Token-only, so it
   works on every page that links it.
   ============================================================ */

body.vcm-open{overflow:hidden}

/* plate hover / focus affordance (single-artifact pages) */
.mos-zoom{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-family:var(--font-system,'Inter',sans-serif);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blueprint);background:var(--paper);border:1px solid var(--line-2,rgba(19,21,63,.3));border-radius:5px;pointer-events:none;opacity:.85;transition:.2s}
.mos-plate:hover .mos-zoom,.mos-plate:focus-visible .mos-zoom{opacity:1;background:var(--blueprint);color:#fff;border-color:var(--blueprint)}

/* overlay · tight safe margin only */
.vcm{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(8px,1.4vw,18px)}
.vcm[hidden]{display:none}
.vcm-backdrop{position:absolute;inset:0;background:rgba(19,21,63,.8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* panel · nearly the whole viewport, minimal chrome, no artificial caps */
.vcm-panel{position:relative;z-index:1;width:97vw;height:96vh;max-width:none;max-height:none;overflow:hidden;background:var(--paper);border-radius:8px;padding:8px 10px 6px;box-shadow:0 30px 80px -30px rgba(19,21,63,.6);display:flex;flex-direction:column}
.vcm-close{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:6px;border:1px solid var(--line);background:var(--paper);font-size:23px;line-height:1;color:var(--ink);cursor:pointer;transition:.2s;z-index:3}
.vcm-close:hover{background:var(--ink);color:var(--paper)}
/* visible focus for every keyboard stop: close button + scroll regions */
.vcm-close:focus-visible,.vcm-stage:focus-visible,.vcm-scroll:focus-visible{outline:2px solid var(--blueprint);outline-offset:2px}

/* curated sequence · prev/next + position. Inert unless a grouped exhibit is
   open (body gets no class; the modal gets .vcm-has-seq). Restrained, blueprint
   language — appears on hover for pointers, always visible on touch + focus. */
.vcm-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:none;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;z-index:4;opacity:0;transition:opacity .2s,background .2s,color .2s}
.vcm-has-seq .vcm-nav{display:inline-flex}
.vcm-prev{left:14px}
.vcm-next{right:14px}
.vcm-panel:hover .vcm-nav{opacity:.9}
.vcm-nav:hover{background:var(--ink);color:var(--paper);opacity:1}
.vcm-nav:focus-visible{opacity:1;outline:2px solid var(--blueprint);outline-offset:2px}
.vcm-seqcount{display:none;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);margin:0;font-family:var(--font-system,'Inter',sans-serif);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-light);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:5px 14px;z-index:4}
.vcm-has-seq .vcm-seqcount{display:block}
/* touch devices have no hover, so keep the controls legible while open */
@media (hover:none){.vcm-has-seq .vcm-nav{opacity:.92}}
@media (prefers-reduced-motion:reduce){.vcm-nav{transition:none}}

/* compact caption bar · visible but it must not steal viewing area */
.vcm-title{flex:none;font-family:var(--font-system,'Inter',sans-serif);font-weight:600;font-size:clamp(11px,1.2vw,13px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin:2px 52px 6px 6px}

/* single-artifact stage · SVG plates and single images.
   The stage is a definite-size box; the SVG fills it and its own
   viewBox (preserveAspectRatio meet) scales the drawing as large
   as possible without clipping. Images use object-fit: contain. */
.vcm-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;border:1px solid rgba(19,21,63,.14);border-radius:6px;background:var(--paper-2);padding:6px}
.vcm-stage svg{display:block;width:100%;height:100%;margin:auto}
.vcm-stage img{display:block;width:100%;height:100%;object-fit:contain;margin:auto}

/* before / after comparison · two columns fill the panel, full-height,
   each screenshot scrollable so the whole length stays inspectable */
.vcm-pair{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vcm-frame{margin:0;display:flex;flex-direction:column;min-height:0}
.vcm-cap{flex:none;font-family:var(--font-system,'Inter',sans-serif);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.vcm-scroll{flex:1;min-height:0;overflow:auto;display:grid;border:1px solid rgba(19,21,63,.14);border-radius:6px;background:var(--paper-2)}
.vcm-shot{display:block;width:100%;height:auto;margin:auto}

/* tablet · effectively full viewport already via 97vw/96vh */

/* mobile · near full-screen, respecting device safe areas */
@media (max-width:760px){
  .vcm{padding:0}
  .vcm-panel{width:100vw;height:100vh;height:100dvh;border-radius:0;
    padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .vcm-close{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
  .vcm-pair{grid-template-columns:1fr;overflow:auto}
  .vcm-scroll{flex:none;height:72vh}
  /* inspection mode · readability over fitting. The artifact opens at a
     legible scale (≈0.78 of its native 1280 canvas) and may exceed the
     viewport; the stage pans. flex-start keeps every edge reachable when
     content overflows (centered overflow would clip the top/left). */
  .vcm-stage{justify-content:flex-start;align-items:flex-start}
  .vcm-stage svg,.vcm-stage img{width:max(100%,1000px);height:auto;max-width:none}
}

@media (prefers-reduced-motion:reduce){.vcm-close,.mos-zoom{transition:none}}