/* #lab: the "Selected work" heading and the featured project as one compact card. */
.lab { padding-bottom: clamp(20px, 2.4vw, 32px); }

.fx {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(22px, 3vw, 40px);
  cursor: pointer;
}
.fx__main { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.fx__title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; }
.fx__sum { max-width: 40ch; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.fx__chips .chip { height: 26px; font-size: 11.5px; }
.fx__metrics { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px clamp(24px, 3.4vw, 48px); padding-block: 6px; }
.fx__metrics .metric__value { font-size: clamp(32px, 3.2vw, 46px); }
.fx__metrics .metric__label { font-size: 13px; max-width: 14ch; }
.fx__grid { display: flex; align-items: center; gap: 14px; }
.fx__grid p { max-width: 30ch; color: var(--text-3); font-size: 13px; line-height: 1.45; }
.fx__glyph { flex: none; width: 52px; height: 52px; }
.gg-cell { fill: rgba(255, 240, 230, 0.13); }
.gg-held { fill: none; stroke: var(--ember); stroke-width: 1.2; stroke-dasharray: 3 2.4; }
.gg-dot { fill: var(--ember); }
.fx__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.fx__pr { color: var(--text-3); font-size: 13px; }
.fx__pr .link { color: var(--text-2); }

.fx__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); min-width: 0; }
.fx__vid { margin: 0; min-width: 0; }
.fx__frame { position: relative; overflow: hidden; aspect-ratio: 540 / 960; border-radius: var(--radius); border: 1px solid var(--line-2); background: #000; }
.fx__frame video { width: 100%; height: 100%; object-fit: cover; }
.fx__vid figcaption { margin-top: 10px; color: var(--text-3); font-size: 12.5px; line-height: 1.4; }

@media (max-width: 1000px) {
  .fx { grid-template-columns: 1fr; }
  .fx__media { max-width: 520px; }
}
@media (max-width: 560px) {
  .fx { padding: 18px; }
  .fx__metrics { grid-template-columns: repeat(3, auto); gap: 10px 18px; }
  .fx__metrics .metric__value { font-size: 28px; }
}