/* Artists 2026: one work per artist in a box with a fine double line, 3 across (2 on phones), the
   artist's name on one line in a pale strip underneath. Paintings and prints fill their stone square like a
   thumbnail, cropped at each work's focus (content/artists-map.json); cut-outs stay whole, as large as the
   box allows, on a soft shadow. */

.artists-grid a { text-decoration: none; color: inherit; }
.grid {
  --cols: 3; --gap-x: clamp(1rem, 2.6vw, 2.25rem);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;   /* a short last row stays centred */
  gap: 3.5rem var(--gap-x);
  width: min(100% - 2 * var(--gutter), 66rem); margin: var(--space-5) auto 0;
}
@media (max-width: 40rem) { .grid { --cols: 2; row-gap: 2.25rem; } }
.grid__item { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); min-width: 0; }
.grid__item:focus-visible { outline: none; }
.grid__work { position: relative; display: block; border: 1px solid var(--ink); background: var(--paper); }

/* The square: warm stone, a few shades from the page */
.grid__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #d3ccbd; }
.grid__fit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.grid__fit img.is-framed {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 50%); transform: scale(var(--zoom, 1));
}
.grid__fit:has(> img.is-cutout) { inset: 7%; }
.grid__fit img.is-cutout { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; filter: drop-shadow(0 4px 7px rgb(28 41 37 / .3)) drop-shadow(0 1px 2px rgb(28 41 37 / .18)); }

/* The double line: an inner line 4px inside the box, over the picture and round the name strip */
:is(.grid__tile, .grid__name)::before { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.grid__tile::before { inset: 4px 4px 0; border: 1px solid var(--ink); border-bottom: 0; }
.grid__name::before { inset: 0 4px 4px; border: 1px solid var(--ink); border-top: 0; }
.grid__item:is(:hover, :focus-visible) .grid__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }   /* pointing at a work underlines the name */

/* The name: always one line; fit-names.js shrinks a long name just enough to fit */
.grid__name {
  position: relative; display: flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 .75rem;   /* clear of the inner line */
  border-top: 1px solid var(--ink); white-space: nowrap; overflow: hidden;   /* fixed height, so every box matches whatever the name size */
  font-family: "Alegreya Sans SC", var(--body); letter-spacing: .08em; font-size: .92rem; line-height: 1.25; color: var(--ink);
}

/* A square in the dark grey of Art Sales (dark: true in content/artists-map.json), with a pale inner line
   and a deeper shadow so the work still stands out */
.grid__tile--dark { background: var(--box-dark); }
.grid__tile--dark::before { border-color: var(--paper); }
.grid__tile--dark .grid__fit img.is-cutout { filter: drop-shadow(0 5px 6px rgb(0 0 0 / .55)) drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }