/* Work detail page. Uses the shared Push + Proof stylesheet (Times New Roman 12pt, white, black). */
main { overflow-x: clip; }
.work { width: min(1100px, 100%); margin-left: auto; margin-right: auto; margin-bottom: 120px; }
.work .head { display: flex; align-items: baseline; margin: 0 0 32px; }
/* group 1: number + name (left). group 2: url + category + type, pushed right and ending on the window's right edge; category + type are a tighter sub-group */
.work .head a { text-decoration: underline; }
.work .head .n, .work .head .name { margin: 0; }
.work .head .n { flex: 0 0 60px; }
.work .head .url { margin-left: auto; white-space: nowrap; }
.work .head .cat { margin-left: 6em; white-space: nowrap; }
.work .head .type { margin-left: 1.25em; white-space: nowrap; }
.grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.fig { margin: 0; min-width: 0; }
/* The video file has a 64px shadow margin on each side (1500px window in a 1628px canvas). The window edge, not the shadow, lines up with the text. */
.fig video { cursor: pointer; display: block; width: 108.533%; max-width: none; margin-left: -4.267%; height: auto; aspect-ratio: 1628 / 1070; background: var(--paper); }
.fig figcaption { margin: calc(-4.8% + 36px) 0 0; position: relative; }
.fig .cap { margin: 0; }
.fig .cap .t { background: #ffee00; }
.fig .desc { margin: 6px 0 0; max-width: 560px; }
@media (max-width: 760px) {
  .work .head {
    display: grid;
    grid-template-columns: 2.4em 1fr;
    grid-template-areas:
      "n name"
      ".  url"
      ".  meta";
    row-gap: 20px;
    margin-bottom: 44px;
  }
  .work .head .n    { grid-area: n; }
  .work .head .name { grid-area: name; }
  .work .head .url  { grid-area: url; }
  .work .head .cat, .work .head .type { grid-area: meta; }
  .work .head .cat  { justify-self: start; }
  .work .head .url, .work .head .cat, .work .head .type { margin-left: 0; white-space: normal; }
  .work .head .type { justify-self: start; margin-left: 5.5em; }
  .work .head a { position: relative; }
  .work .head a::before { content: ""; position: absolute; inset: -13px -8px; }
  .grid { gap: 40px; }
}