/* ===========================================================================
   The artworks grid, uncropped.

   The current grid fills every cell with object-fit: cover, so a tall painting
   and a wide one both come out the same rectangle and both lose their edges.
   Here each thumbnail keeps its own proportions, and the painting with its name
   sits centred in the cell, so nothing is cut off.
   =========================================================================== */

.thumbnails--uncropped {
  /* Wider than the 15px the cropped grid uses: these thumbnails have their own
     edges rather than a common rectangle, and need the room to read as
     separate paintings. Rows more than columns — a name already sits between
     two paintings vertically. */
  grid-gap: 40px 30px;
  --thumb-height: 200px;
}

/* The painting and its name are one block, centred down the cell. A row is as
   tall as its tallest member — a tall painting, or a two-line title — and
   without this every shorter cell in that row hangs from the top. */
.thumbnails--uncropped a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* No height of its own: the figure is exactly as tall as the painting inside
   it, so the name sits directly under the picture rather than under a box the
   picture floats in. */
.thumbnails--uncropped a figure {
  height: auto;
  margin: 0 0 10px;
}
.thumbnails--uncropped a figure img {
  /* Bounded on both axes and scaled to fit, so the proportions are the
     painting's rather than the grid's. The cap is what keeps a tall painting
     from towering over its row. */
  max-width: 100%;
  max-height: var(--thumb-height);
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* The subcategories on the left, the two controls for the grid on the right —
   they act on what is below rather than on the categories above, and sitting
   among the filters they would read as more of them. */
.nav-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 30px;
  flex-wrap: wrap;
}
.nav-row--top {
  /* Centred, not baseline: a select and a checkbox carry their own padding,
     and lining their text up with the categories left the controls sitting
     low. */
  align-items: center;
}
/* The categories' own bottom margin was being centred along with them, which
   lifted them clear of the controls' midline. The space between the rows is
   the rows' business instead, and an empty subcategory row — every one on
   All — is taken out so it leaves no gap above the rule. */
.nav-row--top nav.submenu { margin-bottom: 0; }
.nav-row + .nav-row { margin-top: 14px; }
.nav-row:not(:has(a)) { display: none; }

/* A rule under the filters, closing them off from the grid. */
.nav-container {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-3);
  margin-bottom: 40px;
}
.nav-tools {
  display: flex;
  align-items: center;
  /* The same 10px the two menus keep between them, so the search, the
     artist and the years read as one set. */
  gap: 10px;
  flex-wrap: wrap;
}

/* --- search ---------------------------------------------------------------
   Boxed like the year menu beside it, so the controls read as one set. */

/* Closer to the categories than artworks.css's 30px: the title names the
   row of filters directly under it. */
h2.page-title { margin-bottom: 14px; }

.artworks-search {
  /* The year menu's box exactly — padding, ground, border, type — so the two
     read as a pair. */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 180px;
  box-sizing: border-box;
  padding: 7px 12px;
  line-height: 1.2;
  background: none;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  color: var(--color-7);
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  text-decoration: none;
}
.artworks-search:hover { border-color: var(--color-7); color: var(--color-2); }
.artworks-search:focus-visible {
  outline: 2px solid var(--color-5);
  outline-offset: 2px;
}
/* The header's magnifier, a touch larger at this size. */
.artworks-search .menu__magnifier {
  width: 9px;
  height: 9px;
  border-width: 1.5px;
  transform: none;
}
/* Optima sits high in its line box; brought down to the box's middle, and
   so level with the magnifier, which is centred there. */
.artworks-search__words { transform: translateY(0.16em); }
.artworks-search .menu__magnifier:after {
  width: 5px;
  right: -3px;
  bottom: -1px;
}

/* --- show framed ----------------------------------------------------------
   Every painting in the grid, drawn into its six piece koa frame. The drawings
   were made ahead of time by koa-framer; see assets/js/artworks-frames.js. */

.frame-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: var(--color-7);
  /* Boxed like the search and the menus beside it. */
  padding: 7px 12px;
  line-height: 1.2;
  background: none;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  /* A label wraps its checkbox, so a slow double click selects the words
     rather than toggling twice. */
  user-select: none;
}

/* Off-screen, not gone: it is what makes this a switch to a keyboard and to a
   screen reader, and what holds the state. */
.frame-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A frame: an outer moulding, and the painting inside it. Two borders and no
   file — drawn like the magnifier in the header and the chevrons on the
   artwork pages, in currentColor. */
.frame-toggle__icon {
  display: block;
  flex: none;
  width: 16px;
  height: 13px;
  border: 1px solid currentColor;
  padding: 2px;
  box-sizing: border-box;
}
.frame-toggle__icon:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 0.55;
}

.frame-toggle:hover { color: var(--color-2); border-color: var(--color-7); }
.frame-toggle__words {
  color: var(--color-2);
  /* Optima has more room under its letters than over them; centred on the
     line box the words sat high beside the icon. Same nudge as the Book a
     Visit button, measured for this size. */
  transform: translateY(0.16em);
}

/* The display above outranks the attribute, so `hidden` needs saying again:
   with no drawn frames on the site the switch would sit there doing nothing. */
.frame-toggle[hidden] { display: none; }

/* On. The same orange as every other chosen thing on the site. */
.frame-toggle__input:checked ~ .frame-toggle__icon { color: var(--color-5); }

.frame-toggle:has(.frame-toggle__input:focus-visible) {
  outline: 2px solid var(--color-5);
  outline-offset: 2px;
}

/* Taller than the bare painting by about what the moulding adds, so that the
   painting inside the frame reads at the size it read at without one, rather
   than shrinking to make room for its own frame. The picture is the same
   element either way — only its source changed — so this is all the swap
   needs from css. */
.thumbnails--uncropped figure.is-framed img {
  max-height: calc(var(--thumb-height) * 1.3);
}

@media (max-width: 1100px) {
  .thumbnails--uncropped { --thumb-height: 170px; }
}
/* Two across on a phone, not the three the cropped grid drops to: these
   thumbnails are whole paintings rather than a cropped strip, and at a third of
   a phone's width there is nothing left to see. The extra width buys them some
   height back. */
@media (max-width: 700px) {
  .thumbnails--uncropped {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px 20px;
    --thumb-height: 170px;
  }
}

/* ===========================================================================
   The decade filter.

   A select rather than a row of links: six decades and an "All" is more than a
   row of filters wants to carry above a grid that already has categories and
   subcategories over it, and a decade is one choice out of a list — which is
   what a select is for.
   =========================================================================== */

.yearfilter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
}
/* Off-screen: the menu says "All years" when nothing is chosen and names the
   decade when one is, so the word beside it was saying it twice. */
.yearfilter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The arrow is drawn here rather than left to the browser, whose own sat hard
   against the right edge with the padding all on the left, and whose size and
   position differ from one browser to the next. Its colour is --color-7
   spelled out: a data uri cannot read a custom property. */
.yearfilter__select {
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 30px 7px 12px;
  line-height: 1.2;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238D9DAD' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 10px 6px;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  color: var(--color-2);
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  cursor: pointer;
}
.yearfilter__select:hover { border-color: var(--color-7); }
.yearfilter__select:focus-visible {
  outline: 2px solid var(--color-5);
  outline-offset: 2px;
}
/* The menu is drawn by the operating system, and a light option list under a
   dark control is unreadable on Windows. */
.yearfilter__select option {
  color: var(--color-2);
  background: var(--color-1);
}
.yearfilter__go {
  padding: 7px 14px;
  background: none;
  border: 1px solid var(--color-4);
  border-radius: 3px;
  color: var(--color-2);
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  cursor: pointer;
}
.yearfilter__go[hidden] { display: none; }

.thumbnails__empty {
  font-family: var(--font-family-2);
  color: var(--color-7);
  margin: 40px 0 80px;
}
.thumbnails__empty a { color: var(--color-2); }

/* Whose it is, under the title — only for a painting that is not Curtis's, on
   a grid showing more than one artist. */
.thumbnails__artist {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-3);
  color: var(--color-7);
  font-style: normal;
}

/* On a phone the tools are a full-width column under the categories: the
   search across it, and the switch and the menus from its left edge. */
@media (max-width: 700px) {
  .artworks-search { width: auto; flex: 1 1 140px; }

  /* What to look at before how to look at it: categories, then the
     subcategories under them, then the tools. The top row is unwrapped so
     its two halves and the subcategory row can be put in that order. */
  .nav-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .nav-row--top { display: contents; }
  .nav-row--top nav.submenu { order: 1; }
  .nav-row--top + .nav-row  { order: 2; margin-top: 0; }
  .nav-tools                { order: 3; }
}



/* The search, the menus and the frame switch, one height whatever the
   browser: Safari draws a <select> to its own height and ignores the
   padding the others are sized by. */
.artworks-search,
.yearfilter__select,
.frame-toggle {
  box-sizing: border-box;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}