/* ---------- 07: бегущие строки ---------- */
.mq {
  position: relative; overflow: hidden; background: var(--bg); color: var(--ink);
  display: grid; grid-template-columns: 100%; gap: clamp(36px, 7vh, 80px); padding: clamp(64px, 12vh, 140px) 0 clamp(80px, 14vh, 160px);
  --fs: clamp(58px, 9.4vw, 168px);
}
.mq-bar { display: flex; justify-content: space-between; gap: 20px; margin: 0 var(--pad); padding-bottom: 14px; border-bottom: 1px solid var(--rule); color: var(--soft); }
.mq-bar b { color: var(--ink); font-weight: 500; }
.mq-rows { display: grid; gap: clamp(6px, 1.2vh, 16px); }

.mq-row { overflow: visible; white-space: nowrap; }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-grp { display: flex; align-items: center; flex: none; }
.mq-row .mq-grp > * { flex: none; }

/* разделитель-звёздочка: маска SVG, крутится в сторону движения строки (длительность и направление ставит marquee.js) */
.mq-st {
  display: inline-block; width: .42em; height: .42em; margin: 0 .32em; background: var(--acc);
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
  animation: mq-spin var(--spin-dur, 8s) linear infinite; animation-direction: var(--spin-dir, normal);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 1.8v20.4M1.8 12h20.4M4.8 4.8l14.4 14.4M19.2 4.8 4.8 19.2'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes mq-spin { to { transform: rotate(360deg); } }
.mq.is-off .mq-st { animation-play-state: paused; }   /* вне экрана звёздочки стоят */

.mq-r1 { font: 800 var(--fs)/.9 var(--font-display); letter-spacing: -.05em; }
.mq-r2 { font: 700 var(--fs)/.9 var(--font-display); letter-spacing: -.04em; }
.mq-r2 .o { color: transparent; -webkit-text-stroke: max(1.2px, .012em) var(--ink); }
.mq-r2 em { font: italic 400 1.12em/.8 var(--font-serif); letter-spacing: -.02em; padding-right: .06em; }
.mq-pill { position: relative; width: calc(var(--fs) * 1.9); height: calc(var(--fs) * .78); margin-right: calc(var(--fs) * .16); border-radius: 999px; overflow: hidden; background: #cfc9bd; }
.mq-pill img { width: 100%; height: 100%; object-fit: cover; }
.mq-pill span { position: absolute; left: 14px; bottom: 10px; color: #f4efe6; mix-blend-mode: difference; }
.mq-word { font: italic 400 calc(var(--fs) * .78)/1 var(--font-serif); margin-right: calc(var(--fs) * .16); letter-spacing: -.02em; }
.mq-band { background: var(--ink); color: var(--bg); width: 112vw; margin-left: -6vw; rotate: -2.6deg; padding: .16em 0 .2em; margin-top: clamp(6px, 1.2vh, 16px); }
.mq-r4 { font: 600 calc(var(--fs) * .62)/1 var(--font-display); letter-spacing: -.03em; }
.mq-r4 em { font: italic 400 1.14em/1 var(--font-serif); letter-spacing: -.01em; color: #f6c9b6; }

@media (max-width: 760px) {
  .mq { --fs: clamp(60px, 21vw, 110px); }
  .mq-rows { gap: clamp(10px, 2.4vh, 24px); }
  .mq-band { rotate: -4deg; }
  .mq-bar span:last-child { display: none; }
}