/* skeuo-media.css: instrument skin for this surface only. Unlayered, loaded after skeuo-a.css. Hex literals only in :root. */

/* --------------------------------------------------------------------------
   Photographs - a print mounted behind glass in a metal surround.

   The device captures already read as glass panes on a rail. A photograph is
   not a panel readout, so it gets the quieter treatment of a mounted print:
   the same metal surround and the same light direction, a recessed well behind
   the image, and a sheen confined to the top edge so nothing crosses the
   middle of the picture.
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  padding: var(--step-3) var(--step-3) var(--step-5);
  border-radius: var(--radius-sm);
  background-color: var(--sk-metal);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    var(--sk-bevel),
    0 2px 3px rgba(0, 0, 0, 0.7),
    0 12px 26px rgba(0, 0, 0, 0.55);
}

/* The fixings, and the hairline that keeps the surround off the page. */
.photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  background-repeat: no-repeat;
  background-size: 11px 11px;
  background-image: var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw);
  background-position:
    6px 6px, calc(100% - 6px) 6px,
    6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
}

.photo img {
  position: relative;
  z-index: 1;
  display: block;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--sk-well);
  box-shadow:
    0 0 0 1px var(--sk-cast),
    inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* The sheen. A single raking band along the top edge of the print only: it
   stops well before the middle, so no part of the photograph is read through
   it. Inset to the image box, never to the surround, so it cannot reach the
   caption or the fixings either. */
.photo::after {
  content: '';
  position: absolute;
  left: var(--step-3);
  right: var(--step-3);
  top: var(--step-3);
  height: min(30%, 6rem);
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-image: linear-gradient(
    var(--sk-glare, 168deg),
    var(--sk-glass-lit) 0,
    rgba(214, 234, 255, 0.03) 34%,
    transparent 62%
  );
}

/* The caption sits on the stock along the bottom edge, inset past the two
   lower fixings so a long line never runs into one. */
.photo figcaption {
  position: relative;
  z-index: 4;
  margin-top: var(--step-3);
  padding-inline: 14px;
  font-size: var(--size-xs);
  line-height: 1.45;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.photo > a {
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: none;
}

.photo > a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* With script the surround itself is the lightbox trigger, so the anchor must
   not swallow the click and navigate away from the page. Without script the
   class is absent and the link is an ordinary link to the full-size file,
   which is the whole point of wrapping the image in one. */
.js .photo > a,
.js .screenshot > a { pointer-events: none; }

/* The scroll box owns the frame, so the print inside must not draw a second
   one, and the well moves out to the box. */
.photo-scroll {
  border: 0;
  background: var(--sk-well);
  box-shadow:
    0 0 0 1px var(--sk-cast),
    inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.photo-scroll img,
.photo-scroll > a {
  box-shadow: none;
  border-radius: 0;
}

.photo-scroll::after { content: none; }

/* --------------------------------------------------------------------------
   A row of photographs, mounted on the same recessed rail the capture rows
   use. Faded at both ends so it reads as a length of extrusion running past
   the row rather than as a bar drawn under it.
   -------------------------------------------------------------------------- */
.photos {
  position: relative;
  padding-block: var(--step-5);
  /* A row of one or two photographs left the rail running out into empty space
     on the right while sitting flush on the left, which reads as an unfinished
     bar rather than a length of extrusion. Centring the row puts the same
     overrun at both ends, which is the effect the fade was drawn for. */
  justify-content: center;
}

.photos::before {
  content: '';
  position: absolute;
  left: -5rem;
  right: -5rem;
  top: 50%;
  height: 8px;
  z-index: 0;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sk-cast) 0, var(--sk-lip) 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 1px 0 var(--sk-edge-lit-2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0, 0, 0) 22px, rgb(0, 0, 0) calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgb(0, 0, 0) 22px, rgb(0, 0, 0) calc(100% - 22px), transparent 100%);
}

.photos > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   The gallery's own capture rows.

   A row of two or three panes can carry one glare angle each and still look
   like separate pieces of glass. A row of eight cannot: the same angle
   repeating down the page reads as a printed pattern. These rows are long, so
   the angle cycles through five values and the light stays raking from the
   upper left in every one of them.
   -------------------------------------------------------------------------- */
.shots-compact .screenshot:nth-child(5n + 1) { --sk-glare: 146deg; }
.shots-compact .screenshot:nth-child(5n + 2) { --sk-glare: 108deg; }
.shots-compact .screenshot:nth-child(5n + 3) { --sk-glare: 124deg; }
.shots-compact .screenshot:nth-child(5n + 4) { --sk-glare: 161deg; }
.shots-compact .screenshot:nth-child(5n + 5) { --sk-glare: 133deg; }

/* The anchor is a plain block inside the pane; the pane draws the frame. */
.screenshot > a {
  display: block;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: none;
}

.screenshot > a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .photo,
  .photo img { transition: none; }
}

@media (forced-colors: active) {
  .photo { border: 1px solid CanvasText; }
  .photo::before,
  .photo::after,
  .photos::before { display: none; }
}