/* Selected work — full-bleed ink band, mosaic of nine tiles, each with a before. */

.work {
  position: relative;
  padding-block: var(--section-gap);
  background: var(--surface-ink);
  color: var(--text-on-ink);
}

.work::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-image);
  background-size: var(--grain-tile) var(--grain-tile);
  opacity: var(--grain-opacity-ink);
  mix-blend-mode: var(--grain-blend-ink);
}

.work__inner {
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.work__head {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--border-on-ink);
}

.work__title { max-width: var(--measure-h2); }

.work__lead {
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  color: var(--text-on-ink-secondary);
}

.work__head .btn { justify-self: start; }

.work__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--space-2xl);
}

.tile { grid-column: span 4; }

/* The image and the pinned before share one grid cell, so the print is anchored
   to the bottom-left of the photograph itself. Positioning it against the card
   put it on top of the project name on every wide tile. */
.tile__link {
  display: grid;
  grid-template-rows: auto auto;
  text-decoration: none;
  position: relative;
}

.tile__after {
  grid-area: 1 / 1;
  box-shadow: var(--shadow-plate-on-ink);
}

.tile__before {
  position: relative;   /* the BEFORE tag is positioned against this plate, not the card */
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  z-index: var(--z-raised);
  display: block;
  width: clamp(
    calc(var(--space-5xl) + var(--space-2xl)),
    var(--plate-before-w-card),
    calc(var(--space-5xl) + var(--space-4xl))
  );
  margin-left: calc(-1 * var(--space-sm));
  margin-bottom: calc(-1 * var(--space-lg));
  padding: var(--plate-mount);
  background: var(--surface-raised);
  box-shadow: var(--shadow-plate-on-ink);
}

/* The plate is sized by width, so the frame's height comes from the ratio. Declared here
   rather than inferred, which is also what stops Chrome warning about a lazy image whose
   box it cannot predict. */
.tile__before .ph { aspect-ratio: 4 / 3; object-fit: cover; }

.tile__before .plate__label-tag {
  position: absolute;
  left: var(--plate-mount);
  bottom: calc(-1 * var(--space-sm));
}

.tile__meta {
  grid-area: 2 / 1;
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-2xl);
  padding-top: var(--space-sm);
  border-top: var(--border-on-ink);
}

.tile__name {
  font-family: var(--font-display);
  font-stretch: var(--font-stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
}

.tile__defect {
  margin-top: var(--space-2xs);
  font-weight: var(--weight-data-strong);
  padding-left: var(--space-sm);
  border-left: var(--border-datum-on-ink);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-on-ink-accent);
}

.tile__place,
.tile__scope {
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-on-ink-secondary);
}

.tile__figs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--text-on-ink);
}

/* Hover: the card lifts, the finished photograph gains a little scale inside its
   frame, and the pinned survey print nudges out from under it. Out is faster than in. */
.tile__link { transition: transform var(--dur-fast) var(--ease-exit); }

.tile__after,
.tile__before {
  transition: transform var(--dur-fast) var(--ease-exit),
              box-shadow var(--dur-fast) var(--ease-exit);
}

.tile__link:hover { transform: translateY(-2px); transition-timing-function: var(--ease-slide); transition-duration: var(--dur-base); }

.tile__link:hover .tile__after {
  transform: scale(1.03);
  box-shadow: var(--shadow-plate-on-ink-lift);
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-slide);
}

.tile__link:hover .tile__before {
  transform: translateX(var(--space-xs));
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-slide);
}

.tile__after { overflow: hidden; }

@media (min-width: 640px) {
  .work__grid { grid-template-columns: repeat(var(--grid-columns-md), minmax(0, 1fr)); }
  .tile--tall { grid-column: span 4; }
  .tile--wide { grid-column: span 4; }
}

@media (min-width: 900px) {
  .work__grid { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
  .tile--tall { grid-column: span 4; }
  .tile--wide { grid-column: span 8; }

  /* A mosaic is unequal by definition. Every tile rendered at the same 858px because
     the images were fitted to a common box; the aspect ratios now differ per tile and
     the last one runs full width so the section does not end on a void. */
  .tile--tall .tile__after { aspect-ratio: 3 / 4; }
  .tile--wide .tile__after { aspect-ratio: 4 / 3; }
  .tile:nth-child(3) .tile__after { aspect-ratio: 16 / 10; }
  .tile:nth-child(6) .tile__after { aspect-ratio: 3 / 2; }
  .tile:nth-child(9) { grid-column: 1 / -1; }
  .tile:nth-child(9) .tile__after { aspect-ratio: 21 / 9; }
  .tile:nth-child(9) .tile__before { width: calc(var(--plate-before-w-card) / 2); }

  .work__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
  /* The button belongs under the lead, in the second column: justify-self on
     column one parked it in the middle of the band with nothing around it. */
  .work__head .btn { grid-column: 2; justify-self: start; }
}


/* ---- project page: plate left, survey record right ------------------------
   The single-tile band left roughly a third of the ink empty. The record carries
   what the log does not repeat: scope, place, the defect, the money and the date. */

.tile--split { grid-column: 1 / -1; }

.record { display: grid; gap: 0; }

.record__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--border-on-ink);
  font-family: var(--font-data);
  font-size: var(--text-data);
}

.record__row:last-child { border-bottom: var(--border-on-ink); }

.record__k {
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-ink-secondary);
}

.record__v { color: var(--text-on-ink); }

.record__v--accent {
  color: var(--text-on-ink-accent);
  font-weight: var(--weight-data-strong);
}

@media (min-width: 900px) {
  .tile--split .tile__link {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto;
    column-gap: var(--space-3xl);
    align-items: center;
  }

  .tile--split .tile__after { grid-area: 1 / 1; aspect-ratio: 4 / 3; }
  .tile--split .tile__before { grid-area: 1 / 1; }
  .tile--split .tile__meta { grid-area: 1 / 2; margin-top: 0; border-top: 0; padding-top: 0; }
}