/* ===== WORK — project index (owned by the work page agent) ===== */
.work { position: relative; }

/* ---------- hero ---------- */
.work-hero {
  position: relative;
  isolation: isolate; /* the field sits under the type without positioning it */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(18px, 2.2vw, 40px);
  padding-top: calc(var(--hdr-h) + clamp(56px, 14vh, 200px));
  padding-bottom: clamp(64px, 12vh, 170px);
}
/* a quiet idle field behind the hero that dissolves before the index begins */
.work-hero__field {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  transition: opacity .6s var(--ease-out);
}
/* while a row is previewed the field steps back with the other rows */
.work.is-hovering .work-hero__field { opacity: .35; }
.work-hero__title {
  display: flex; align-items: flex-start;
  font-size: var(--t-3xl);
  margin-left: -0.045em; /* optical: pull the W onto the gutter line */
}
.work-hero__count {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1;
  color: var(--sand-dim);
  vertical-align: baseline;
  margin: calc(var(--t-3xl) * 0.1) 0 0 clamp(8px, 1.1vw, 18px);
}
/* the line sits under the title, on the same axis as the project names below */
.work-hero__line {
  justify-self: start;
  max-width: 30ch;
  margin-left: calc(max(2.75rem, 6%) + clamp(16px, 2vw, 36px));
  font-size: var(--t-lg);
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--sand-dim);
}

/* ---------- groups ---------- */
.work-index { padding-bottom: clamp(24px, 6vh, 80px); }
.work-group + .work-group { margin-top: clamp(80px, 14vh, 180px); }
.work-group__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: inherit; font-size: inherit;
  padding-bottom: clamp(14px, 1.6vw, 22px);
}
.work-group__count { color: var(--sand-dim); }
.work-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.work-group__end { height: 1px; }

/* ---------- rows ---------- */
.work-row {
  display: grid;
  grid-template-columns: minmax(2.75rem, 6%) minmax(0, 1fr) minmax(0, 24%) minmax(0, 10.5rem) 2.75rem;
  grid-template-areas: "num name kick years end";
  align-items: center;
  column-gap: clamp(16px, 2vw, 36px);
  padding: clamp(20px, 2.15vw, 34px) 0;
  transition: opacity .5s var(--ease-out);
}
/* keyboard focus: a ring around the whole row, drawn out in the gutter so it
   never touches the number or the arrow (outlines survive forced colours) */
.work-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: clamp(10px, 1vw, 14px);
  border-radius: 14px;
}
.work-row__num { grid-area: num; }
.work-row__name { grid-area: name; }
.work-row__kicker { grid-area: kick; }
.work-row__years { grid-area: years; }
.work-row__end { grid-area: end; justify-self: end; }

.work-row__num { color: var(--sand-dim); font-weight: 400; }
.work-row__name {
  position: relative; display: block; min-width: 0;
  font-size: var(--t-xl);
  color: var(--sand);
}
.work-row__slide {
  display: block;
  overflow: hidden;
  padding-bottom: .1em; margin-bottom: -.1em;
  translate: 0 0;
  transition: translate .65s var(--ease-out);
}
.work-row__txt {
  display: block;
  transform: translateY(108%);
  transition: transform 1.1s var(--ease-out) var(--d, 0ms);
}
.work-row__dot {
  position: absolute; left: 0; top: 50%;
  width: clamp(8px, .17em, 11px); height: clamp(8px, .17em, 11px);
  margin-top: calc(clamp(8px, .17em, 11px) / -2 - .04em);
  border-radius: 50%;
  background: var(--accent);
  scale: 0;
  transition: scale .45s var(--ease-spring);
}
.work-row__kicker { color: var(--sand-dim); font-size: var(--t-md); line-height: 1.3; }
.work-row__years { color: var(--sand-dim); white-space: nowrap; }
.work-row__arrow {
  display: inline-block;
  font-size: var(--t-lg); line-height: 1;
  color: var(--sand-dim);
  transition: translate .5s var(--ease-out), color .3s var(--ease-out);
}
.work { --thumb: 64px; }
@media (min-width: 480px) { .work { --thumb: 72px; } }
.work-row__thumb {
  display: none;
  width: var(--thumb); height: var(--thumb);
  border-radius: 50%;
  overflow: hidden;
  background: var(--tb, var(--ink-3));
}
.work-row__thumb canvas { width: 100%; height: 100%; }

/* staggered arrival (hooks into the shared [data-line] reveal) */
.work-row__num, .work-row__kicker, .work-row__years, .work-row__end {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .9s var(--ease-out) calc(var(--d, 0ms) + 140ms),
    transform 1s var(--ease-out) calc(var(--d, 0ms) + 140ms),
    color .35s var(--ease-out);
}
.work-row.is-in .work-row__txt { transform: none; }
.work-row.is-in .work-row__num,
.work-row.is-in .work-row__kicker,
.work-row.is-in .work-row__years,
.work-row.is-in .work-row__end { opacity: 1; transform: none; }

/* hover / focus: the row steps forward, the rest of the index recedes */
.work.is-hovering .work-row:not(.is-active) { opacity: .3; }
.work-index:has(.work-row:focus-visible) .work-row:not(:focus-visible) { opacity: .3; }
.work-row.is-active .work-row__slide,
.work-row:focus-visible .work-row__slide { translate: clamp(18px, .32em, 22px) 0; }
.work-row.is-active .work-row__dot,
.work-row:focus-visible .work-row__dot { scale: 1; }
.work-row.is-active .work-row__num,
.work-row.is-active .work-row__kicker,
.work-row.is-active .work-row__years,
.work-row:focus-visible .work-row__num,
.work-row:focus-visible .work-row__kicker,
.work-row:focus-visible .work-row__years { color: var(--sand); }
.work-row.is-active .work-row__arrow,
.work-row:focus-visible .work-row__arrow { translate: 8px 0; color: var(--accent); }

/* a desktop window narrower than the card breakpoint still answers the mouse */
@media (hover: hover) and (pointer: fine) {
  .work--thumbs .work-row:hover .work-row__slide { translate: clamp(18px, .32em, 22px) 0; }
  .work--thumbs .work-row:hover .work-row__dot { scale: 1; }
  .work--thumbs .work-row:hover .work-row__num,
  .work--thumbs .work-row:hover .work-row__kicker,
  .work--thumbs .work-row:hover .work-row__years { color: var(--sand); }
  .work--thumbs .work-index:has(.work-row:hover) .work-row:not(:hover) { opacity: .3; }
}

/* ---------- floating preview card (fine pointers only) ---------- */
.work-card {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: clamp(300px, 26.5vw, 380px);
  aspect-ratio: 19 / 14;
  pointer-events: none;
  transform-origin: 50% 50%; /* JS scales and tilts it about its centre */
  will-change: transform;
  display: none;
}
.work--card .work-card { display: block; }
.work-card__in {
  position: absolute; inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink-3);
  opacity: 0;
  transform: scale(.55) translateY(14px);
  transform-origin: 50% 100%;
  transition:
    opacity .3s var(--ease-out),
    transform .55s var(--ease-out),
    border-radius .55s var(--ease-out),
    background-color .5s var(--ease-out);
  border-radius: 44px;
}
.work-card.is-below .work-card__in { transform-origin: 50% 0%; transform: scale(.55) translateY(-14px); }
.work-card.is-on .work-card__in {
  opacity: 1;
  transform: none;
  border-radius: 20px;
  transition:
    opacity .35s var(--ease-out),
    transform .7s var(--ease-spring),
    border-radius .7s var(--ease-out),
    background-color .5s var(--ease-out);
}
.work-card.is-snap .work-card__in, .work-card.is-snap .work-card__cap { transition: none; }
.work-card__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.work-card__cap {
  position: absolute; left: 18px; bottom: 15px;
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  transition: color .5s var(--ease-out);
}

/* ---------- touch & narrow: round thumbnails instead of the card ---------- */
.work--thumbs .work-row__arrow { display: none; }
.work--thumbs .work-row__thumb { display: block; }
.work--thumbs .work-row { grid-template-columns: minmax(2.75rem, 6%) minmax(0, 1fr) minmax(0, 24%) minmax(0, 10.5rem) var(--thumb); }
.work-row__end { line-height: 0; }
.work-row__thumb { transform: scale(.6); transition: transform 1s var(--ease-spring) calc(var(--d, 0ms) + 220ms); }
.work-row.is-in .work-row__thumb { transform: none; }

/* ---------- next: About ---------- */
.work-next {
  padding-top: calc(clamp(40px, 8vh, 110px) + clamp(28px, 3.4vw, 52px));
  padding-bottom: clamp(72px, 14vh, 190px);
}
/* the hit area hugs the words */
.work-next__link {
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 34px);
  width: fit-content; max-width: 100%;
}
.work-next__link:focus-visible { outline-offset: 10px; border-radius: 10px; }
.work-next__text {
  position: relative;
  display: inline-flex; align-items: baseline; gap: .22em;
  font-size: var(--t-2xl);
  align-self: flex-start;
  /* room for the arrow's hover slide and the glyphs' descent, so the focus
     ring never cuts through them */
  padding: 0 .5em .16em 0;
}
.work-next__word { display: inline-block; transition: translate .7s var(--ease-out); }
.work-next__arrow {
  display: inline-block;
  color: var(--sand-dim);
  transition: translate .7s var(--ease-out), color .35s var(--ease-out);
}
.work-next__dot {
  position: absolute; left: 0; top: 50%;
  width: .11em; height: .11em; margin-top: -.16em;
  border-radius: 50%; background: var(--accent);
  scale: 0; transition: scale .5s var(--ease-spring);
}
.work-next__link:hover .work-next__word,
.work-next__link:focus-visible .work-next__word { translate: .26em 0; }
.work-next__link:hover .work-next__arrow,
.work-next__link:focus-visible .work-next__arrow { translate: .44em 0; color: var(--accent); }
.work-next__link:hover .work-next__dot,
.work-next__link:focus-visible .work-next__dot { scale: 1; }
.work-next__link:hover .work-next__label { color: var(--sand); }
.work-next__label { transition: color .35s var(--ease-out); }

/* ---------- mid widths: kicker and years share a column ---------- */
@media (min-width: 820px) and (max-width: 1180px) {
  .work-row,
  .work--thumbs .work-row {
    grid-template-columns: minmax(2.75rem, 7%) minmax(0, 1fr) minmax(0, 30%) 2.75rem;
    grid-template-areas:
      "num name kick end"
      "num name years end";
    row-gap: 6px;
  }
  .work--thumbs .work-row { grid-template-columns: minmax(2.75rem, 7%) minmax(0, 1fr) minmax(0, 30%) var(--thumb); }
  .work-row__num, .work-row__name, .work-row__end { grid-row: 1 / span 2; align-self: center; }
  .work-row__kicker { align-self: end; }
  .work-row__years { align-self: start; }
  .work-hero__line { margin-left: calc(max(2.75rem, 7%) + clamp(16px, 2vw, 36px)); }
}

/* ---------- very wide: let the index grow with the screen ---------- */
@media (min-width: 1680px) {
  .work-row__name { font-size: min(3.9vw, 104px); }
  .work-row__kicker { font-size: min(1vw, 26px); }
  .work-hero__line { font-size: min(1.6vw, 40px); }
  .work-row__num, .work-row__years,
  .work-group__head .label, .work-group__count { font-size: min(.68vw, 16px); }
  .work-card { width: clamp(380px, 21vw, 540px); }
}

/* ---------- narrow ---------- */
@media (max-width: 819.98px) {
  .work-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: calc(var(--hdr-h) + clamp(40px, 9vh, 88px));
    padding-bottom: clamp(56px, 10vh, 96px);
  }
  .work-hero__title { font-size: clamp(64px, 27vw, 150px); }
  .work-hero__count { margin-top: calc(clamp(64px, 27vw, 150px) * .1); }
  .work-hero__line { margin-left: 0; max-width: 24ch; font-size: clamp(19px, 5.2vw, 24px); }

  .work-group + .work-group { margin-top: clamp(64px, 12vh, 104px); }

  .work-row,
  .work--thumbs .work-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) var(--thumb);
    grid-template-areas:
      "num  years end"
      "name name  end"
      "kick kick  end";
    column-gap: 14px;
    row-gap: 0;
    padding: 22px 0 24px;
  }
  .work-row__end { align-self: center; }
  .work-row__name { font-size: clamp(30px, 8.6vw, 48px); margin: 10px 0 6px; }
  .work-row__kicker { font-size: var(--t-sm); }

  .work-next__text { font-size: clamp(44px, 14.5vw, 96px); }
}

@media (forced-colors: active) {
  .work-row:focus-visible, .work-next__link:focus-visible { outline: 3px solid Highlight; }
  .work-row__dot, .work-next__dot { forced-color-adjust: none; background: Highlight; }
  .work [data-line]::before { forced-color-adjust: none; background: GrayText; }
}

@media (prefers-reduced-motion: reduce) {
  .work-row__txt, .work-row__thumb { transform: none; }
  .work-row__num, .work-row__kicker, .work-row__years, .work-row__end { opacity: 1; transform: none; }
}