/* Work: filters and the film grid. Since r6 the view is cream like the rest
   of the site (Bryce: no dark grounds). Posters keep their own pixels; each
   sits in a navy hairline frame, and its box is paper while it loads. */

/* The filters on a Paper band (r7), opened by the chapter rule like the
   Services index (layout.css, "Section rhythm"). The chips are Paper inside a
   Haze border, so on the band they read by their border. */
.work-nav { padding-block: var(--space-6) var(--space-7); }
.work-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--rule-width) solid var(--line-rule);
}
.work-filters__label { color: var(--color-text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--type-label-small-family);
  font-weight: var(--type-label-small-weight);
  font-size: var(--type-label-small-size);
  letter-spacing: var(--type-label-small-tracking);
  text-transform: var(--type-label-small-case);
  white-space: nowrap;
  transition: background-color var(--hover) var(--ease-out), border-color var(--hover) var(--ease-out), color var(--hover) var(--ease-out);
}
.chip:hover { border-color: var(--color-text); }
@media (pointer: coarse), (max-width: 759px) { .chip { min-height: var(--size-touch-min); } }
/* The picked filter: a navy chip with a cream label (control-sized, so navy may fill it). */
.chip[aria-pressed="true"] { background: var(--color-bg-brand); border-color: var(--color-bg-brand); color: var(--gist-cream); }
@media (max-width: 759px) {
  .work-filters { display: grid; gap: var(--space-3); }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r));
    padding: 2px var(--gutter-r) 6px var(--gutter-l);
    scroll-padding-inline: var(--gutter-l);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
.chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; letter-spacing: 0.04em; }
/* Tablets and up: when the chips need a second row (about 1180 to 1330 wide,
   and on tablets), the rows are balanced, four and three, so no chip is left
   alone on a row. The chips flow as inline boxes so text-wrap can do that. */
@media (min-width: 760px) {
  .chips { display: block; text-wrap: balance; margin-bottom: calc(-1 * var(--space-2)); }
  .chip { margin: 0 var(--space-2) var(--space-2) 0; vertical-align: top; line-height: 1.2; }
}

.work-stage {
  margin-top: var(--space-block);
  background: var(--color-bg);
}

.work-grid {
  --card-drop: clamp(48px, 6vw, 128px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Two columns from a 680 px column (tablets in portrait and up). The right
   column sits lower, so the grid reads like a contact sheet, not a template. */
@container col (min-width: 680px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--space-5), 2vw + 0.5rem, 3.5rem);
    row-gap: clamp(var(--space-7), 4vw, 6rem);
    /* Room for the lowered cards. A margin, because base.css zeroes the
       padding of every ul[role="list"] with a stronger selector. */
    margin-bottom: var(--card-drop);
  }
  .work-grid > .work-card:nth-child(even of :not([hidden])) { translate: 0 var(--card-drop); }
}
/* That margin merges with the end section's larger top margin, so with an
   even count the lowered last card hangs card-drop into the space above the
   end section. An odd count (a filter, say Offer spots) ends on a left card,
   which is never lowered, and would sit card-drop further from the end. So
   that card hangs by the same amount, and every count ends the same distance
   from the end section. A rule on the card, not a :has() rule on the grid:
   Chrome doesn't recheck :has() when the filter hides cards. Two columns
   only; the three-column grid below has its own endings. */
@container col (680px <= width < 1700px) {
  .work-grid > .work-card:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { margin-bottom: calc(-1 * var(--card-drop)); }
}
/* Three columns on big screens (1920 and up), the middle one lower. The grid
   is six tracks with each card on two, so the end never leaves a hole: a last
   row of two splits the width in half, and a last row of one takes the card
   before it along, so the end is two rows of two. Those pairs drop their
   right card, like the two-column grid. Counts follow the filter (hidden
   cards are skipped). */
@container col (min-width: 1700px) {
  .work-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .work-grid > .work-card { grid-column: span 2; }
  .work-grid > .work-card:nth-child(even of :not([hidden])) { translate: none; }
  .work-grid > .work-card:nth-child(3n+2 of :not([hidden])) { translate: 0 var(--card-drop); }
  .work-grid > .work-card:nth-child(3n+1 of :not([hidden])):nth-last-child(2 of :not([hidden])),
  .work-grid > .work-card:nth-child(3n+1 of :not([hidden])):nth-last-child(2 of :not([hidden])) ~ .work-card,
  .work-grid > .work-card:nth-child(3n+1 of :not([hidden])):nth-last-child(4 of :not([hidden])),
  .work-grid > .work-card:nth-child(3n+1 of :not([hidden])):nth-last-child(4 of :not([hidden])) ~ .work-card { grid-column: span 3; }
  .work-grid > .work-card:nth-child(3n+1 of :not([hidden])):nth-last-child(4 of :not([hidden])) ~ .work-card:nth-last-child(1 of :not([hidden])) { translate: 0 var(--card-drop); }
  /* The wider pair runs under the lowered middle card above it, so it starts
     that much lower. */
  .work-grid > .work-card:nth-child(3n+4 of :not([hidden])):nth-last-child(2 of :not([hidden])),
  .work-grid > .work-card:nth-child(3n+4 of :not([hidden])):nth-last-child(2 of :not([hidden])) ~ .work-card,
  .work-grid > .work-card:nth-child(3n+4 of :not([hidden])):nth-last-child(4 of :not([hidden])),
  .work-grid > .work-card:nth-child(3n+4 of :not([hidden])):nth-last-child(4 of :not([hidden])) ~ .work-card:nth-last-child(3 of :not([hidden])) { margin-top: var(--card-drop); }
}

.work-card { position: relative; display: flex; flex-direction: column; }
.work-card__poster {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  background: var(--color-bg-media);
}
.work-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--gist-navy-rgb) / 0.14);
  pointer-events: none;
}
/* Hover: the poster comes alive at once with a slow push and drift (no clip
   loads, so it can never flash black), and a strip of light crosses it once.
   It glides back when the pointer leaves. */
.work-card__poster .work-card__img-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 58% 46%;
  transition: transform 700ms var(--motion-ease-out);
}
.work-card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgb(255 248 230 / 0) 38%, rgb(255 248 230 / 0.16) 48%, rgb(255 250 240 / 0.28) 50%, rgb(255 248 230 / 0.16) 52%, rgb(255 248 230 / 0) 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 135% 0;
  opacity: 0;
}
@media (hover: hover) {
  .work-card:hover .work-card__img-wrap {
    transform: scale(1.075) translate3d(-1.4%, -0.9%, 0);
    transition: transform 6.5s cubic-bezier(0.12, 0.62, 0.3, 1);
  }
  .work-card:hover .work-card__img-wrap::after { animation: poster-glint 1100ms var(--motion-ease-in-out) both; }
}
@keyframes poster-glint {
  0% { background-position: 135% 0; opacity: 1; }
  100% { background-position: -35% 0; opacity: 1; }
}
.work-card:focus-within .work-card__img-wrap { transform: scale(var(--motion-scale-media-hover)); }
@media (prefers-reduced-motion: reduce) {
  .work-card .work-card__img-wrap { transform: none !important; }
  .work-card .work-card__img-wrap::after { animation: none !important; }
  /* A filter change moves cards between the columns (translate) and changes
     the last card's margin, which moves the end section. The reduced-motion
     rule in motion.css would ease both over 160 ms; here they land at once. */
  .work-grid > .work-card { transition-property: none; }
}

.work-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-media);
}
/* The poster clips overflow, so the ring sits just inside its edge: navy with
   a cream band inside it, so it reads on dark and bright footage alike. */
.work-card__play:focus-visible { --focus-offset: -3px; outline-width: 3px; box-shadow: inset 0 0 0 6px var(--gist-cream); }
.work-card__play-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  height: 44px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-control);
  /* A small cream tag with navy words over the footage (no ink scrim, r6).
     Hovered or focused it turns into the orange button with an ink label. */
  background: rgb(var(--gist-cream-rgb) / 0.94);
  color: var(--gist-navy);
  box-shadow: 0 0 0 1px rgb(var(--gist-navy-rgb) / 0.12);
  font-family: var(--type-label-small-family);
  font-weight: var(--type-label-small-weight);
  font-size: var(--type-label-small-size);
  letter-spacing: var(--type-label-small-tracking);
  text-transform: var(--type-label-small-case);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--hover) var(--ease-out), color var(--hover) var(--ease-out);
}
.work-card__play-chip svg { width: 18px; height: 18px; }
.work-card:hover .work-card__play-chip,
.work-card__play:focus-visible .work-card__play-chip { background: var(--color-action); color: var(--color-on-action); }
.work-card__play-chip svg { transition: transform var(--hover) var(--ease-out); }
.work-card:hover .work-card__play-chip svg { transform: scale(1.12); }
.work-card__ext { width: 12px !important; height: 12px !important; margin-left: -0.25em; }

.work-card__body {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-5);
}
.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.9em;
  color: var(--color-text-muted);
}
.work-card__meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.9em;
  vertical-align: 0.2em;
  border-radius: 50%;
  background: var(--color-line-strong);
}
/* Heading-3 (r8): Barlow 600 in sentence case. */
.work-card__title {
  font-family: var(--type-heading-3-family);
  font-size: var(--type-heading-3-size);
  font-weight: var(--type-heading-3-weight);
  text-transform: var(--type-heading-3-case);
  letter-spacing: var(--type-heading-3-tracking);
  line-height: var(--type-heading-3-leading);
  text-wrap: balance;
}
.work-card__len { color: var(--color-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-card__line { color: var(--color-text); max-width: 54ch; text-wrap: pretty; }
.work-card__part { color: var(--color-text-muted); }
.work-card__part b { color: var(--color-text); font-weight: 600; }
.work-card__note { color: var(--color-text-muted); }
.work-card__cta { margin-top: var(--space-1); justify-self: start; }
/* The label wraps in narrow cards (phones, two columns on a tablet), so the
   arrow runs with the text and follows the last word instead of standing
   alone at the far edge. The label's end padding holds the arrow's room and
   the arrow pulls back into it, so it can never wrap onto a line by itself.
   Padding keeps a 44 px target. */
.work-card__cta.link-arrow { display: block; min-height: 0; padding-block: 14px; text-wrap: balance; }
.work-card__cta > span { padding-right: calc(16px + 0.6em); }
.work-card__cta svg { display: inline-block; vertical-align: -0.2em; margin-left: -16px; }
.work-card__cta:hover > span { background-size: calc(100% - 16px - 0.6em) var(--border-strong); }

.work-empty {
  padding: var(--space-8) 0;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* The end: opened by the chapter rule (layout.css, "Section rhythm"), the
   crew's line at heading size and the button. */
.work-end {
  margin-top: var(--space-section);
  padding-top: var(--space-block);
  padding-bottom: var(--space-section);
  border-top: var(--rule-width) solid var(--line-rule);
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}
/* The statement role at heading-1 size (r8): the line is a sentence of over
   100 characters, so it reads in Barlow 600, sentence case. */
.work-end__line { max-width: calc(26 * var(--ch-statement)); font-size: var(--type-heading-1-size); }
/* Wide: the line on the left, the button on the right edge, on its baseline. */
@container col (min-width: 1150px) {
  .work-end { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-8); }
  .work-end > .btn { justify-self: end; }
}