/* /fullres: photographs at full resolution (views/fullres.haml, static/fullres.js)
   Quiet by design: no frames or shadows, generous space, small type. */

body.fullres {
  --gutter: 4%;
  --gap-x: 3.5em;   /* between the columns of photographs */
  --gap-y: 5em;     /* between the rows */
}
.fullres .empty { margin-left: var(--gutter); margin-right: var(--gutter) }


/* ---- plates ------------------------------------------------------------------
   A regular grid of equal square slots. Each photograph sits centered on the
   slot's bottom edge at its own proportions, so portrait and landscape
   sheets carry the same weight and every caption lines up.
   The space between the photographs belongs to them: each carries half of
   its gaps as padding, and the grid's margins take the outer half back. So
   over the grid the pointer is always on exactly one photograph, and the
   hover below cannot flicker on the way from one to the next. */
.fullres .scans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem + var(--gap-x)), 1fr));
  margin: calc(var(--gap-y) / -2) calc(var(--gutter) - var(--gap-x) / 2) calc(7em - var(--gap-y) / 2);
}
.fullres .scan {
  display: block;
  min-width: 0;
  border: 0;
  padding: calc(var(--gap-y) / 2) calc(var(--gap-x) / 2);
  color: var(--fg);
  text-align: center;
}
.fullres .scan:hover { background: none; color: var(--fg) }
.fullres .scan:focus-visible { outline: none }
.fullres .scan:focus-visible .print img { outline: 2px solid var(--fg); outline-offset: 4px }
.fullres .scan:focus-visible .caption .title { text-decoration: underline; text-underline-offset: .25em }

.fullres .print {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 1;
  container-type: inline-size;
}
.fullres .print img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100cqw;                  /* the slot is square */
  aspect-ratio: var(--ar);
  background-size: cover;
  outline: 1px solid var(--line);  /* keeps pale skies off the page */
  outline-offset: -1px;
  transition: opacity .5s ease;
}
/* hovering one photograph quietly steps the others back (:has, not
   .scans:hover: an empty slot at the end of the grid dims nothing) */
@media (hover: hover) {
  .fullres .scans:has(.scan:hover) .scan:not(:hover) img { opacity: .42 }
}

.fullres .caption { display: block; margin-top: 1.1em; line-height: 1.35 }
.fullres .caption .title { display: block; font-size: .92em }
.fullres .caption .meta { display: block; margin-top: .15em; font-size: .78em; font-style: italic; color: var(--muted) }

/* ---- viewer -------------------------------------------------------------- */
html.viewer-open { overflow: hidden }
#viewer {
  --ui: rgba(255, 255, 255, .9);
  --ui-dim: rgba(255, 255, 255, .5);
  --ease: cubic-bezier(.22, .8, .24, 1);
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #050505;
  color: var(--ui);
  overflow: hidden;
  font-family: 'PT Serif', serif;
}
#viewer::backdrop { background: #050505 }
#viewer:focus { outline: none }
#viewer[open] { animation: fullres-in .45s var(--ease) }
@keyframes fullres-in { from { opacity: 0 } }

#osd { position: absolute; inset: 0; transition: opacity .45s ease }
#viewer.switching #osd { opacity: 0 }

/* everything on top of the scan; fades away while idle */
#viewer .chrome { position: absolute; inset: 0; pointer-events: none }
#viewer .chrome > * { transition: opacity .6s ease, transform .6s var(--ease) }
#viewer.idle .chrome > * { opacity: 0 }
#viewer.idle { cursor: none }
#viewer button, #viewer .strip { pointer-events: auto }

/* thin line icons, no discs */
#viewer button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-dim);
  cursor: pointer;
  transition: color .25s ease, transform .25s var(--ease);
}
#viewer button:hover { color: #fff }
#viewer button:focus-visible { outline: 1px solid var(--ui-dim); outline-offset: -6px }
#viewer button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round }
#viewer .nav svg { width: 30px; height: 30px }

#viewer .top {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#viewer .top .close { margin-left: auto }   /* stays right when the counter is hidden */
#viewer .counter {
  font: .72em var(--caption, var(--caption));
  letter-spacing: .22em;
  color: var(--ui-dim);
  font-variant-numeric: tabular-nums;
}

#viewer .nav { position: absolute; top: 50%; margin-top: -22px }
#viewer .prev { left: 10px }
#viewer .next { right: 10px }
#viewer .prev:hover { transform: translateX(-3px) }
#viewer .next:hover { transform: translateX(3px) }
#viewer.single .nav, #viewer.single .strip, #viewer.single .counter { display: none }

#viewer .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "info strip zoom";
  align-items: end;
  gap: 2em;
  padding: 4em 28px 22px;
  background: none;
}
#viewer .info { grid-area: info; min-width: 0 }
#viewer .info .title { display: block; font-size: 1.05em; color: #fff }
#viewer .info .meta, #viewer .info .size { display: block; font-size: .78em; font-style: italic; color: var(--ui-dim); margin-top: .2em }
#viewer .info .size { white-space: pre-line; font-style: normal; font-family: var(--caption); font-size: .66em; letter-spacing: .08em }
#viewer .zoominfo { grid-area: zoom; justify-self: end; text-align: right; font: .66em var(--caption); letter-spacing: .08em; color: var(--ui-dim) }
#viewer .zoom { display: block; font-size: 1.5em; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: .25em }

/* filmstrip: a quiet row of small prints; the current one is marked by a
   hairline beneath it. Slides away while looking at 100%. */
#viewer .strip {
  grid-area: strip;
  display: flex;
  justify-content: safe center;
  align-items: flex-end;
  gap: 7px;
  max-width: min(60vw, 900px);
  overflow-x: auto;
  padding: 6px 4px 10px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
#viewer .strip::-webkit-scrollbar { display: none }
#viewer.zoomed .strip { opacity: 0; transform: translateY(18px); pointer-events: none }
#viewer .strip button {
  position: relative;
  display: block;
  flex: none;
  width: auto;
  height: var(--strip-h, 42px);
  padding: 0;
  opacity: .32;
  transition: opacity .35s ease, transform .35s var(--ease);
}
#viewer .strip button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
#viewer .strip button:hover { opacity: .75; transform: translateY(-2px) }
#viewer .strip button[aria-current="true"] { opacity: 1 }
#viewer .strip button[aria-current="true"]::after { transform: scaleX(1) }
#viewer .strip img { display: block; height: var(--strip-h, 42px); width: auto; max-width: none }

@media (hover: none) {
  #viewer .hint { display: none }
}
@media (max-width: 760px) {
  body.fullres { --gutter: 7%; --gap-y: 3.5em }
  #viewer .nav { display: none }
  #viewer .bottom {
    grid-template-columns: 1fr auto;
    grid-template-areas: "info zoom" "strip strip";
    gap: .9em 1em;
    padding: 3em 18px 14px;
  }
  #viewer .strip { max-width: none; justify-content: flex-start }
  #viewer { --strip-h: 38px }
}