/* Orli v3 site · Make your Orli (make.html)
   ---------------------------------------------------------------------------
   The title, one Orli made step by step (../../make/steps.css), what's in the
   trial box (../../trial-box/kit-photos/kit-photos.css) and the studio. This
   file is the page's own layout only. System tokens and components only; no
   handwriting. (3 Nov: the pinned live scroll, the two route strips, the kit
   line with its hand doodle and the "together" concept are gone.)
   ------------------------------------------------------------------------- */

/* ================================================================== hero */
.mk-hero { padding-block: var(--o-space-7) var(--o-space-6); }
.mk-hero .o-section-head { margin: 0; }
.mk-hero .o-display { max-inline-size: 15ch; text-wrap: balance; }
.mk-hero .o-lead { max-inline-size: 40em; }
/* The title with Your Orli's seat beside it (shown only to a visitor who has made one, as on Play). */
/* (at the end of the title's last line, never a line of its own) */
.mk-hero__title { display: flex; align-items: flex-end; gap: var(--o-space-4); }
.mk-hero__title .o-display { flex: 0 1 auto; min-width: 0; margin: 0; }
.mk-hero__orli { flex: none; margin-block-end: .15em; }
/* From 900px the title and the lead share one row, so the card is on the first screen sooner. */
@media (min-width: 900px) {
  .mk-hero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--o-space-8); align-items: end; }
  .mk-hero__head > .mk-hero__title { grid-column: 1; }
  .mk-hero__head > .o-lead { grid-column: 2; padding-block-end: .35em; }
}

/* ============================================================ the steps */
/* (the card is ../../make/steps.css; here only its place on the page) */
.mk-make { padding-block-start: 0; }

/* ============================================================ the studio
   The section header (title, lead, one button) beside a picture of the
   studio, on the warm band: the page's last stop. */
.mk-end__head { margin: 0; }
.mk-end__frame { aspect-ratio: 4 / 3; background: var(--o-canvas); }
.mk-end__frame img { object-fit: cover; object-position: 50% 40%; }