/* magazyny — телефон (≤ 760 і телефон в альбомі): вертикальна стрічка під великий палець */
.M { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; border-bottom: 1.5px dashed var(--line); }
.m-top .brand { font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.m-hero { padding: 26px 0 8px; }
.m-h1 { font: 750 clamp(29px, 8.6vw, 40px)/1.05 var(--display); letter-spacing: -.02em; }
.m-lead { font-size: 16.5px; line-height: 1.5; margin-top: 14px; }
.m-cta { width: 100%; margin-top: 20px; }
.m-fitter { margin: 22px -4px 0; padding: 18px 14px 18px; }
.m-fitter .fld { gap: 8px; }
.m-fitter .fld input { font-size: 20px; padding: 0 8px; min-height: 56px; }
.m-fitter .feed { margin: -6px 4px 0; }
.m-fitter .ticket { padding: 16px 14px 14px; }
.m-fitter .t-dims { font-size: clamp(24px, 8vw, 32px); }
.m-h2 { font: 750 clamp(25px, 7vw, 32px)/1.1 var(--display); letter-spacing: -.015em; margin-bottom: 12px; }
.m-text { font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
.m-live, .m-row, .m-logo, .m-film-sec, .m-final { padding: 40px 0 8px; scroll-margin-top: 8px; }
.m-live figure, .m-logo figure { margin: 0; }
.m-frame { aspect-ratio: 1 / 1; }
.m-frame .go3d { z-index: 2; background: var(--label) url(media/poster-m.webp) center / cover no-repeat; }
.m-cap { margin-top: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.m-draw { margin-top: 18px; padding: 16px 14px; }
.M .tape { margin: 30px 0 0; }
.m-cards { list-style: none; margin: 0 -16px; padding: 6px 16px 18px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.m-card { flex: 0 0 70%; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; padding: 16px 16px 14px; color: var(--ink-2); }
.m-card b { font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.m-card .m-unit { font: 600 12px var(--mono); }
.m-card .m-name { font: 600 15px/1.35 var(--font); color: var(--ink); margin-top: 6px; }
.m-card .fit-yes { display: none; justify-self: start; margin-bottom: 6px; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 7px; border-radius: 4px; background: var(--lime); color: var(--lime-ink); }
.m-card.fits .fit-yes { display: inline-block; }
.m-card.best { outline: 3px solid var(--lime); outline-offset: -3px; }
.m-card:not(.fits) { opacity: .72; }
.m-card .row-3d { justify-self: start; margin-top: 10px; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); font: 650 14px/1 var(--font); }
.m-logo .logo-list { margin-top: 16px; }
.m-film-sec .film { aspect-ratio: 9 / 16; max-height: 82vh; margin: 0 auto; }
.m-film-sec video { width: 100%; height: 100%; object-fit: cover; }
.m-foot { margin-top: 36px; padding-top: 16px; border-top: 1.5px dashed var(--line); color: var(--ink-2); font: 400 12px/1.5 var(--mono); display: grid; gap: 6px; }
.m-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--desk); border-top: 1.5px dashed var(--line); transform: translateY(110%); transition: transform .25s; }
.m-bar.show { transform: none; }
.m-bar .cta { width: 100%; }
@media (prefers-reduced-motion: reduce) { .m-bar { transition: none; } }
/* Телефон в альбомі: низький екран — 3D і ролик не вищі за вікно */
@media (max-height: 500px) {
  .m-frame { aspect-ratio: 16 / 9; }
  .m-film-sec .film { max-height: 90vh; aspect-ratio: 16 / 9; }
}
