/* Art room. White ground, the images do the talking. */

main.gallery,
main.artindex {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

main.gallery h1,
main.artindex h1 { font-size: 2.1rem; margin-bottom: 0.4rem; }

p.crumbs { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.5rem; }
p.crumbs a { color: var(--muted); }

main.gallery h2 { font-size: 1.5rem; margin: 3.5rem 0 0.3rem; }

p.note { color: var(--muted); margin: 0 0 2.2rem; font-size: 1.15rem; }

/* An image that hasn't arrived yet shows its own background in the slot the
   width/height attributes reserved. Paper, not white, so scrolling a gallery
   doesn't punch white rectangles through the page ahead of the pictures. */
img { background: var(--paper); }

/* Fade a picture in as it decodes instead of letting it snap into place.
   lightbox.js only marks images that were still loading when it ran, so
   anything already cached is left alone and nothing depends on JS to appear. */
img.ff { opacity: 0; }
img.ff.in { opacity: 1; transition: opacity 350ms ease; }

@media (prefers-reduced-motion: reduce) {
  img.ff { opacity: 1; }
  img.ff.in { transition: none; }
}

/* justified rows: each row fills the width, heights equalise via
   aspect-ratio flex, one gap everywhere */
.rows { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.5rem; }
.row { display: flex; gap: 1.6rem; }
.row .cell { min-width: 0; }
.row .cell.stack { display: flex; flex-direction: column; gap: 1.6rem;
  justify-content: space-between; }
.row a.zoom { display: block; text-decoration: none; cursor: zoom-in; min-width: 0; }
.row img { width: 100%; height: auto; display: block; }
@media (max-width: 40rem) {
  .row, .row .cell.stack { display: block; }
  .row a.zoom { margin-bottom: 1.6rem; }
  .row:last-child .cell:last-child a.zoom:last-child { margin-bottom: 0; }
}

.endnav { margin-top: 4rem; display: flex; justify-content: space-between; gap: 1.5rem; }
.endnav a.up { color: var(--muted); }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(255,255,255,0.97);
  display: none; align-items: center; justify-content: center; z-index: 10; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; width: auto; height: auto;
  display: block; cursor: zoom-out; }
.lb-cap { position: absolute; bottom: 0.55rem; left: 0; right: 0;
  margin: 0; text-align: center; color: var(--muted); font-size: 1.05rem; }
.lb-cap:empty { display: none; }
.lightbox button { position: absolute; background: none; border: none;
  color: var(--muted); font-size: 2.6rem; line-height: 1; cursor: pointer;
  padding: 0.6rem 1rem; font-family: inherit; }
.lightbox button:hover { color: var(--ink); }
.lb-close { top: 0.6rem; right: 0.8rem; }
.lb-prev { left: 0.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.4rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) { .lb-prev, .lb-next { display: none; } }

/* landing index */
main.artindex section.entry { margin-top: 3rem; }
main.artindex h2 { font-size: 1.6rem; margin: 0 0 0.2rem; }
/* The record block at the foot keeps site.css's quiet heading; the section
   headings above it are the loud ones. */
main.artindex .record h2 { font-size: 1.1rem; margin: 0 0 1rem; }
main.artindex .record { max-width: 40rem; }
main.artindex h2 a { text-decoration: none; }
main.artindex h2 a:hover { color: var(--rub); }
main.artindex .note { margin-bottom: 0.9rem; }

/* index strips: justified to the content width via aspect-ratio flex,
   so every strip shares the same left and right edge; .fixed for tiny
   sections that would justify too tall (ragged right, same height) */
main.artindex a.strip { display: flex; gap: 0.8rem; text-decoration: none;
  margin-top: 1.1rem; width: 88%; }
main.artindex .strip .cell { min-width: 0; display: block; }
main.artindex .strip img { width: 100%; height: auto; display: block; }
main.artindex .strip.fixed img { height: 8.5rem; width: auto; }
main.artindex section.entry:has(a.strip:hover) h2 a { color: var(--rub); }
@media (max-width: 44rem) {
  /* The strips already scroll here; the fade is the only thing telling you so.
     Without it a strip cut off at the viewport edge reads as broken. */
  main.artindex a.strip {
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 99%);
    mask-image: linear-gradient(to right, #000 82%, transparent 99%);
  }
  main.artindex a.strip::-webkit-scrollbar { display: none; }
  main.artindex .strip .cell { flex: 0 0 auto !important; }
  main.artindex .strip img,
  main.artindex .strip.fixed img { height: 6rem; width: auto; }
}