/* Selected work, "Timeline" view (js/work-strip.js): every project on one
   flat horizontal strip, oldest to newest, that loops endlessly. The section
   pins on desktop and vertical scroll slides the strip; drag, swipe and ←/→
   slide it too. Labels sit on the active card and a ruler with year marks
   runs underneath at half speed. "Index" shows the regular grid. Without JS
   the grid shows as before. */

.ws-toggle { display: none; }
.work.has-strip .ws-toggle { display: inline-flex; align-items: baseline; gap: .45em; }
.ws-toggle button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; opacity: .5; transition: opacity .25s;
}
.ws-toggle button[aria-pressed="true"], .ws-toggle button:hover, .ws-toggle button:focus-visible { opacity: 1; }
.ws-toggle button:focus-visible { outline: 1px dashed currentColor; outline-offset: 3px; }
.ws-toggle span { opacity: .5; }

.ws { display: none; }
.work.has-strip.is-timeline .ws { display: block; position: relative; height: 480vh; margin: 0 calc(var(--pad) * -1); }
.work.has-strip.is-timeline .wk-grid {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.work.has-strip.is-timeline { padding-bottom: 0; }
.work.has-strip.is-timeline .sec-head { margin-bottom: 0; }

.ws-stick {
  --cw: 23vw; --gap: 1.5vw;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
.ws-stick.is-drag { cursor: grabbing; }
.ws-track { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--cw) * .625); transform: translateY(-50%); }
.ws-card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: 100%;
  display: block; overflow: hidden; border-radius: var(--radius-in); background: var(--light);
  will-change: transform; outline: none;
}
.ws-card img, .ws-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ws-card video { opacity: 0; transition: opacity .35s; }
.ws-card.playing video { opacity: 1; }
.ws-card:focus-visible { box-shadow: 0 0 0 2px var(--cobalt); }

.ws-label {
  position: absolute; left: 0; z-index: 2; white-space: nowrap; pointer-events: none;
  color: var(--ink); will-change: transform;
}
.ws-label.top { bottom: calc(50% + var(--cw) * .3125 + 12px); font-size: clamp(20px, 1.7vw, 28px); font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.ws-label.bot { top: calc(50% + var(--cw) * .3125 + 12px); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.3; color: var(--muted); }
.ws-label.bot .ws-yr { color: var(--ink); font-variant-numeric: tabular-nums; }

.ws-ruler { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vh, 56px); height: 46px; pointer-events: none; }
.ws-ticks {
  position: absolute; left: -100px; right: -100px; top: 0; height: 9px;
  background: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 14px);
  will-change: transform;
}
.ws-mark {
  position: absolute; top: 0; left: 0; height: 18px; border-left: 1px solid var(--ink);
  padding: 20px 0 0 6px; color: var(--muted); will-change: transform; white-space: nowrap;
}
.ws-centre { position: absolute; left: 50%; top: -6px; height: 22px; border-left: 1px solid var(--ink); }
.ws-year { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); color: var(--ink); }

@media (max-width: 820px) {
  /* Phones: one big card in focus, and only as much height as card, labels and ruler need. */
  .ws-stick { --cw: 76vw; --gap: 3vw; height: calc(76vw * .625 + 300px); }
  .work.has-strip.is-timeline .ws { height: auto; }
  .ws-stick { position: relative; }
}

/* Desktop timeline: the section header settles just above the card labels while the
   strip is pinned, instead of floating at the top of the screen far from the cards. */
@media (min-width: 821px) {
  .work.has-strip.is-timeline .sec-head {
    position: sticky; z-index: 3;
    top: max(84px, calc(50vh - 23vw * .3125 - 130px));
  }
}