.wf { --wfm: clamp(8px, 0.7vw, 12px); padding: 0 var(--wfm); }
.wf + .wf, .wf-head + .wf { margin-top: var(--wfm); }


.wf-row { display: flex; gap: var(--wfm); align-items: flex-start; }
.wf-row > figure { position: relative; margin: 0; flex: var(--a, 1.5) 1 0; min-width: 0; }
.wf-row .ph { aspect-ratio: var(--a, 1.5); border-radius: 0; background: #121110; }
.wf-row .ph .contain { object-fit: contain; }


.wf-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--wfm); }
.wf-grid > figure { position: relative; margin: 0; }
.wf-grid .ph { aspect-ratio: var(--a, 1.5); border-radius: 0; }


.wf figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 6px 10px 5px; border-radius: 4px;
  background: rgba(10, 10, 10, 0.62); color: #F2F0EC; font-size: var(--cap); line-height: 1.3; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease-out, transform 0.35s cubic-bezier(.2, .7, .1, 1); }
.wf figcaption b { font-weight: 500; color: #F2F0EC; }
@media (hover: hover) and (pointer: fine) {
  .wf figure:hover figcaption, .wf figure:focus-within figcaption { opacity: 1; transform: none; }
}


.wf-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; padding: 22vh var(--m) 7vh; }
.wf-head .word { grid-column: 1 / 7; margin: 0; }
.wf-head .say1 { grid-column: 8 / 13; margin: 0; max-width: 40ch; }
.wf-head.small { padding-top: 14vh; padding-bottom: 5vh; }
.wf-head.small .say1 { grid-column: 1 / 7; }


.wf figure.rise { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease-out, transform 1s cubic-bezier(.2, .7, .1, 1); }
.wf figure.rise.in { opacity: 1; transform: none; }


@media (max-width: 760px) {
  .wf-row { flex-direction: column; }
  .wf-row > figure { flex: none; width: 100%; }
  .wf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf figcaption { position: static; opacity: 1; transform: none; background: none; color: var(--ink2); padding: 8px 0 0; max-width: none; }
  .wf figcaption b { color: var(--ink); }
  .wf-head { display: block; padding: 14vh var(--m) 5vh; }
  .wf-head .say1 { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .wf figure.rise { opacity: 1; transform: none; transition: none; } .wf figcaption { transition: none; } }
.wfs { padding-bottom: var(--wfm, 10px); }
.film-run { padding-top: 10vh; }