/* ==========================================================================
   A project set: more of one project than a single tile can hold, without a
   case study's story. The pictures are prints on a table. They arrive as one
   stack and deal themselves out; pick one up and it comes to hand, with the
   rest of the stack waiting either side (js/set.js).

   Without the script, or with reduced motion, it is a plain page of pictures,
   each a link to its large file.
   ========================================================================== */

.set-head {
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.75rem);
  padding: clamp(6.5rem, 15vh, 9.5rem) var(--gutter) clamp(1.75rem, 3.5vw, 3rem);
}
.set-head__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.9em;
  color: var(--soft);
}
.set-head__crumbs a {
  color: var(--fg);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat;
  padding-bottom: 0.12em;
  transition: background-size 0.5s var(--ease-out);
}
.set-head__crumbs a:hover,
.set-head__crumbs a:focus-visible {
  background-size: 100% 1px;
}
.set-head__title {
  font-size: var(--step-4);
  line-height: 0.94;
}
.set-head__side {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
}
.set-head__dek {
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: 1.3;
}
.set-head__disclaimer {
  max-width: 44ch;
  color: var(--soft);
}
.set-head__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.6em;
  color: var(--soft);
}
@media (min-width: 900px) {
  .set-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
  }
  .set-head__crumbs {
    grid-column: 1 / -1;
  }
}

/* ---------- the table ---------- */

.table {
  padding: 0 var(--gutter) var(--section);
}
.table__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.table__count {
  color: var(--soft);
}
.table__no {
  color: var(--fg);
}
/* the hint only makes sense where a print can be picked up */
html:not(.js) .table__hint {
  display: none;
}
.table__deal {
  padding: 0 0 0.2em;
  border: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  color: inherit;
  cursor: pointer;
}
.table__deal:hover {
  background-size: 0% 1px;
  background-position: 100% 100%;
  transition: background-size 0.45s var(--ease-out);
}

/* One across, then two (a phone); rows of two, then three (wider).
   Every print keeps its own shape. */
.prints {
  --gap: clamp(0.9rem, 2.4vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: center;
}
.print {
  position: relative;
}
/* each print says how much of its row it takes (worked out when the page is built,
   so no print is left alone at the end of a wide row) */
.print {
  grid-column: span var(--span-s, 1);
}
@media (min-width: 760px) {
  .prints {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .print {
    grid-column: span var(--span, 4);
  }
}
.print__link {
  display: block;
  perspective: 900px;
  text-decoration: none;
  color: inherit;
}
.print__link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 6px;
}
/* the sheet of paper: a hairline for the pale plates, a little weight underneath */
.print__sheet {
  display: block;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), 0 1.4rem 2.2rem -1.3rem rgba(0, 0, 0, 0.38);
  /* --tx and --ty come from the pointer (set.js): the sheet tips toward it */
  transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 6deg)) translateY(var(--lift, 0));
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
  will-change: transform;
}
.print__sheet img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
}
.print__no {
  display: block;
  margin-top: 0.7rem;
  color: var(--soft);
}
@media (hover: hover) and (pointer: fine) {
  .print__link:hover .print__sheet {
    --lift: -0.4rem;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent), 0 2.4rem 3rem -1.6rem rgba(0, 0, 0, 0.5);
    transition-duration: 0.25s;
  }
}
/* in the hand: its place on the table is empty until it is put back */
.print.is-out .print__sheet {
  visibility: hidden;
}
/* Until the script has stacked them, the prints wait unseen, so the laid-out
   page never flashes before the deal. (The head script's failsafe removes
   `motion` if the scripts never arrive, and then they simply show.) */
.motion .prints:not(.is-ready) .print {
  opacity: 0;
}
/* while dealing, each print rides above the table in stack order */
.prints.is-dealing .print {
  z-index: var(--z, 1);
}

/* ---------- onward: back to the grid, the previous set, the next one ---------- */

.onward {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin: 0 var(--gutter);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--rule);
}
.onward__back {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-content: space-between;
  justify-items: start;
}
.onward__prev {
  display: grid;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--soft);
}
.onward__prev-title {
  font-size: var(--step-2);
  line-height: 1.05;
  color: var(--fg);
  transition: translate 0.7s var(--ease-out);
}
.onward__next {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  text-decoration: none;
}
.onward__words {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}
.onward__label,
.onward__kind {
  color: var(--soft);
}
.onward__title {
  font-size: var(--step-3);
  line-height: 0.98;
  max-width: 11ch;
  transition: translate 0.7s var(--ease-out);
}
.onward__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .onward__next:hover .onward__title { translate: 0.14em 0; }
  .onward__prev:hover .onward__prev-title { translate: -0.14em 0; }
}
@media (min-width: 900px) {
  .onward {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 6vw, 7rem);
  }
  .onward__next {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- the deck: one print in the hand ---------- */

.deck {
  --pad: clamp(0.75rem, 2vw, 1.75rem);
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.deck::backdrop {
  background: transparent;
}
.deck:focus {
  outline: none;
}
/* night falls behind the print as it is picked up */
.deck__veil {
  position: absolute;
  inset: 0;
  background: var(--black);
}
.deck__stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
}
.deck__stage.is-held {
  cursor: grabbing;
}
/* every slide is the same sheet, centred; the script slides them apart */
/* Centred by auto margins inside the stage. (Not by `translate`: the animation
   library folds that property into its own transform, and Safari hands it a
   pixel value, so the centring was lost and the print sat low and to the right.) */
.deck__slide {
  position: absolute;
  inset: 0;
  width: min(78vw, calc((100vh - 11rem) * var(--ar)));
  width: min(78vw, calc((100dvh - 11rem) * var(--ar)));
  height: fit-content;
  aspect-ratio: var(--ar);
  margin: auto;
  box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.7);
  background: #151516;
  will-change: transform, opacity;
}
.deck__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.deck__slide:not(.is-current) {
  cursor: pointer;
}
.deck__where,
.deck__close,
.deck__count,
.deck__steps,
.deck__caption {
  position: absolute;
  z-index: 2;
}
.deck__where {
  top: var(--pad);
  left: var(--pad);
  padding: 0.6rem 0;
  opacity: 0.6;
}
.deck__close {
  top: var(--pad);
  right: var(--pad);
}
.deck__count {
  left: var(--pad);
  bottom: var(--pad);
  padding: 0.6rem 0;
  opacity: 0.6;
}
.deck__steps {
  right: var(--pad);
  bottom: var(--pad);
  display: flex;
  gap: 0.25rem;
}
.deck__caption {
  left: 0;
  right: 0;
  bottom: calc(var(--pad) + 0.55rem);
  width: fit-content;
  margin-inline: auto;
  max-width: min(60vw, 34ch);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.15;
  text-align: center;
}
.deck__btn {
  padding: 0.6rem 0.8rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur-ui, 0.2s) linear;
}
.deck__btn:hover,
.deck__btn:focus-visible {
  opacity: 1;
}
.deck__btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -2px;
}
.deck__btn[disabled] {
  opacity: 0.2;
  cursor: default;
}
@media (max-width: 759px) {
  .deck__slide {
    width: min(90vw, calc((100dvh - 12rem) * var(--ar)));
  }
  /* the caption sits above the buttons instead of between them */
  .deck__caption {
    bottom: calc(var(--pad) + 3.2rem);
    max-width: 86vw;
  }
}