/* Work (16 Oct 2026): one list, one spot per project on a wall. The cover decides the frame (wide 16:10 or tall 4:5);
   spots alternate left and right; the right-hand spot hangs lower, so the wall reads as hung pieces, not a grid.
   Each spot's loop plays while it is in view (js/work.js). On phones the spots stack, one under another. */

.work { position: relative; padding: 120px 0 clamp(120px, 12vw, 220px); }
.work .rule-h { top: 0; }
.work .wx { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); align-items: start; }

.wx-head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 14px; align-items: end;
  margin-bottom: clamp(56px, 6vw, 96px); }
.wx-head > p.label { grid-column: 1 / -1; margin: 0; }
.wx-title { grid-column: 1; margin: 0; font-size: clamp(4rem, 8vw, 8rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.9; }
.wx-sub { grid-column: 1; margin: 0; max-width: 32rem; color: var(--ink); }
.wx-pause { grid-column: 2; grid-row: 1; justify-self: end; color: var(--ink-2); border-bottom: 1px solid var(--hair); padding: 12px 0; min-height: 44px; }
.wx-pause:hover { color: var(--ink); }
.wx-filter { grid-column: 2; grid-row: 2 / span 2; align-self: end; display: flex; flex-wrap: wrap; gap: 6px; }
.wx-filter button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-2); border: 1px solid var(--hair);
  border-radius: 999px; padding: 10px 14px; min-height: 44px; transition: background-color var(--t-micro) var(--expo), color var(--t-micro) var(--expo); }
.wx-filter button:hover { color: var(--ink); }
.wx-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.wall { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g); row-gap: clamp(72px, 8vw, 150px); align-items: start; }
.spot[hidden] { display: none; }
.spot.side-l.is-wide { grid-column: 1 / span 7; }
.spot.side-l.is-tall { grid-column: 2 / span 4; }
.spot.side-r.is-wide { grid-column: 6 / span 7; margin-top: clamp(90px, 10vw, 200px); }
.spot.side-r.is-tall { grid-column: 9 / span 4; margin-top: clamp(90px, 10vw, 200px); }
.spot a { display: block; color: inherit; }
.spot .frame { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 10;
  box-shadow: 0 40px 60px -40px rgba(8, 6, 4, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.spot.is-tall .frame { aspect-ratio: 4 / 5; }
.spot .frame :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.0001);
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .spot a:hover .frame :is(img, video) { transform: scale(1.025); } .spot a:hover .nm { transform: translateX(6px); } }
.spot a:focus-visible .frame :is(img, video) { transform: scale(1.025); }
.spot .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 20px 0 0; color: var(--ink-2); }
.spot .meta .kind { margin-left: auto; color: var(--ink-2); }
.spot .src { border: 1px solid var(--hair); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.spot .src-client { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.spot .nm { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 3.25rem); letter-spacing: -0.045em; line-height: 1; margin: 12px 0 0;
  transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); }
.spot a:focus-visible .nm { transform: translateX(6px); }
.spot .ln { margin: 10px 0 0; max-width: 30rem; color: var(--ink); }
.spot .why { display: block; margin-top: 4px; font-style: italic; color: var(--ink-2); }

/* the spots rise into place as the reader reaches them (js/work.js marks them in view); never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .wall.rise .spot { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 900ms var(--expo), transform 1200ms var(--expo); }
  .wall.rise .spot.in { opacity: 1; transform: none; }
}

@media (max-width: 819px) {
  .work { padding-top: 88px; }
  .wx-head { grid-template-columns: minmax(0, 1fr); }
  .wx-filter { grid-column: 1; grid-row: auto; }
  .wx-pause { grid-column: 1; grid-row: auto; justify-self: start; }
  .wall { row-gap: 64px; }
  .spot.side-l, .spot.side-r { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .spot .frame, .spot.is-tall .frame { aspect-ratio: 4 / 3; }
  .spot .meta .kind { margin-left: 0; width: 100%; }
}
@media (forced-colors: active) {
  .spot .src, .wx-filter button { border-color: CanvasText; }
  .wx-filter button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}