/* /motion-graphics (SPEC §10): the page's own layout; how the shape lab's parts look is in css/shape-lab.css.
   The first screen is one instrument: the headline and under it the knobs on the left, the picture on the right, the readout under
   both. On one column (below 900 px): headline → picture → knobs → Random / Reset → readout. There the picture always runs from
   gutter to gutter (the owner: «чтобы куб был по ширине в экран»); only its height is chosen per width: wider than tall on a tablet,
   about square on a phone, and never so tall that the knobs under it leave the screen it is seen on.
   The panel's rhythm: the knobs (label, dial, value) are one group. From 1200 px Random / Reset stand at the end of the knob row, on
   the dials' axis; below that they are a row of their own under the knobs, a clear gap away, from the first dial's left edge to the
   last dial's right one. The knob row never spreads wider than 584 px, so on a very wide window the dials stay a group. */
.mo-top{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:48px;padding-top:40px;padding-bottom:24px}
.mo-hero{grid-column:1;grid-row:1;padding-bottom:44px}
.mo-top h1{max-width:14ch}
.mo-top .lab{display:contents}
.mo-top .lab-view,.mo-top .lab-flatbox{grid-column:2;grid-row:1/3;min-height:560px;min-height:min(680px,calc(100svh - var(--header) - 136px))}   /* the first value: for a browser without svh */
.mo-top .lab-panel{grid-column:1;grid-row:2;align-self:end;display:grid;grid-template-columns:minmax(0,584px) auto;justify-content:space-between;column-gap:48px;row-gap:36px;align-items:center;border-top:var(--hair);padding-top:28px}
.mo-top .lab-read{grid-column:1/-1;grid-row:3;border-top:var(--hair);margin-top:28px;padding-top:12px}
@media (min-width:1700px){.mo-top .lab-panel{justify-content:start;column-gap:72px}}
/* a short window beside a wide one (a 13-inch laptop): the headline a size down, so the knobs stay on the first screen */
@media (min-width:900px) and (max-height:780px){.mo-top{padding-top:28px}.mo-top h1{font-size:clamp(32px,4.1vw,52px)}.mo-hero{padding-bottom:28px}.mo-top .lab-panel{padding-top:22px}.mo-top .lab-read{margin-top:20px}}
@media (max-width:1199px){
  .mo-top{column-gap:32px}
  .mo-top .lab-panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  .mo-top{display:block;padding-top:28px}
  .mo-hero{padding-bottom:28px}
  .mo-top h1{max-width:none}
  /* the height, not a ratio: a ratio capped by a max-height would shrink the width with it */
  .mo-top .lab-view,.mo-top .lab-flatbox{min-height:0}
  .mo-top .lab-view,.mo-top .lab-still{width:100%;height:clamp(280px,58vw,540px);height:max(280px,min(58vw,540px,calc(100svh - var(--header) - 300px)))}
  .mo-top .lab-panel{border-top:0;padding-top:24px;row-gap:32px}
  .mo-top .lab-read{margin-top:24px}
}
@media (max-width:599px){.mo-top .lab-view,.mo-top .lab-still{height:calc(100vw - 2 * var(--gut));height:max(260px,min(calc(100vw - 2 * var(--gut)),calc(100svh - var(--header) - 290px)))}}

/* ---- what it covers: the four kinds of the service's line as numbered rows on hairlines (a detail where the site has one) */
.mo-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.mo-cover .sec-head{margin:0}
.mo-list{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.mo-list li{display:grid;grid-template-columns:4ch minmax(0,1fr);gap:12px;align-items:baseline;padding:15px 0 16px;border-bottom:var(--hair)}
.mo-list b{display:block;font-weight:600;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.015em;line-height:1.15}
.mo-list p{margin:6px 0 0;color:var(--body-ink);font-size:15px;line-height:1.45;max-width:46ch}
.mo-cover .mo-more{margin:20px 0 0;color:var(--body-ink);font-size:15px;line-height:1.45;max-width:52ch}
.mo-more a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.mo-more a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:899px){.mo-cover{grid-template-columns:minmax(0,1fr)}}

/* ---- selected work */
.sw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gut,24px)}
.sw-grid .sw img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:1023px){.sw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sw-grid{grid-template-columns:1fr;gap:28px}}