/* Figure zoom, site-wide (2026-09-24). Moved here from article.css so every
   layout gets it: base.njk loads this file and assets/js/figure-zoom.js on every
   page. Covers article figures, Apprenticeship lesson figures (.figure,
   .figlabel, .obsrow) and Field Manual plates (<figure>, .figure__frame). */

/* Figure zoom — set by assets/js/figure-zoom.js, which adds .has-figzoom to any
   figure it has wired up. Everything here is behind that class, so a reader
   without JavaScript sees the figures unchanged. */
.has-figzoom img { cursor: zoom-in; }
.has-figzoom img:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.figzoom-hint {
  display: inline;
  margin-left: 8px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  white-space: nowrap;
}

dialog.figzoom {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
}
dialog.figzoom::backdrop { background: rgba(20, 16, 12, 0.88); }
dialog.figzoom:not([open]) { display: none; }
.figzoom__stage {
  flex: 1 1 auto; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 20px 0; box-sizing: border-box;
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.figzoom__img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  cursor: zoom-in;
  background: var(--cream, #faf7f0);
  border-radius: 3px;
}
/* Second level: natural size inside the scrollable stage, for reading the small
   print on a measurement plate. */
.figzoom__stage.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.figzoom__stage.is-zoomed .figzoom__img {
  max-width: none; max-height: none;
  width: auto; height: auto; margin: auto;
  cursor: zoom-out;
}
.figzoom__cap {
  flex: 0 0 auto; max-width: 760px; margin: 0;
  padding: 0 20px 20px; box-sizing: border-box;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; line-height: 1.5; text-align: center;
  color: #efe7da;
}
.figzoom__cap[hidden] { display: none; }
.figzoom__close {
  position: fixed; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(239, 231, 218, 0.35);
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.55);
  color: #efe7da; cursor: pointer;
}
.figzoom__close:hover, .figzoom__close:focus-visible {
  background: rgba(20, 16, 12, 0.85);
  border-color: rgba(239, 231, 218, 0.7);
}
@media (max-width: 640px) {
  .figzoom__stage { padding: 52px 10px 0; }
  .figzoom__cap { font-size: 13px; padding: 0 14px 14px; }
}