/* QLINE - project experience
   Shares the case-study layer (ox-*) from onyx.css. This file only
   adds framing for light interface plates living on a dark page. */

/* UI screenshots are plates: a thin line holds the white surface */
.ql-frame {
  border: 1px solid var(--line);
  overflow: hidden;
}
.ql-frame img, .ql-frame video {
  display: block;
  width: 100%;
  height: auto;
}

/* portrait pieces (phone captures, card loop) stay narrow and calm */
.ql-phone { max-width: 24rem; }
.ox-duo .ql-phone { justify-self: center; }

/* the opening has no film: the wordmark carries the frame alone */
.ql-open .ox-name img { filter: none; opacity: 0.96; }

/* motion duo: two small loops side by side, centered */
.ql-loops { align-items: start; }
.ql-loops figure { margin-inline: auto; }