/* ============================================================
   work.css  —  "final" version: a work shown full screen
   ------------------------------------------------------------
   Used by every work in the gallery and every process photograph:
   on the work's own page, where it fills the window, and in
   gallery.html and process.html, where the work sits in a frame as
   big as the window less the thumbnail strip (stage.css,
   "Full-screen works").

   The photograph is placed by js/work.js. A piece on a studio
   backdrop:
     - as large as the frame allows, cropping only backdrop:
       the piece itself, with a little room around it, is always
       whole and always clear of the nav row at the top
     - where the frame is a different shape from what is left,
       the photograph's edges carry on outward as gradients read
       from them (the "bands"), so the backdrop reaches the frame's
       edge
   Any other photograph (the process photographs, and the works
   photographed outdoors or in the hand) is shown whole, never
   cropped, with the white page around it.
   Without JavaScript the whole photograph shows, as large as fits.

   The caption sits bottom right and the credit bottom left, in
   the same type as on the other works.
   ============================================================ */

/* a work's own page; the gallery and process pages lay the work out in
   a frame of their own (stage.css, "Full-screen works")             */
.work-full,
.work-full body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.photo-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.photo,
.photo-band {
  position: absolute;
}

/* until work.js has run: the whole photograph, as large as fits */
.photo {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.photo-area.is-placed .photo {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  object-fit: fill;
}

/* ---- backdrop -----------------------------------------------------
   A soft picture of the photograph's backdrop, grown outward from
   its edges, 3.5 times its width and twice its height. It sits
   behind the photograph and shows wherever the photograph does not
   reach the frame's edge. work.js gives its place as --bx --by --bw
   --bh (for a work without one, these are the photograph's own).
   The photograph's edges fade into it over --feather, so its grain
   does not stop at a line.                                         */
.photo-backdrop {
  display: none;
  position: absolute;
}
.photo-area.is-placed .photo-backdrop {
  display: block;
  left: var(--bx);
  top: var(--by);
  width: var(--bw);
  height: var(--bh);
}
.photo-area.is-placed .photo-backdrop ~ .photo {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--feather), #000 calc(100% - var(--feather)), transparent);
  mask-composite: intersect;
}

/* the bands sit under the photograph and its backdrop and tuck 1px
   beneath the edge. Their gradients are written by work.js from the
   edge colours. They are what shows beyond the backdrop, in a window
   wider or taller than it reaches.                                  */
.photo-band {
  display: none;
}
.photo-area.is-placed .photo-band {
  display: block;
}
.photo-band--left,
.photo-band--right {
  top: var(--by);
  width: calc(var(--reach) + 1px);
  height: var(--bh);
}
.photo-band--left {
  left: calc(var(--bx) - var(--reach));
}
.photo-band--right {
  left: calc(var(--bx) + var(--bw) - 1px);
}
.photo-band--top,
.photo-band--bottom {
  left: calc(var(--bx) - var(--reach));
  width: calc(var(--bw) + 2 * var(--reach));
  height: calc(var(--reach) + 1px);
}
.photo-band--top {
  top: calc(var(--by) - var(--reach));
}
.photo-band--bottom {
  top: calc(var(--by) + var(--bh) - 1px);
}

/* where a band shows, its colours are laid a little way over the
   photograph and faded out, so the join is a blend, not a line     */
.photo-feather {
  display: none;
  position: absolute;
}
.photo-feather--left,
.photo-feather--right {
  top: var(--y);
  width: var(--feather);
  height: var(--h);
}
.photo-feather--left {
  left: var(--x);
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
}
.photo-feather--right {
  left: calc(var(--x) + var(--w) - var(--feather));
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
  mask-image: linear-gradient(to left, #000, transparent);
}
.photo-feather--top,
.photo-feather--bottom {
  left: var(--x);
  width: var(--w);
  height: var(--feather);
}
.photo-feather--top {
  top: var(--y);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.photo-feather--bottom {
  top: calc(var(--y) + var(--h) - var(--feather));
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}

/* ---- caption and credit ---------------------------------------
   Same type as .caption / .credit in text.css, set in the corners
   of the frame: the same distance in from the right edge as the
   home page's tagline, and 20px up from the thumbnails.           */
.work-caption,
.work-credit {
  position: absolute;
  bottom: 20px;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  color: #333;
  white-space: nowrap;
}
.work-caption {
  right: 50px;
  text-align: left;
}
.work-caption .c-line {
  display: block;
}
.work-credit {
  left: 50px;
  letter-spacing: .3px;
  color: #444;
}

/* ---- process photographs ------------------------------------------
   One line under the photograph, centred in the frame: where it is
   from on the left, the credit on the right, as in the old layout.
   Same type and ink as .credit in text.css.                        */
.process-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .3px;
  color: #5c5c5c;
  text-align: center;
  white-space: nowrap;
}
.process-credit span + span {
  margin-left: 19px;
}

/* On a photograph the caption and the credit are set dark or light by
   js/work.js, each from what lies under it. Works 1-3 are older pages
   and are covered by the same script.                              */