/* v188 page-local (2D only): the opened 2D room mirrors the Viewing Room
   (viewing-room/available-work-v180.css) except the square format.
   - No top Close row. "Look at other work" sits at the bottom of the copy
     column in the Viewing Room .av-shop position and style.
   - Stills and videos stay SQUARE and flush: no .av-fig-hero padding or
     drop-shadow (shadow is for the unframed sheet on the Viewing Room only).
   - Spacing: Viewing Room .av padding-top 36px under the header, art top at
     +8px (VR hero padding-top), copy 40px under the art when stacked,
     actions 0 0 36px, side-by-side grid at 900px+.
   - Arrows: stacked (<900px) under the info, after "Look at other work";
     side-by-side (900px+) under the piece. JS placeArrows() moves them.
   Loaded only by /2d/. Does not change shared header CSS or the Viewing Room. */

html body .lb-x{display:none!important}

/* Stacked default (phone / iPad portrait) */
.lb .lb-inner{
  padding-top:calc(var(--h60-height,84px) + 36px);
  padding-bottom:max(80px,env(safe-area-inset-bottom));
}
.lb .lb-stage{margin:0 auto;max-width:820px;padding:8px 0 0}
.lb .lb-fig,.lb .lb-fig.av-fig-hero{padding:0}
.lb .lb-fig img,.lb .lb-fig video{filter:none}
/* width:100% so the grid item fills to 28em like VR's block .av-copy (auto margins alone shrink-wrap a grid item) */
.lb .lb-copy.av-copy{width:100%;max-width:28em;margin:40px auto 0}
.lb .av-actions{margin:0 0 36px}

/* "Look at other work" — Viewing Room .av-shop link, as a button that closes the room */
.lb .av-shop{margin:0}
.lb .av-shop .lb-back-btn{
  -webkit-appearance:none;appearance:none;display:inline;margin:0;
  padding:0 0 1px;background:none;border:0;border-bottom:1px solid #ccc;border-radius:0;
  color:#555;font:400 14px/1.5 "Bodoni Moda",Georgia,serif;letter-spacing:0;
  text-transform:none;text-decoration:none;text-align:start;cursor:pointer;
}
.lb .av-shop .lb-back-btn:hover,.lb .av-shop .lb-back-btn:focus-visible{color:#111;border-color:#111;outline:none;background:none}

/* Stacked: arrows after the copy (after "Look at other work") */
.lb .lb-room > .lb-arrows{margin:20px 0 0}

/* Click-to-zoom on stills (Viewing Room .av-zoom). Videos are never wrapped. */
.lb .lb-zoom.av-zoom{all:unset;display:block;width:100%;cursor:zoom-in;box-sizing:border-box}
.lb .lb-zoom.av-zoom[hidden]{display:none!important}
.lb .lb-zoom.av-zoom:focus-visible{outline:1px solid #111;outline-offset:4px}

/* Larger view (Viewing Room .av-lb), no drop-shadow for squares */
.lb-zv[hidden]{display:none!important}
.lb-zv{position:fixed;inset:0;z-index:9700;isolation:isolate;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.lb-zv img{display:block;max-width:100%;max-height:calc(100vh - 80px);object-fit:contain;object-position:center;background:transparent;filter:none}
.lb-zv-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));font:400 13px/1 "Bodoni Moda",Georgia,serif;letter-spacing:.04em;color:#111;background:#fff;border:1px solid #111;padding:10px 14px 9px;cursor:pointer}
.lb-zv:focus,.lb-zv:focus-visible{outline:none}

@media(min-width:900px){
  .lb .lb-inner{padding:calc(var(--h60-height,90px) + 36px) var(--lb-pad) 80px}
  .lb .lb-room{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,0.8fr);column-gap:64px;align-items:start}
  .lb .lb-stage{margin:0;max-width:none;padding:8px 0 0;position:sticky;top:calc(var(--h60-height,90px) + 28px)}
  .lb .lb-zoom.av-zoom{width:auto;max-width:100%}
  /* VR caps art at 100dvh - 120px. Squares: width = min(column, that cap), centered. */
  .lb .lb-fig img,.lb .lb-fig video{width:min(100%,calc(100dvh - 120px));max-width:100%;height:auto;max-height:calc(100dvh - 120px);object-fit:contain;margin-inline:auto}
  .lb .lb-copy.av-copy{margin:8px 0 0;max-width:none}
  .lb .lb-stage > .lb-arrows{margin:2px 0 0}
}