/* ===========================================================================
   artwork-new.css — the redesigned artwork page.

   Loaded after artwork.css. The bar, the sections below the painting and the
   story-and-place row are staging's, as they are there. The top half is
   staging's picker without its cart: the painting in the chosen format, the
   tiles under it, and a panel beside it that sends the buyer to the shop.
   =========================================================================== */

/* --- the bar above the painting ------------------------------------------- */

/* Ruled off from the shop below it, the same hairline as everything else on
   the page. The bar is navigation — where you came from, what is either side —
   and without a line under it, it read as the first row of the painting's own
   panel. */
.artwork__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* The same above and below, between the header's rule and this one: the
     header gives up its own margin on these pages (see the foot of this
     file), so this padding is all the room there is on either side. */
  padding: 4px 0;
  border-bottom: 1px solid var(--color-3);
  margin-bottom: 16px;
}
.artwork__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-5);
  text-decoration: none;
}
.artwork__back:hover { text-decoration: underline; }

.artwork__nav { display: flex; gap: 2px; }
.artwork__navbtn {
  padding: 13px 8px;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-7);
}
.artwork__navbtn:hover { color: var(--color-2); }
/* Kept in place rather than removed at the ends of the list, so the pair does
   not jump about as you page through. */
.artwork__navbtn.is-off { opacity: 0.3; }


.artwork__chev {
  width: 7px;
  height: 7px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
}
.artwork__chev--right {
  transform: rotate(-135deg);
  margin-left: 0;
  margin-right: 2px;
}
.artwork__back .artwork__chev { color: var(--color-5); }


/* --- the painting and its panel ------------------------------------------ */

/* Three areas: the painting, the tiles under it, and the panel down the side
   of both. On a narrower screen they stack — painting, tiles, panel — so the
   choosing comes before the reading about what was chosen. */
.artwork section.viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "figure panel"
    "tiles  panel";
  gap: 0 48px;
  align-items: start;
  /* artwork.css centres everything in the old viewer's grid. */
  justify-items: stretch;
  margin-bottom: 0;
}
.artwork .viewer__figure  { grid-area: figure; }
.artwork .viewer__panel   { grid-area: panel; }
.artwork section.viewer .formats { grid-area: tiles; }

/* Centred in its column, shrink-wrapped to the picture. */
.artwork section.viewer .viewer__figure {
  justify-self: center;
  margin: 0 0 24px;
  max-width: 100%;
  /* An inline <img> sits on the text baseline, leaving a few pixels under it. */
  line-height: 0;
  padding: 0;
  border: 0;
}
/* Tall enough to be the page, short enough that the tiles are still in view
   under it on a laptop. */
.artwork section.viewer .viewer__figure img {
  max-height: min(720px, max(320px, calc(100vh - 300px)));
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* How each kind of format is shown. A frame is its own edge, and a puzzle box
   is a photograph of itself; neither wants more. */

/* The bare painting — a frame nobody has drawn yet — in the hairline outline
   the page has always given it. */
.artwork .viewer__figure[data-kind="plain"] {
  padding: 15px;
  border: 1px solid var(--color-3);
}
/* Stretched canvas: the painting as an object standing off the wall, which
   is what a gallery wrap is — no frame, a depth of edge, a shadow. */
.artwork .viewer__figure[data-kind="wrap"] img {
  box-shadow:
    6px 6px 0 -1px rgba(0, 0, 0, 0.55),
    0 22px 44px rgba(0, 0, 0, 0.6);
}
/* Unstretched is the painting itself. A drawn canvas margin round it read as
   a mat, which is the one thing it does not come with. */

/* The panel: the painting's name, then the chosen format — what it is, what
   it costs, the way to buy it — and under that, the note about the rest. */
.artwork .viewer__panel {
  font-family: var(--font-family-2);
}
.artwork .viewer__panel .artwork__title {
  font-family: var(--font-family-1);
  font-size: var(--font-size-5);
  line-height: 1.2;
  margin: 0 0 22px;
}
.artwork .viewer__chosen {
  padding: 20px 0 0;
  border-top: 1px solid var(--color-3);
}
.artwork .viewer__format {
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  color: var(--color-5);
  margin: 0 0 12px;
}
.artwork .viewer__note {
  font-size: var(--font-size-4);
  line-height: 1.65;
  color: var(--color-7);
  margin: 0 0 18px;
}
.artwork .viewer__price {
  font-size: var(--font-size-2);
  margin: 0 0 4px;
}
.artwork .viewer__ship {
  font-size: var(--font-size-4);
  color: var(--color-4);
  margin: 0 0 18px;
}
.artwork .viewer__buy {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border: 1px solid var(--color-4);
  color: var(--color-2);
  text-decoration: none;
  font-size: var(--font-size-8);
  margin-top: 18px;
}
.artwork .viewer__buy:hover {
  background: var(--color-8);
  border-color: var(--color-5);
}
.artwork .viewer__arrow {
  display: inline-block;
  margin-left: 0.5em;
  /* Optima's own arrow leans; a plain sans one stands upright. */
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: normal;
}
.artwork .viewer__panel [hidden] { display: none; }

/* The note about custom sizes, in a box of its own under the format: it is
   about everything the tiles do not offer, not about the one chosen. */
.artwork .viewer__custom {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--color-3);
  font-size: var(--font-size-4);
  line-height: 1.7;
  color: var(--color-7);
}
.artwork .viewer__custom a { color: var(--color-2); }
/* For a made-to-order frame, where it stands in for the button. */
.artwork .viewer__custom.is-prominent {
  margin-top: 4px;
  padding: 20px 22px;
  font-size: var(--font-size-8);
  line-height: 1.65;
  color: var(--color-2);
  border-color: var(--color-4);
}

/* Below the width where the panel can stand beside the painting and still be
   readable, it goes under the tiles. */
@media (max-width: 1000px) {
  .artwork section.viewer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "figure"
      "tiles"
      "panel";
  }
  .artwork .viewer__panel {
    width: 100%;
    max-width: 620px;
    justify-self: center;
    margin-top: 8px;
  }
}

/* --- the tiles -------------------------------------------------------------
   Staging's format tiles. Each is a link to its product on the shop; with
   artwork-viewer.js a click shows that format above instead. One row under the
   painting, centred while it fits and scrolling sideways once it does not — on
   a phone, always. */

.artwork .formats {
  margin: 0 auto 26px;
  max-width: 100%;
}
.artwork .formats__row {
  display: flex;
  /* Centred while the tiles fit, start-aligned once they overflow: plain
     `center` pushes the first tiles to a negative offset that a scroll
     container will not go back to. The first line is the fallback. */
  justify-content: flex-start;
  justify-content: safe center;
  align-items: stretch;
  gap: 18px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* The row is obviously draggable and the tiles are clipped at the edge,
     which says enough; a scrollbar under a row of pictures is noise. */
  scrollbar-width: none;
}
.artwork .formats__row::-webkit-scrollbar { display: none; }
/* A fade at whichever end has more tiles past it. artwork-viewer.js sets the
   two widths from the scroll position, so an end that is reached is crisp. */
.artwork .formats__row {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
}
.artwork .formats__row li { display: flex; flex: 0 0 auto; }

.artwork .format {
  display: flex;
  flex-direction: column;
  width: 128px;
  text-align: center;
  font-family: var(--font-family-2);
  line-height: 1.4;
  text-decoration: none;
  scroll-snap-align: start;
}
.artwork .formats .format figure {
  margin: 0 0 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-8);
  border: 1px solid transparent;
  transition: border-color 0.15s;
  /* artwork.css gives the viewer's figure padding; these are not that. */
  padding: 0;
}
/* Whole: a drawn frame is a frame, and a product photograph is every shape
   there is. Inset a little, so neither touches the tile's edge. */
.artwork .formats .format img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.artwork .format__label {
  font-size: var(--font-size-4);
  color: var(--color-2);
}

@media (hover: hover) {
  .artwork .format:hover figure { border-color: var(--color-4); }
}
/* The one being shown above. */
.artwork .format.is-selected figure { border-color: var(--color-5); }
.artwork .format.is-selected .format__label { color: var(--color-5); }
.artwork .format:focus-visible { outline: none; }
.artwork .format:focus-visible figure {
  outline: 2px solid var(--color-5);
  outline-offset: 2px;
}

/* --- the composed sections below ------------------------------------------ */

/* Spacing comes from blocks.css via the shared #composed id; only the top
   gap is this page's business, since the shop sits above it. */
.artwork__sections { margin-top: 30px; }

/* The composed sections line up with the shop above them.

   They are the same blocks the built pages use, and there the 40px they carry
   is the gutter that keeps a line of text off the window: those pages have no
   container of their own, so the block IS the column. This page does have one
   — the painting, the format picker and the price all run to its edges — so
   the same 40px reads as the story and the related artwork being indented
   from everything above them, for no reason a reader could name.

   Only the horizontal padding goes. The 70px that separates one section from
   the next is the vertical rhythm of the stack and is nothing to do with this.
   Two classes and the id, because #composed .b carries an id and would
   otherwise win — including in its own mobile breakpoints. */
#composed.artwork__sections .b {
  padding-left: 0;
  padding-right: 0;
}

.artwork .quote__status.is-good { color: var(--color-6); }
.artwork .quote__status.is-bad  { color: #e08a7a; }

/* ===========================================================================
   STORY AND PLACE

   The essay and the map share a row rather than following one another down
   the page: they are two halves of the same answer — what the painting is,
   and where it was made.
   =========================================================================== */

.artwork__place {
  display: grid;
  /* minmax(0, …) rather than a bare 1fr: a track's automatic minimum is its
     min-content, so a long word in the essay would push its column past half
     and squeeze the map into what was left. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  /* Standing in for the two sections it holds, which give up their own — so
     it matches what those sections are given here, side padding included. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 70px 0;
}
/* Inside the grid the sections are columns, not full-width bands, so the
   spacing that #composed .b gives each one belongs to the wrapper instead. */
/* #composed .b carries an id, so a two-class selector loses to it and the
   sections keep the full-width band's padding and centring inside the grid. */
#composed .artwork__place > .b {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* The map block ends by pulling in MapLibre. Those tags draw nothing, but as
   children of a grid they are laid out like anything else — each taking a cell
   and adding a row of gap under the two that matter. */
#composed .artwork__place > link,
#composed .artwork__place > script {
  display: none;
}

@media (max-width: 900px) {
  .artwork__place { padding: 46px 0; }
}
/* Below this the two columns are narrower than either wants to be, so the
   story goes back above the map. */
@media (max-width: 760px) {
  .artwork__place {
    /* minmax(0, …) here too: a bare 1fr is at least as wide as its widest
       child, and MapLibre sizes its canvas in pixels — so on a phone the map
       held the column, and the whole page, wider than the screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: 46px;
  }
}

/* Beside the essay the map is a square: it is a column now, not a wide band,
   and 420px of fixed height in a half-width column reads as a letterbox. */
#composed .artwork__place .b-map__canvas {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* The rule under the site header and the "All artwork" bar are two lines of
   the same furniture, so they sit closer here than global.css's 30px. This
   file only loads on the redesigned pages, so nothing else moves. */
header { margin-bottom: 0; }

@media (max-width: 700px) {
  .artwork .viewer__figure[data-kind="plain"] { padding: 10px; }
  .artwork section.viewer .viewer__figure img { max-height: 62vh; }

  /* On a phone the row runs to both edges of the screen, so a tile cut off at
     the side reads as "there is more this way" — and the first tile still
     starts on the page's own margin. */
  .artwork .formats__row {
    justify-content: flex-start;
    gap: 12px;
    margin-left: calc(-1 * var(--page-gutter) + 10px);
    margin-right: calc(-1 * var(--page-gutter) + 10px);
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    scroll-padding-left: var(--page-gutter);
  }
  .artwork .format { width: 110px; }
}

/* Under the title, for the paintings that are not Curtis's. The title gives up
   its own gap so the two read as one line of furniture. */
.artwork .artwork__title:has(+ .artwork__artist) { margin-bottom: 4px; }
.artwork .artwork__artist {
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
  color: var(--color-7);
  margin: 0 0 30px;
}

/* --- the newsletter, at the foot ------------------------------------------
   One line of fields under a rule: it follows the painting rather than being
   the page, so it is quieter than /newsletter's own form. */

.artwork-subscribe {
  border-top: 1px solid var(--color-3);
  margin: 40px 0 90px;
  padding-top: 50px;
  text-align: center;
}
.artwork-subscribe h2 {
  font-size: var(--font-size-1);
  margin: 0 0 10px;
  color: var(--color-2) !important;
}
.artwork-subscribe p {
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
  color: var(--color-7);
  margin: 0 auto 26px;
  max-width: 34em;
}
.artwork-subscribe__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.artwork-subscribe__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 160px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-7);
}
.artwork-subscribe__field--email { flex: 2 1 240px; }
.artwork-subscribe input[type="email"],
.artwork-subscribe input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-8);
  border: 1px solid var(--color-3);
  border-radius: 3px;
  color: var(--color-2);
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
}
.artwork-subscribe input:focus {
  outline: none;
  border-color: var(--color-7);
}
.artwork-subscribe input[type="submit"] {
  padding: 10px 26px;
  background: none;
  border: 1px solid var(--color-2);
  border-radius: 3px;
  color: var(--color-2);
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
  cursor: pointer;
}
.artwork-subscribe input[type="submit"]:hover:not(:disabled) {
  background: var(--color-2);
  color: var(--color-1);
}
.artwork-subscribe input[type="submit"]:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 700px) {
  .artwork-subscribe { padding-top: 36px; margin-bottom: 70px; }
  .artwork-subscribe h2 { font-size: var(--font-size-2); }
  .artwork-subscribe__field,
  .artwork-subscribe__field--email { flex: 1 1 100%; }
  .artwork-subscribe input[type="submit"] { width: 100%; }
}