What we've built, and what we can show

/* ─── The move: a word bisected by a photographic horizon ──────────────────────
   The frame is cover-fitted and centred, and every photograph is shot with its horizon at
   the exact vertical centre, so the horizon lands at 50% of the scene at any viewport.
   The word is rendered twice: one copy clipped to the sky half, one to the ground half.
   Both copies share one transform, so a scroll-driven translate makes the word sink
   behind the line while the line itself never moves. */
.scene { position: relative; overflow: hidden; isolation: isolate; }
.scene > img, .scene > picture { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.half { position: absolute; left: 0; right: 0; overflow: hidden; z-index: 1; pointer-events: none; }
/* --horizon-target: where the scene would like its line. --horizon: where the line IS, set by
   fit() from where the cover-fitted photograph's built horizon actually landed. The homepage
   hero asks for a lifted line so the ground half has room for the argument; if the image cannot
   move that far, the copy moves, never the line. */
.scene { --horizon-target: 50%; --horizon: 50%; }
.half--sky { top: 0; height: var(--horizon); }
.half--ground { top: var(--horizon); height: calc(100% - var(--horizon)); }
.half > .word {
  position: absolute; left: 0; right: 0; margin: 0; text-align: center; white-space: nowrap;
  color: var(--color-ink);
  /* cap midpoint on the horizon: box centred, then nudged for Archivo Black's cap position */
  transform: translateY(calc(-50% + var(--cap-nudge, .06em) + var(--sink, 0px)));
  will-change: transform;
}
.half--sky > .word { top: 100%; }
.half--ground > .word { top: 0; }
/* Below the line the word is in the ground: it takes the ground's tone and fades into it. */
.half--ground > .word {
  opacity: .72;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0,0,0,.08) 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0,0,0,.08) 92%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Fallback sizes; fit.js sets the exact full-width size when JS runs. */
.word { font-size: var(--word-size, 24vw); }