/* Work: a quiet index on the left (year, title), and on the right a
   stage that shows the active project's collage. */
.work li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0 var(--gap);
  padding: 1.4rem 0;
  color: var(--rule-quiet);
  cursor: default;
  transition: color 0.2s;
}

.work li:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

.work .year {
  font-size: 0.875rem;
  line-height: 1.9;
}

.work .title {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* The client's full legal name: small and faded, but there, so the work
   reads as real engagements. */
.work .org {
  grid-column: 2;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--rule-quiet);
}

/* The stage: one collage per project, stacked; only the active one shows.
   Inside, every element is placed absolutely: --x, --y (% of the stage),
   --w (% of its width), --z (stacking). Images keep their own shape via
   aspect-ratio. Like a book spread: a few overlapping images, the name set
   big and vertical, and a small text block beside them. Each element also
   drifts with the pointer by its depth --d (times --drift at the stage
   edge); work.js
   sets --mx and --my on the stage. */
.stage {
  /* How far the depths reach: --d of 30 at the stage edge moves 30 x this. */
  --drift: 2px;
  position: relative;
  aspect-ratio: 5 / 6;
  margin-top: 3rem;
}

.collage {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.35s,
    visibility 0s 0.35s;
}

.collage > * {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z, 1);
  translate: calc(var(--mx, 0) * var(--d, 0) * var(--drift))
    calc(var(--my, 0) * var(--d, 0) * var(--drift));
}

.layer {
  width: var(--w);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.12);
}

.note {
  width: var(--w);
  font-size: 0.875rem;
  line-height: 1.45;
}

.note-where {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
}

/* Read bottom to top, like a spine (writing-mode turns it, scale flips
   it; rotate stays free for the phone scatter). */
.vtitle {
  writing-mode: vertical-rl;
  transform: scale(-1);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* The active project: its row turns black (its client name grey), its
   collage fades in. */
#work[data-active="tara"] li[data-p="tara"],
#work[data-active="digidoc"] li[data-p="digidoc"],
#work[data-active="valuation"] li[data-p="valuation"],
#work[data-active="olecus"] li[data-p="olecus"],
#work[data-active="summerswap"] li[data-p="summerswap"],
#work[data-active="wastelocker"] li[data-p="wastelocker"],
#work[data-active="juur"] li[data-p="juur"],
#work[data-active="pic"] li[data-p="pic"],
#work[data-active="edf"] li[data-p="edf"],
#work[data-active="rentgo"] li[data-p="rentgo"] {
  color: var(--text);
}

#work[data-active="tara"] li[data-p="tara"] .org,
#work[data-active="digidoc"] li[data-p="digidoc"] .org,
#work[data-active="valuation"] li[data-p="valuation"] .org,
#work[data-active="olecus"] li[data-p="olecus"] .org,
#work[data-active="summerswap"] li[data-p="summerswap"] .org,
#work[data-active="wastelocker"] li[data-p="wastelocker"] .org,
#work[data-active="juur"] li[data-p="juur"] .org,
#work[data-active="pic"] li[data-p="pic"] .org,
#work[data-active="edf"] li[data-p="edf"] .org,
#work[data-active="rentgo"] li[data-p="rentgo"] .org {
  color: var(--muted);
}

#work[data-active="tara"] .collage[data-p="tara"],
#work[data-active="digidoc"] .collage[data-p="digidoc"],
#work[data-active="valuation"] .collage[data-p="valuation"],
#work[data-active="olecus"] .collage[data-p="olecus"],
#work[data-active="summerswap"] .collage[data-p="summerswap"],
#work[data-active="wastelocker"] .collage[data-p="wastelocker"],
#work[data-active="juur"] .collage[data-p="juur"],
#work[data-active="pic"] .collage[data-p="pic"],
#work[data-active="edf"] .collage[data-p="edf"],
#work[data-active="rentgo"] .collage[data-p="rentgo"] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s;
}

@media (min-width: 48rem) {
  /* The index is taller than the stage, so the stage is sticky: it
     starts level with the first row, stays centred in the window while
     the index scrolls, and ends level with the last row. */
  .work {
    grid-column: 1 / span 4;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .work li {
    grid-template-columns: 5.5rem 1fr;
    padding: 0;
  }

  /* One empty column between the index and the stage. --stage-h is the
     stage's height: 7 of 12 columns of main's content (60rem max, 1.5rem
     gutters), times 6/5; the index uses it too. */
  #work {
    --stage-h: calc(
      ((min(100vw - 4rem, 60rem) + 1.5rem) * 7 / 12 - 1.5rem) *
      1.2
    );
  }

  .stage {
    grid-column: 6 / -1;
    align-self: start;
    position: sticky;
    top: max(1rem, calc(50svh - var(--stage-h) / 2));
    margin-top: 0;
  }
}