/*
 * THE LIGHTBOX (lightbox.js): Home and the article page open every picture and clip full screen, the
 * way X does. Black, the picture whole at its own shape (contain, never cropped), close and share in
 * glass circles, the caption at the bottom over a soft scrim. The same in light and dark: a viewer is
 * always black.
 */
.lb-on { cursor: zoom-in; }
.lb-on:focus-visible { outline: 2px solid #1D9BF0; outline-offset: 2px; }
/* A clip on the page is its poster with a play mark; it plays in the viewer. */
.lb-clip { position: relative; cursor: pointer; }
.lb-clip::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  pointer-events: none;
  background: rgba(20, 20, 20, 0.46) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E") 55% 50% / 22px no-repeat;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 4px 16px rgba(0, 0, 0, 0.24);
}
html.lb-lock { overflow: hidden; }

.lb {
  --lb-ease: cubic-bezier(0.2, 0, 0, 1);
  --lb-spring: cubic-bezier(0.2, 0.9, 0.25, 1.05);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; outline: none;
  background: transparent; color: #FFFFFF;
  font-family: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: contain;
}
.lb::backdrop { background: transparent; }
.lb-bg { position: absolute; inset: 0; background: #000000; opacity: var(--lb-o, 1); transition: opacity .22s var(--lb-ease); }
.lb.is-drag .lb-bg { transition: none; }
.lb.is-in .lb-bg { opacity: 0; }
.lb-stage { position: absolute; inset: 0; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
.lb-fig {
  box-sizing: border-box; margin: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: max(64px, env(safe-area-inset-top)) 0 max(64px, env(safe-area-inset-bottom));
  transition: transform .34s var(--lb-spring), opacity .2s var(--lb-ease);
  will-change: transform;
}
.lb.is-in .lb-fig { transform: scale(0.96); opacity: 0; }
.lb-media { display: block; max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; }
img.lb-media { cursor: zoom-in; transition: transform .26s var(--lb-ease); }
img.lb-media.is-zoomed { transform: scale(2); cursor: zoom-out; }
video.lb-media { width: 100%; background: #000000; }
@media (min-width: 700px) { .lb-fig { padding-left: 72px; padding-right: 72px; } }

/* Glass circles over the black. */
.lb-btn {
  position: absolute; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #FFFFFF;
  background: rgba(46, 46, 46, 0.44);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: opacity .18s var(--lb-ease), transform .16s var(--lb-ease), background .18s var(--lb-ease);
}
.lb-btn:hover { background: rgba(70, 70, 70, 0.52); }
.lb-btn:active { transform: scale(1.06); }
.lb-btn:focus-visible { outline: 2px solid #1D9BF0; outline-offset: 2px; }
.lb-btn svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: max(12px, env(safe-area-inset-top)); left: 12px; }
.lb-share { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.lb-side { top: 50%; margin-top: -20px; display: none; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-side[hidden] { display: none !important; }
.lb-side:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .lb-side { display: grid; } }

.lb-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  padding: 36px 20px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  transition: opacity .18s var(--lb-ease);
}
.lb-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.lb-dots[hidden] { display: none; }
.lb-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.36); transition: background .2s var(--lb-ease), transform .2s var(--lb-ease); }
.lb-dots i.is-on { background: #FFFFFF; transform: scale(1.1); }
.lb-cap {
  max-width: 620px; margin: 0 auto; text-align: center;
  font: 400 15px/20px system-ui, -apple-system, "SF Pro Text", sans-serif; letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.9);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lb-cap[hidden] { display: none; }
.lb.is-drag .lb-btn, .lb.is-drag .lb-foot, .lb.is-out .lb-btn, .lb.is-out .lb-foot { opacity: 0; }
.lb-toast {
  position: absolute; left: 50%; top: max(18px, env(safe-area-inset-top)); z-index: 3; margin: 0; padding: 7px 14px; border-radius: 16px;
  transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
  font: 500 14px/18px system-ui, -apple-system, sans-serif; color: #FFFFFF;
  background: rgba(46, 46, 46, 0.6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  transition: opacity .2s var(--lb-ease), transform .2s var(--lb-ease);
}
.lb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .lb-bg, .lb-fig, .lb-btn, .lb-foot, img.lb-media, .lb-toast { transition: none !important; }
}