/* Gallery: justified rows on a neutral ground, a small title and date under
   each photograph, the camera readout on hover and in the full-screen viewer.
   Complete without JS (each photo links to its full-size file). */

/* ── a neutral ground: the site's warm paper would tint the photographs ── */
:root[data-theme="dark"]:has(.gallery-page) {
  --bg: #111111; --nav-bg: #111111; --bg-secondary: #161616; --surface: #181818; --border: #2a2a2a;
  --text: #e9e9e7; --text-secondary: #b4b4b1; --text-muted: #7c7c79;
}
:root[data-theme="light"]:has(.gallery-page) {
  --bg: #f4f4f3; --nav-bg: #f4f4f3; --bg-secondary: #ececeb; --surface: #ebebea; --border: #d9d9d7;
  --text: #161616; --text-secondary: #4a4a48; --text-muted: #8a8a87;
}

.gallery-main {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 4.8rem) 3.2rem 8rem;
  box-sizing: border-box;
}
.gallery-header { margin: 0 0 3.2rem; }
.gallery-intro > :not(.field) { max-width: var(--reading-width); }

/* ── years ───────────────────────────────────────────────── */
.field .year { margin: 0 0 6.4rem; }
.field .year-head {
  font: 500 1.2rem/1 var(--font-mono); letter-spacing: .12em; color: var(--text-muted);
  margin: 0 0 1.6rem; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--border);
}

/* ── justified rows: each tile grows with its aspect ratio ── */
.field .grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3.2rem 1.6rem; }
.field .grid::after { content: ""; flex-grow: 1000000; }
.field .tile {
  --row: 34rem;
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row));
  min-width: 0; margin: 0;
  scroll-margin-top: calc(var(--nav-height) + 2.4rem);
}
.field .frame-link { display: block; line-height: 0; background: var(--surface); border: 0; }
.field .frame-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.field .frame-link img {
  display: block; width: 100%; height: auto; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; filter: none;
  background-size: cover; background-position: center;
  cursor: zoom-in;
}

/* caption: title and date; the settings fade in on hover */
.field .tile-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem;
  margin: 1rem 0 0; max-width: none; font-style: normal;
}
.tile-title { font: 400 1.6rem/1.3 var(--font-serif); color: var(--text); }
.tile-date { font: 400 1.15rem/1.3 var(--font-mono); color: var(--text-muted); }
.tile-exif {
  margin-left: auto; font: 400 1.15rem/1.3 var(--font-mono); color: var(--text-muted);
  opacity: 0; transition: opacity .25s;
}
@media (hover: hover) {
  .field .tile:hover .tile-exif, .field .tile:focus-within .tile-exif { opacity: 1; }
}
@media (hover: none) { .tile-exif { display: none; } }

/* ── full-screen viewer ───────────────────────────────────── */
.lightbox {
  border: 0; padding: 0; margin: 0; max-width: none; max-height: none;
  width: 100vw; height: 100dvh; overflow: hidden;
  background: var(--bg); color: var(--text);
}
.lightbox::backdrop { background: transparent; }
.lightbox-stage { position: absolute; inset: 0 0 8.8rem; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 3.2rem 6.4rem 0; }
.lightbox-stage img { width: 100%; height: 100%; object-fit: contain; margin: 0; border: 0; box-shadow: none; }
.lightbox-bar {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 8.8rem; box-sizing: border-box;
  display: flex; align-items: center; gap: 1.2rem 3.2rem; padding: 1.2rem 3.2rem;
  border-top: 1px solid var(--border);
}
.lb-head { display: flex; flex-direction: column; gap: .4rem; }
.lb-title { font: 400 2rem/1.2 var(--font-serif); color: var(--text); }
.lb-count { font: 400 1.15rem/1 var(--font-mono); color: var(--text-muted); letter-spacing: .04em; }
.lb-sheet { margin-left: auto; display: flex; align-items: center; gap: 1.2rem 2.8rem; flex-wrap: wrap; justify-content: flex-end; }
.lb-sheet .sheet-film, .lb-sheet .sheet-kit { margin: 0; }
.lb-btn { position: absolute; z-index: 2; background: transparent; border: 0; color: var(--text-muted); font: 300 3.2rem/1 var(--font-ui); cursor: pointer; padding: 1.2rem 1.8rem; }
.lb-btn:hover, .lb-btn:focus-visible { color: var(--text); }
.lb-close { top: .8rem; right: .8rem; font-size: 2.8rem; }
.lb-prev { left: .4rem; top: calc(50% - 4.4rem); transform: translateY(-50%); }
.lb-next { right: .4rem; top: calc(50% - 4.4rem); transform: translateY(-50%); }

/* the camera readout (used in the viewer) */
.readout { display: grid; grid-template-columns: repeat(4, auto); gap: .6rem 2rem; }
.ro-cell { display: flex; flex-direction: column; gap: .5rem; }
.ro-val { font: 400 1.8rem/1 var(--font-mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ro-key { font: 500 .95rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.sheet-film { font: italic 400 1.8rem/1.2 var(--font-serif); color: var(--signal); }
.sheet-kit { font: 400 1.15rem/1.4 var(--font-mono); color: var(--text-muted); letter-spacing: .02em; }

@media (max-width: 900px) {
  .gallery-main { padding: calc(var(--nav-height) + 3.2rem) 1.6rem 6.4rem; }
  .field .tile { --row: 22rem; }
}
@media (max-width: 640px) {
  .field .grid { gap: 2.8rem; }
  .field .tile { flex: 1 1 100%; }
  .lightbox-stage { inset: 0 0 12rem; padding: 5.6rem 0 0; }
  .lightbox-bar { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.6rem; }
  .lb-sheet { margin-left: 0; justify-content: flex-start; }
  .lb-prev, .lb-next { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-exif { transition: none; }
}