/* ---------------------------------------------------------------------------
   Lightbox — press any photograph on the site to see it full screen.

   Loaded by every page, including index.html, which does not load pages.css.
   That is why this is its own file rather than being pasted into both: one
   source of truth, no drift.

   The affordance (cursor, focus ring, hover lift) is attached to .js-zoom,
   which lightbox.js adds at runtime. With JS off the photographs are just
   photographs and nothing pretends to be clickable.

   THIS FILE IS LOADED NON-BLOCKING and holds ONLY the dialog styles, which
   are not needed until a photograph is opened. `picture{display:contents}`
   and the .js-zoom affordance are layout-critical and live in pages.css and
   index.html's inline stylesheet instead. Do not move them back here.
--------------------------------------------------------------------------- */

/* ---------- the dialog ---------- */

dialog.lb {
  padding: 0;
  border: 0;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  background: transparent;
  overflow: hidden;
  color: var(--chalk, #FAF7F1);
}

dialog.lb::backdrop {
  background: rgba(12, 5, 2, .93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lb-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
}

.lb-fig {
  margin: 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  padding: 44px 16px 6px;
  box-sizing: border-box;
}

.lb-fig img {
  max-width: min(100%, 1600px);
  max-height: calc(100dvh - 132px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9);
  background: var(--rock-900, #2E190F);
}

.lb-cap {
  padding: 10px 18px calc(14px + env(safe-area-inset-bottom));
  text-align: center;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 247, 241, .92);
}

.lb-cap .cr {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, .58);
}

.lb-cap .cr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lb-cap .cr a:hover { color: var(--chalk, #FAF7F1); }

/* ---------- controls ---------- */

.lb-btn {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(250, 247, 241, .22);
  border-radius: 100px;
  background: rgba(34, 18, 11, .72);
  color: var(--chalk, #FAF7F1);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.lb-btn:hover { background: rgba(60, 32, 18, .92); border-color: rgba(250, 247, 241, .42); }
.lb-btn:focus-visible { outline: 3px solid var(--accent, #C4531F); outline-offset: 2px; }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lb-close { top: 12px; right: 12px; }
.lb-prev  { left: 12px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }

.lb-count {
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 3;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(250, 247, 241, .6);
}

/* one photograph on the page: nothing to page through */
dialog.lb[data-single] .lb-prev,
dialog.lb[data-single] .lb-next,
dialog.lb[data-single] .lb-count { display: none; }

/* ---------- motion ---------- */

dialog.lb {
  opacity: 0;
  transform: scale(.97);
  transition-property: opacity, transform, display, overlay;
  transition-duration: .22s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

dialog.lb[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  dialog.lb[open] { opacity: 0; transform: scale(.97); }
}

dialog.lb::backdrop {
  opacity: 0;
  transition-property: opacity, display, overlay;
  transition-duration: .22s;
  transition-behavior: allow-discrete;
}

dialog.lb[open]::backdrop { opacity: 1; }

@starting-style {
  dialog.lb[open]::backdrop { opacity: 0; }
}

/* the image itself gets a small settle when you page across */
.lb-fig img { animation: lb-in .22s ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  dialog.lb,
  dialog.lb::backdrop { transition-duration: .01ms; }
  dialog.lb, dialog.lb[open] { transform: none; }
  .lb-fig img { animation: none; }
  .lb-btn { transition: none; }
  .lb-prev:hover, .lb-next:hover { transform: translateY(-50%); }
}

/* ---------- phones ---------- */

@media (max-width: 560px) {
  .lb-btn { width: 42px; height: 42px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-fig { padding: 40px 8px 4px; }
  .lb-fig img { max-height: calc(100dvh - 150px); }
  .lb-cap { font-size: 13px; padding-inline: 14px; }
}

/* while the lightbox is open the page behind it must not scroll */
html.lb-open, body.lb-open { overflow: hidden; }