/* The work: the shared page header, one photograph, the kinds of work torn at the seam, then the barge. */

/* ---------- first screen: the page header, then one photograph across the grid ---------- */
.wk-pic { aspect-ratio: 16 / 9; max-height: 80svh; width: 100%; }
.wk-pic img { object-position: 50% 30%; }

/* ---------- title torn at the seam ----------
   Without script (and as the finished composition) every kind of work is one screen: two portrait
   panes meeting at the middle, its title set across the seam. With script the stage holds still and
   the panes travel in opposite directions, so each title tears and closes again. */
.seam { position: relative; background: var(--bg); }
.seam__stage { position: relative; }
.seam__head { padding-block: var(--space-2xl) var(--space-l); }
.seam__entry { position: relative; height: 100svh; min-height: 34rem; }
.seam__pane { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; z-index: 1; background: var(--surface); }
.seam__pane--l { left: 0; }
.seam__pane--r { left: 50%; }
.seam__pane img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.seam__pane::after { content: ""; position: absolute; inset: 0; background: rgba(6, 22, 40, 0.26); }

.seam__cap {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --tf: clamp(96px, 11vw, 160px);
}
/* The title owns the stage layer; its link is the only pointer target. */
.seam__title {
  position: absolute; inset: 0;
  display: flex; align-items: center; padding-bottom: 6rem;
  font-size: var(--tf); line-height: 0.82; letter-spacing: -0.04em; text-transform: uppercase;
  text-align: center; color: var(--ink);
  z-index: 1;
}
.seam__t {
  position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto;
  pointer-events: auto; text-decoration: none;
}
.seam__t::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.18em;
  height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-hover) var(--ease-out);
}
.seam__t:hover::after, .seam__t:focus-visible::after { transform: scaleX(1); }
.seam__t:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.seam__half { display: block; padding-top: 0.08em; }
.seam__half--l { clip-path: inset(0 50% 0 0); }
.seam__half--r { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
/* live: the stage holds while the page scrolls past */
.seam.is-live { height: calc((var(--n, 5) - 1) * 95svh + 160svh); }
.seam.is-live .seam__stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.seam.is-live .seam__entry { position: absolute; inset: 0; height: auto; min-height: 0; }
.seam.is-live .seam__pane, .seam.is-live .seam__half { will-change: transform, opacity; }
/* reduced motion: the halves stay aligned and the kinds of work change by crossfade */
.seam.is-live.is-fade .seam__entry { opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms; }
.seam.is-live.is-fade .seam__entry.is-on { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease-out), visibility 0s; }

/* ---------- from the barge: the title on the side, the note, photograph and caption on the rail ---------- */
/* The title holds beside the tall photograph so the side column never reads as a gap. */
.afloat > .rail__side { position: sticky; top: var(--space-xl); align-self: start; }
.afloat__fig { margin-top: var(--space-l); }
.afloat__pic { aspect-ratio: 1 / 1; max-height: 85svh; width: 100%; }
.afloat__pic img { object-position: 50% 82%; }
.afloat__more { margin-top: var(--space-l); }
.afloat__more .link { font-weight: 500; }

@media (max-width: 860px) {
  .wk-pic { aspect-ratio: 4 / 3; }
  .seam__cap { --tf: 12.5vw; }
  .afloat > .rail__side { position: static; }
  .afloat__pic { aspect-ratio: 4 / 5; max-height: none; }
  .afloat__pic img { object-position: 50% 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .seam__t::after { transition: none; }
  .seam.is-live .seam__pane, .seam.is-live .seam__half { will-change: auto; }
}