/* Media lightbox — shared by blog posts and case studies.
   lightbox.js opens any .bl-body figure's image (click) or video (expand button)
   in a single <dialog class="lbx">. The stage is its own dark room in both themes:
   media floats on a deep scrim with the caption in mono below. Load after blog.css.
   (Classes are lbx-, not lb- — the logo SVG already owns .lb for its fills.) */

.lbx{margin:auto; /* the global margin reset kills the UA's dialog centring */
  background:none;border:0;padding:0;max-width:none;max-height:none;overflow:visible}
.lbx::backdrop{background:rgba(12,12,16,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.lbx[open]{animation:lbx-in .22s cubic-bezier(.2,.8,.2,1)}
.lbx[open]::backdrop{animation:lbx-fade .22s ease}
@keyframes lbx-in{from{opacity:0;transform:scale(.975)}}
@keyframes lbx-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .lbx[open],.lbx[open]::backdrop{animation:none}
}

.lbx figure{margin:0}
.lbx img,.lbx video{display:block;max-width:min(1400px,92vw);max-height:82vh;
  width:auto;height:auto;border-radius:12px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.lbx figcaption{margin-top:16px;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;line-height:1.55;
  color:#d7d3c8;max-width:70ch;margin-left:auto;margin-right:auto}
.lbx figcaption:empty{display:none}

/* close floats at the top right of the viewport, always light-on-dark */
.lbx-close{position:fixed;top:22px;right:22px;display:inline-flex;align-items:center;
  justify-content:center;padding:11px;background:rgba(255,255,255,.08);cursor:pointer;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#f6f3ec;
  transition:border-color .2s,background .2s}
.lbx-close:hover{border-color:#f6f3ec;background:rgba(255,255,255,.16)}
.lbx-close svg{width:14px;height:14px}
.lbx-close:focus-visible{outline:2px solid #f6f3ec;outline-offset:3px}

/* ---- in-page affordances, added by lightbox.js ---- */
.lbx-zoom{cursor:zoom-in}
/* videos keep their controls; a small expand button sits over the frame instead */
.lbx-hasvideo{position:relative}
.lbx-expand{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;
  justify-content:center;padding:10px;background:rgba(12,12,16,.6);cursor:pointer;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#f6f3ec;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:border-color .2s,background .2s}
.lbx-expand:hover{border-color:#f6f3ec;background:rgba(12,12,16,.8)}
.lbx-expand svg{width:14px;height:14px}
.lbx-expand:focus-visible{outline:2px solid #f6f3ec;outline-offset:3px}