/* Marzex Technologies, edition 4.4: Featured work on work.html, on its own. A copy of the parts of marzex-featured-stack.css
   and marzex-showcase.css that the posters need, so index.html's Featured work (marzex-showcase.css, marzex-featured-stack.css,
   marzex-showcase.js, marzex-featured.js) can change without touching this page, and the other way round.
   Posters only: no films, no zoom, no clip. Each card is its picture with a caption row beneath it (the logo, the name and the
   service tags). The name decodes and the hairline draws in on scroll (marzex-work-featured.js, class show-live). */

.fs { --stick: calc(var(--header-h) + 1rem); }

/* ---------- Stack ---------- */
.fs-stack { display: block; list-style: none; }
.fs-item + .fs-item { margin-top: 2rem; }

/* ---------- The card: the poster and its caption row together, on one grey card ---------- */
.show { list-style: none; }
.show.fs-item { height: auto; }
.show__item {
  margin: 0; padding: .75rem; border-radius: var(--r-3xl); background: color-mix(in srgb, var(--gunmetal) 80%, var(--ink)); color: var(--paper);
}
.show__card {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  height: min(calc(100vh - var(--stick) - 10rem), 46rem);
  border-radius: var(--r-2xl); background: var(--gunmetal); color: var(--paper);
}
.show__still {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- The caption row: the logo and name, a hairline, and the tags ---------- */
.show__bar {
  display: flex; align-items: center; gap: 1.25rem; min-height: 3.5rem; margin: .75rem 0 0; padding: 0 .5rem .25rem;
}
.show__brand { flex: none; display: flex; align-items: center; gap: 1rem; }
.show__mark { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg); overflow: hidden; }
.show__mark svg { display: block; width: 100%; height: 100%; }
.show__mark--sermo { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 28%, transparent); }
.show__mark--sermo svg { width: 62%; height: 62%; }
.show__title { font: 500 clamp(1.5rem, 2.4vw, 2.25rem)/1 var(--sans); letter-spacing: -.025em; white-space: nowrap; }
.show__rule { flex: 1 1 auto; min-width: 2rem; height: 1px; background: currentColor; opacity: .8; }
.show__tags { flex: none; display: flex; margin: 0; padding: 0; list-style: none; font: 400 1.0625rem/1.2 var(--sans); white-space: nowrap; }
.show__tags li + li::before { content: "\2022"; margin: 0 .6rem; opacity: .6; }

/* ---------- Scroll motion (marzex-work-featured.js): each card fades in as it reaches the screen, its hairline draws
   from the left and its tags fade in after. The name decodes in the script. No zoom, no slide. ---------- */
.show-live .show__item { opacity: 0; transition: opacity .9s var(--s-power2-out); }
.show-live .show__item.is-in { opacity: 1; }
.show-live .show__rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--s-power2-out) .25s; }
.show-live .show__item.is-in .show__rule { transform: scaleX(1); }
.show-live .show__tags { opacity: 0; transition: opacity .6s ease .5s; }
.show-live .show__item.is-in .show__tags { opacity: 1; }

/* ---------- Narrower ---------- */
@media (max-width: 768px) {
  .fs { --stick: calc(var(--header-h) + .5rem); }
  .fs-item + .fs-item { margin-top: 1rem; }
  .show__item { padding: .5rem; border-radius: var(--r-2xl); }
  /* The poster's own 16:9, so nothing is cropped */
  .show__card { border-radius: var(--r-lg); height: auto; aspect-ratio: 16 / 9; }
  .show__bar { flex-wrap: wrap; gap: .5rem .875rem; min-height: 0; margin-top: .625rem; padding: .25rem .25rem .375rem; }
  .show__mark { width: 2.25rem; height: 2.25rem; }
  .show__title { font-size: 1.375rem; }
  .show__rule { display: none; }
  .show__tags { order: 3; flex-basis: 100%; font-size: .9375rem; }
}