/* Marzex Technologies, edition 4.4: Work page (work.html).
   Featured work: the two showcases as posters (marzex-work-featured.css and .js, this page's own copy), with a smaller centred title.
   Other works: the five platforms as rows, styled like the ledger on Home (bone cards, ink fill on hover). No zoom. */

/* ---------- Featured work: the title, centred, smaller than Home's ---------- */
.wk-head { display: grid; justify-items: center; gap: 1.25rem; margin-bottom: 4rem; text-align: center; }
.wk-title { font: 400 clamp(2rem, 4.5vw, 4rem)/1 var(--sans); letter-spacing: -.03em; white-space: nowrap; }

/* ---------- Other works: the platforms as rows, all inside one bone panel (the section is theme-bone.panel) ---------- */
.ow { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.ow__card {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-2xl);
  border-bottom: 1px solid var(--hair); color: inherit; scroll-margin-top: calc(var(--header-h) + 2rem);
  transition: color .4s var(--s-power2-out);
}
/* The row fills ink from the left on hover or focus, as the ledger rows on Home do */
.ow__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--s-power2-out);
}
.ow__card:hover, .ow__card:focus-within { color: var(--paper); }
.ow__card:hover::before, .ow__card:focus-within::before { transform: scaleX(1); }
.ow__card > a {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 14rem) 2.5rem; align-items: center; column-gap: 1.75rem;
  padding: 1rem 1.5rem 1rem 1rem; color: inherit; text-decoration: none;
}
.ow__card > a:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.ow__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; }
.ow__thumb .media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ow__text { display: grid; gap: .5rem; min-width: 0; }
.ow__title { margin: 0; font: 500 clamp(1.25rem, 1.8vw, 1.625rem)/1.1 var(--sans); letter-spacing: -.02em; }
.ow__desc { max-width: 58ch; }
.ow__card .go { justify-self: end; }

/* ---------- Hero stock photo: the Vision film's frame on index.html (16:9, 4:5 on a phone) ---------- */
.hero__media .frame { aspect-ratio: 16 / 9; }

/* ---------- Narrower ---------- */
@media (max-width: 768px) {
  .hero__media .frame { aspect-ratio: 4 / 5; }
  .wk-head { margin-bottom: 2.5rem; }
  .ow__card > a { grid-template-columns: 5.5rem minmax(0, 1fr) 2rem; column-gap: 1rem; row-gap: .5rem; align-items: start; padding: .75rem .875rem .75rem .75rem; }
  .ow__thumb { grid-column: 1; grid-row: 1 / 3; }
  .ow__text { grid-column: 2; grid-row: 1; }
  .ow__line { grid-column: 2; grid-row: 2; }
  .ow__card .go { grid-column: 3; grid-row: 1; }
}