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

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

main.gallery 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; } }

/* /art/ menu: every section named in one list, one work large beside it. */
main.artmenu { max-width: 60rem; margin: 0 auto; padding: 2.2rem 1.5rem 5rem;
  width: 100%; }
main.artmenu h1 { font-size: 2.1rem; margin-bottom: 0.4rem; }
.cols { display: flex; gap: 3rem; align-items: flex-start; margin-top: 1.2rem; }
.idx { flex: none; }

/* Room label in the site's own metadata register – the one the section labels
   and the fine print already use – rather than a small-caps variant the
   subsetted Cormorant hasn't got. */
.roomhead {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.4rem 0 0.7rem;
}
.idx .roomhead:first-of-type { margin-top: 0; }

.idx ul { list-style: none; margin: 0; padding: 0; }
/* An index, not a run of headlines: set below the h1 by enough that the
   picture stays the loudest thing on the page. */
.idx a { display: inline-block; font-size: 1.55rem; line-height: 1.45;
  text-decoration: none; }
.idx a:hover, .idx a:focus-visible, .idx a.on { color: var(--rub); }

/* Fixed box, every lead scaled to equal area and centred on one point, so the
   image keeps its visual weight and its anchor as the hovers move; the box is
   the counterweight, dead centre of the space the list leaves over. */
a.spec { width: 30rem; flex-shrink: 0; display: block; text-decoration: none;
  align-self: center; margin: 0 auto; }
.spec .box { height: 29rem; display: flex; align-items: center;
  justify-content: center; }
.spec img { display: block; background: none; transition: opacity 130ms ease; }
.spec img.swapping { opacity: 0; }

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

main.artmenu .record { margin-top: 4.5rem; max-width: 40rem; }
main.artmenu .record h2 { font-size: 1.1rem; margin: 0 0 1rem; }

/* site.css matches the fine print to main.gallery; this menu is not that,
   so it needs saying, or the footer centres at the default measure. */
main.artmenu + footer.fine { max-width: 60rem; }

.mgrid { display: none; }
@media (max-width: 44rem) {
  .cols { display: none; }
  .mgrid { display: block; }
  .mgrid .plates { display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 1.1rem; margin-top: 1rem; }
  .mgrid a { text-decoration: none; display: block; }
  .mgrid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    display: block; }
  .mgrid .t { font-size: 1.2rem; margin: 0.35rem 0 0; color: var(--ink); }
  .mgrid .roomhead:first-of-type { margin-top: 0; }
}