/* BITARD image viewer. The viewing field uses the same warm paper as the site
   chrome, so the left rail and enlarged image read as one continuous surface. */
.bitard-single-viewer{
  position:fixed;
  z-index:6200;
  top:0;
  right:0;
  bottom:0;
  background:var(--paper,#f5f5f2);
  overflow:visible;
  isolation:isolate;
}
/* A narrow paper bleed masks occasional 1px compositor/underlay edges in the
   intentional gap between the fixed rail and the standalone viewer canvas.
   It does not participate in hit-testing, so blank-paper click-to-BACK remains. */
body.bitard-single-viewing .bitard-single-viewer:not(.bitard-project-gallery-viewer)::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:-36px;
  width:36px;
  background:var(--paper,#f5f5f2);
  pointer-events:none;
}
.bitard-single-viewer__frame{
  position:absolute;
  z-index:1;
  inset:28px 30px 54px 30px;
  overflow:hidden;
}
/* JS assigns an exact decoded contain-rectangle before an image is revealed.
   Keeping the real image on that fixed stage removes the late intrinsic rescale
   that previously made large files appear to jump after loading. */
.bitard-single-viewer__image{
  position:absolute;
  display:block;
  max-width:none;
  max-height:none;
  margin:0;
  object-fit:contain;
  object-position:center center;
  opacity:0;
  will-change:opacity,transform;
}
.bitard-single-viewer.is-ready .bitard-single-viewer__image{opacity:1}
.bitard-single-viewer__close,
.bitard-single-viewer__arrow{
  appearance:none;
  border:0;
  background:var(--paper,#f5f5f2);
  color:var(--ink);
  font:inherit;
  cursor:pointer;
}
.bitard-single-viewer__close{
  position:absolute;
  z-index:4;
  top:var(--edge);
  right:var(--edge);
  padding:7px 9px 6px;
  font-size:10px;
  line-height:1;
  letter-spacing:.04em;
}
.bitard-single-viewer__meta{
  position:absolute;
  z-index:4;
  left:30px;
  bottom:18px;
  display:flex;
  align-items:baseline;
  gap:14px;
  max-width:calc(100% - 190px);
  font-size:9px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.bitard-single-viewer__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bitard-single-viewer__count{color:var(--muted);white-space:nowrap}
.bitard-single-viewer__nav{
  position:absolute;
  z-index:4;
  right:27px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:2px;
}
.bitard-single-viewer__arrow{
  width:34px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  font-size:17px;
  line-height:1;
}
.bitard-single-viewer__close:hover,
.bitard-single-viewer__arrow:hover{opacity:.52}
.bitard-single-flight{
  position:fixed;
  z-index:7000;
  pointer-events:none;
  display:block;
  max-width:none;
  margin:0;
  object-fit:cover;
  object-position:center center;
  will-change:left,top,width,height,opacity;
}
body.bitard-single-viewing,
body.bitard-project-gallery-viewing{overflow:hidden}

/* Case-study imagery uses the same viewer grammar. */
.bitard-project-page .bitard-project-hero__image,
.bitard-project-page .bitard-case-study img{cursor:zoom-in}
.bitard-project-gallery-viewer{
  z-index:6400;
  background:#f5f5f2!important;
}
/* Explicit opaque stage: the CASE itself is now a fixed scrolling layer, so
   the gallery needs its own painted surface rather than relying on whatever is
   underneath it. This prevents source images/text from showing through. */
.bitard-project-gallery-viewer::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:#f5f5f2;
  pointer-events:none;
}

/* CASE gallery footer sits on the same calmer lower rhythm as the fixed rail.
   Keep this scoped to project galleries so the standalone WORK image viewer
   retains its established spacing. */
.bitard-project-gallery-viewer .bitard-single-viewer__meta{bottom:24px}
.bitard-project-gallery-viewer .bitard-single-viewer__nav{bottom:20px}

@media (max-width:820px){
  .bitard-single-viewer__frame{inset:68px var(--edge) 58px var(--edge)}
  .bitard-single-viewer__meta{left:var(--edge);bottom:20px;max-width:calc(100% - 150px)}
  .bitard-single-viewer__nav{right:calc(var(--edge) - 5px);bottom:15px}
}

@media (max-width:620px){
  .bitard-single-viewer__frame{inset:64px 12px 58px 12px}
  .bitard-single-viewer__close{top:12px;right:12px;padding:7px 8px 6px;font-size:9px}
  .bitard-single-viewer__meta{left:12px;bottom:20px;gap:9px;max-width:calc(100% - 126px);font-size:8px}
  .bitard-single-viewer__nav{right:7px;bottom:14px}
  .bitard-single-viewer__arrow{width:31px;height:28px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .bitard-single-flight{display:none!important}
}