/* Media viewers share the site's understated charcoal and gold treatment. */
.lb{border:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none}
.lb:not([open]){display:none}
.lb::backdrop{background:transparent}
body.lb-viewing{overflow:hidden}
@media(max-width:900px),(max-height:500px){
  .project-dialog{
    width:min(900px,calc(100vw - 24px));
    max-height:calc(100svh - 24px);
    max-height:calc(100dvh - 24px);
    margin:auto;
    border-radius:10px;
    overscroll-behavior:contain;
  }
  .project-dialog-top{padding:8px 14px;gap:14px}
  .project-dialog-top button{min-width:44px;min-height:44px;padding:0 2px}
  .project-media-stage{min-height:0}
  .project-media-stage img,.project-media-stage video{
    width:100%;
    height:auto;
    min-height:0;
    max-height:calc(100svh - 180px);
    max-height:calc(100dvh - 180px);
    object-fit:contain;
  }
  .project-media-stage img{touch-action:pan-y pinch-zoom}
  .project-dialog-bottom{padding:10px 14px;gap:12px}
  .project-dialog-bottom>div{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
  .project-dialog-bottom small{margin-top:3px}
  .project-dialog-bottom button{width:46px;height:46px}
  .lb{
    padding:calc(64px + env(safe-area-inset-top,0px)) 12px calc(86px + env(safe-area-inset-bottom,0px));
    overscroll-behavior:contain;
  }
  .lb img{
    width:auto;
    max-width:calc(100vw - 24px);
    max-height:calc(100svh - 190px);
    max-height:calc(100dvh - 190px);
    aspect-ratio:auto;
    object-fit:contain;
  }
  .lb figure{max-width:100%;min-width:0;gap:14px}
  .lb figcaption{text-align:center;font-size:14px;line-height:1.45;padding-inline:12px;overflow-wrap:anywhere}
  .lb .x{top:calc(12px + env(safe-area-inset-top,0px));right:16px}
  .lb .pv,.lb .nx{top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin-top:0}
  .lb .pv{left:calc(50% - 64px)}
  .lb .nx{right:calc(50% - 64px)}
}
@media(max-height:500px) and (orientation:landscape){
  .project-dialog{width:min(720px,calc(100vw - 48px))}
  .project-dialog-top{padding-block:4px}
  .project-dialog-bottom{padding-block:6px}
  .project-media-stage img,.project-media-stage video{max-height:calc(100svh - 158px);max-height:calc(100dvh - 158px)}
  .lb{padding:16px 80px}
  .lb img{max-width:calc(100vw - 160px);max-height:calc(100svh - 70px);max-height:calc(100dvh - 70px)}
  .lb figure{gap:8px}
  .lb .pv,.lb .nx{top:50%;bottom:auto;margin-top:-24px}
  .lb .pv{left:16px}.lb .nx{right:16px}
}