/* One story, one block each: Robin's day on / and /features/. Markup: components/fx.njk; window frame: pages/ux.css. */
.fx { padding-block: clamp(40px, 4.5vw, 72px); }
.fx-block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fx-block > * { min-width: 0; }
.fx-block--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.fx-block--flip .fx-copy { order: 2; }

/* Text column: eyebrow, heading with one pose, one sentence, a few short rows. */
.fx-eyebrow { margin-bottom: 12px; font: 500 .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fx-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(12px, 2vw, 24px); align-items: center; }
.fx-head h2, .fx-head h3 { margin: 0; }
main .fx-head > .gm-pose { display: block; justify-self: end; margin-right: 8px; }
.fx-lede { margin: 18px 0 0; max-width: 40ch; color: var(--text-mut); font-size: 1.125rem; line-height: 1.55; }
.fx-rows { list-style: none; margin: 28px 0 0; padding: 0; }
.fx-rows li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); }
.fx-label { padding-top: 3px; font: 500 .72rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mut); }
.fx-rows div { min-width: 0; color: var(--text-mut); font-size: 15.5px; line-height: 1.5; overflow-wrap: break-word; }
.fx-rows b { font-weight: 600; color: var(--text); }
.fx-screen--phone { display: none; }

@media (max-width: 899px) {
  .fx-block, .fx-block--flip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fx-block--flip .fx-copy { order: 0; }
  .fx-screen--wide { display: none; }
  .fx-screen--phone { display: block; margin-top: 24px; }
}
@media (max-width: 480px) {
  .fx { padding-block: 48px; }
  .fx-rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fx-head .gm-pose { --gw: 80px; }
}