/* archive feed: 3 columns, one gutter in both directions, masonry via CSS
   columns. The three tracks land on the same widths as the About page's
   bands, so the two pages share a rhythm.

   The negative bottom margin cancels the trailing margin left by the last
   cell in the tallest column — .page's own bottom margin then provides the
   single gutter under the feed. */
.archive-grid {
  column-count: 3;
  column-gap: var(--gutter);
  margin-bottom: calc(-1 * var(--gutter));
}
.archive-cell {
  display: block;
  width: 100%;
  margin: 0 0 var(--gutter);
  break-inside: avoid;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
.archive-cell img {
  width: 100%;
  height: auto;
  display: block;
}

/* lightbox — shared structure for both viewer styles. Style itself (stage
   size, border, background dimming) is set per-variant below, switched by
   body class from the page's `viewerStyle` front matter. */
.lightbox {
  position: fixed;
  inset: 0;
  background: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--gutter);
}
.lightbox.open { display: flex; }

.lightbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gutter);
  max-width: 100%;
  max-height: 100%;
}
.lightbox-stage img {
  display: block;
  object-fit: contain;
  cursor: default; /* clicking the image itself does not close — only the
                       surrounding background does */
}
.lightbox-caption {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
  max-width: 80vw;
}

/* Arrows are fixed to the screen edges regardless of image width, and set
   in the site's own typeface rather than a symbol font — "<" / ">" are the
   literal characters, not chevron glyphs. */
.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  padding: var(--gutter);
  cursor: pointer;
  z-index: 101;
}
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-arrow:hover { color: var(--muted); }

/* Variant A — full-page takeover: image scaled close to the viewport,
   no visible frame around it. */
.viewer-takeover .lightbox-stage img {
  max-width: 92vw;
  max-height: calc(92vh - 2.5rem); /* leaves room for the caption line */
}

/* Variant B — bounded card: the image sits inside a bordered box with
   clear white margin on every side, so it reads as a distinct object
   floating on the page rather than filling it. */
.viewer-card .lightbox-stage {
  border: 0.075rem solid var(--ink);
  padding: var(--gutter);
}
.viewer-card .lightbox-stage img {
  max-width: min(70vw, 60rem);
  max-height: calc(70vh - 2.5rem);
}