/* Archive gallery: a horizontal square grid like the Works gallery, but each
   cell shows the FULL document image (contained) with NO slide mount and the
   metadata printed in the corners. */
.archive-view {
  box-sizing: border-box;
  height: 100vh;
  padding: calc(var(--banner-height) + var(--content-gap)) 0 calc(var(--footer-h) + var(--content-gap));
  width: 100%;
  --archive-rows: 3;
}

/* Square cells sized EXPLICITLY from the viewport band (100vh minus banner,
   footer and gaps), not from content — otherwise an image's natural size
   inflates the max-content tracks and the grid overflows vertically instead of
   scrolling sideways. --cell is one 1fr row's height, so equal-length columns
   yield squares. */
.archive-grid {
  --cell: calc((100vh - var(--banner-height) - var(--footer-h) - 2 * var(--content-gap) - (var(--archive-rows) - 1) * 16px) / var(--archive-rows));
  display: grid;
  gap: 16px;
  grid-auto-columns: var(--cell);
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--archive-rows, 3), 1fr);
  height: 100%;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 16px;
  scrollbar-width: none;
  touch-action: pan-x; /* hybrid devices: sideways swipes stay on the grid */
}
.archive-grid::-webkit-scrollbar { height: 0; width: 0; }

/* Square cell, no background. It fills its grid area (the tracks make it
   square); min sizes are zeroed so the image can never stretch the 1fr rows. */
.archive-doc {
  list-style: none;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.archive-link {
  align-items: center;
  color: inherit;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 18px;            /* room for the corner labels around the image */
  position: relative;
  text-decoration: none;
  width: 100%;
}

/* Full image, never cropped. Sized entirely in percentages (like the works
   grid's slide cards) so the image's natural size can never inflate the grid
   tracks — an intrinsic width here forces the 1fr rows to grow and the whole
   grid overflows vertically instead of scrolling sideways. */
.archive-doc img {
  display: block;
  height: 100%;
  object-fit: contain;
  transition: filter 0.2s ease;
  width: 100%;
}

/* Documents sit on the light table too: light OFF rests them dim (same filter
   as the slide mounts); hovering holds one up to the lamp. */
html[data-light="off"] .archive-doc img { filter: brightness(0.62) saturate(0.75); }
html[data-light="off"] .archive-doc .archive-link:hover img { filter: none; }

/* Non-image documents (PDF / audio / video): an outlined type badge. */
.archive-filetype {
  border: 1px solid currentColor;
  font-size: var(--font-size-h5);
  letter-spacing: 0.06em;
  opacity: 0.75;
  padding: 12px 18px;
}

/* Corner metadata — printed at the cell corners (not on a mount). */
.doc-meta { inset: 0; pointer-events: none; position: absolute; }
.doc-meta > span {
  font-size: var(--font-size-b1);
  max-width: 48%;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-tl { left: 0;  top: 0; }
.doc-tr { right: 0; top: 0; text-align: right; }
.doc-bl { bottom: 0; left: 0; text-transform: lowercase; }
.doc-br { bottom: 0; right: 0; opacity: 0.7; text-align: right; text-transform: lowercase; }

/* Mobile: single column of square cells scrolling vertically in the band.
   Block flow, not grid-auto-flow:row — same reason as the works grid: Chrome
   collapses auto row tracks to the cells' content contribution instead of the
   aspect-ratio-transferred size, so the cells would overlap. */
@media (max-width: 700px) {
  .archive-view {
    height: 100vh;
    height: 100dvh;
  }

  .archive-grid {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
  }

  /* Off the tracks the cell needs its own intrinsic ratio to stay square. */
  .archive-doc {
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    width: 100%;
  }
}

/* ── Single document: black projector field + fixed metadata header ──────────── */
/* Same treatment as the post / single-image viewer: white-on-black, header bar
   reuses the gallery footer line so it morphs into place on the slide-down. */
body[data-view="document"] { background: #000; color: #d8d8d8; }
body[data-view="document"] .banner-mask,
body[data-view="document"] .top-banner { display: none; }
body[data-view="document"] .document-header .bar-inner { view-transition-name: site-footer; }

.document-header {
  animation: docLoadDip 0.7s ease both;
  background: #000;
  left: 0;
  padding-top: 14px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 950;
}
.document-header .bar-inner {
  align-items: baseline;
  border-top: 1px solid #2e2e2e;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 32px;
  padding: 8px 0 14px;
}
.document-header .doc-title { font-weight: 500; white-space: nowrap; }
.document-header .doc-fields { gap: 20px; opacity: 0.7; overflow: hidden; }
.document-header .doc-fields span { white-space: nowrap; }

.document-standalone {
  animation: docLoadDip 0.7s ease both;
  background: #000;
  min-height: 100vh;
  min-height: 100dvh;
}

.document-stage {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 90px 32px 12vh;
}
.document-stage img,
.document-stage video { max-height: 80vh; max-width: min(100%, 1100px); object-fit: contain; }
.document-stage img { filter: brightness(1.04) saturate(1.08); }
.document-stage audio { width: min(100%, 600px); }
.document-pdf { background: #fff; border: 0; height: 80vh; width: min(100%, 1100px); }
.document-stage a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.document-description {
  margin-top: 8px;
  max-width: min(100%, 640px);
  opacity: 0.75;
  text-align: center;
}
.document-description p + p { margin-top: 0.8em; }

@keyframes docLoadDip { from { background-color: var(--main-bg-color); } to { background-color: #000; } }

/* Mobile: chrome-width insets for the document page (the header rule matches
   the 16px banner/footer lines) and a shorter PDF embed. The header goes
   in-flow — its metadata stacks to a variable height (index.css deep-view
   rules) — and the stage fills the remaining viewport, keeping the media
   centred below it. */
@media (max-width: 700px) {
  .document-header { position: static; }
  .document-header .bar-inner { margin: 0 16px; }
  .document-standalone { display: flex; flex-direction: column; }
  .document-stage { flex: 1; min-height: 0; padding: 16px 16px 10dvh; }
  .document-pdf { height: 70dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .document-header,
  .document-standalone { animation: none; }
}