/* v5 · C · Proof · round 6, front W: 06 Work.
   Keepcut joins the roll (07 pieces); the live cards share one controller (js/r6-w.js), one iframe running at a time.
   Phones: the strip becomes a thumb-first carousel. Full-width cards of one height, the media filling a tall frame
   (the phone cut where there is one), a rail of film frames with a playhead, the swipe hint, the roll control sized
   for a thumb. Loaded after the round 4 and 5 sheets, before r4-mobile.css. Motion lives in js/r6-w.js. */

/* ─── every frame: a <picture> carries the phone cut; it fills the frame like the <img> did ─── */
.wk__f > picture { position: absolute; inset: 0; display: block; }
.wk__f--live > picture { z-index: 1; } /* the poster sits over the live page until the page is ready */
.wk__f--live .live { transform-origin: 50% 0; }

/* ─── the rail: one outlined frame per piece, the playhead slides over them with the strip ─── */
.wk-rail { display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter); margin: 0 0 4px; overflow: hidden; }
.wk-rail__frames { position: relative; display: flex; gap: 4px; flex: none; }
.wk-rail__frames:empty { display: none; }
.wk-rail__frames i { display: block; width: 20px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.wk-rail__frames i.is-seen { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--film) 46%, transparent); }
.wk-rail__head { position: absolute; left: 0; top: 0; width: 20px; height: 12px; border-radius: 2px; background: var(--marker); box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--marker) 70%, transparent); will-change: transform; }
.wk-rail__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); transition: translate .57s var(--sp-quick, var(--ease-out)); }
.wk-rail__hint .work__swipe { display: block; width: 52px; height: 24px; margin: 0; flex: none; }
.wk-rail__hint.is-gone { translate: calc(100% + var(--gutter) + 12px) 0; transition: translate .5s var(--sp-firm, var(--ease-out)); }
.work-drum .wk-rail { display: none; }
@media (min-width: 1000px) { .wk-rail__hint { display: none; } }

/* ─── the roll counter flips when a card lands (js/r6-w.js) ─── */
.goo__count b { display: inline-block; transform-origin: 50% 55%; }

/* ─── legibility on every size: the film-edge print and the pill at 11 px, the small lines at 15 px ─── */
.wk__code { font-size: 11px; letter-spacing: .1em; }
.wk__label { font-size: 11px; }
.wk__who, .wk__meta { font-size: 15px; }
.work-drum .wk__label { letter-spacing: .05em; border-radius: 16px; }

/* ─── the strip on tablets, and on desktops without the roll (?static): cards of one height, the actions at the foot ─── */
@media (min-width: 768px) {
  .work:not(.work-drum) .work__reel { align-items: stretch; }
  .work:not(.work-drum) .wk { display: flex; flex-direction: column; }
  .work:not(.work-drum) .wk__band { padding-top: 32px; }
  .work:not(.work-drum) .wk__band > .wk__f--video { aspect-ratio: 16 / 10; }
  .work:not(.work-drum) .wk__cap { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
  .work:not(.work-drum) .wk__cap > .wk__links { margin-top: auto; padding-top: 6px; }
  .work:not(.work-drum) .wk__cap > .wk__open:not(.wk__links ~ .wk__open) { margin-top: auto; padding-top: 16px; }
}
@media (min-width: 768px) and (max-width: 999px) { .work__nav.goo { --gd: 64px; --gb: 54px; --gl: 76px; } }

/* ─────────────────────────── phones: the carousel ─────────────────────────── */
@media (max-width: 767px) {
  /* one frame height for every card: as tall as the width allows, never taller than the screen can show with its caption */
  .work { --wk-mw: calc(100vw - 2 * var(--gutter) - 16px); --wk-fh: clamp(300px, min(calc(var(--wk-mw) * 1.36), calc(100vh - 250px)), 600px); }
  @supports (height: 1lvh) { .work { --wk-fh: clamp(300px, min(calc(var(--wk-mw) * 1.36), calc(100lvh - 250px)), 600px); } }

  .work__pin { gap: 26px; }
  .work__reel { gap: var(--gutter); align-items: stretch; padding: 10px var(--gutter) 14px; scrollbar-width: none; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
  .work__reel::-webkit-scrollbar { display: none; }
  .wk { flex: 0 0 100%; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; }
  .wk__band { padding: 32px 8px 26px; transform-origin: 50% 0; }

  /* the media fills the frame, top first: the phone cut shows its first screen, the video keeps its titles */
  .wk__band > .wk__f--m, .wk__band > .wk__f--video { width: 100%; height: var(--wk-fh); aspect-ratio: auto; margin: 0; }
  .wk__f > picture > img { object-position: 50% 0; }
  .wk__f--video .wk__vid { object-position: 50% 24%; }
  .wk__f--video .vctl { right: 12px; bottom: 12px; }

  /* the UK sheet: the four prints stacked down the tall frame, overlapping like a collage pinned to the wall */
  .wk--uk .collage { inset: 2% 3%; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0; }
  .wk--uk .cp { width: 76%; }
  .wk--uk .cp--1 { justify-self: start; align-self: start; z-index: 1; }
  .wk--uk .cp--2 { justify-self: end; align-self: center; z-index: 2; }
  .wk--uk .cp--3 { justify-self: start; align-self: center; margin-left: 4%; z-index: 3; }
  .wk--uk .cp--4 { justify-self: end; align-self: end; margin-right: 2%; z-index: 4; }

  /* the caption: same order on every card, the actions at the foot so they sit in the same place on each */
  .wk__cap { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 2px 0; }
  .wk__n { margin-bottom: 8px; }
  .wk__name { font-size: 30px; }
  .wk__who, .wk__meta { font-size: 15px; }
  .wk__label { font-size: 11px; padding: 8px 12px 7px; }
  .wk__line { font-size: 16px; }
  .wk__cap > .wk__links { margin-top: auto; padding-top: 6px; }
  .wk__cap > .wk__open:not(.wk__links ~ .wk__open) { margin-top: auto; padding-top: 16px; }
  .wk__links .tlink { padding: 12px 0; }

  /* the roll control: the count on the left, the two buttons under the right thumb, bigger */
  .work__nav.goo { flex-direction: row-reverse; justify-content: space-between; margin-top: 4px; --gd: 64px; --gb: 54px; --gl: 76px; }
  .goo__count b { font-size: 22px; }
  .work__end { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-rail__hint, .wk-rail__hint.is-gone { transition: none; }
}