/* Ported from the approved r7 prototype (_workspace/brd_site_2026-09/preview/r7/marquee.css) —
   the design of record, unchanged. */
/* THE MARQUEE — Peter-approved concept C, polished (refs/motion/marquee/MOTION_marquee.md) */
.mq { padding-top: calc(170 * var(--u)); }
.mq__head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--m) calc(50 * var(--u)); }
.mq__head h1 { font-size: calc(160 * var(--u)); line-height: .8; }
.mq__head h1 sup { font-family: Inter; font-weight: 500; font-size: .1em; letter-spacing: .12em; vertical-align: top; margin-left: .4em; color: var(--sea); }
.mq__filters { display: flex; gap: calc(30 * var(--u)); }
.mq__filters button { background: none; border: 0; color: var(--dim); font: inherit; letter-spacing: inherit; text-transform: inherit; transition: color .25s var(--e-ui); }
.mq__filters button sup { font-size: .8em; margin-left: .25em; } .mq__filters button:hover, .mq__filters button.on { color: var(--foam); }
.mq__row { position: relative; display: block; overflow: hidden; height: calc(150 * var(--u)); transition: height .3s var(--e-ui), background-color .35s cubic-bezier(.87,0,.13,1); color: var(--foam); }
.mq__row.gone { height: 0; }
.mq__no { position: absolute; right: var(--m); top: 50%; transform: translateY(-50%); z-index: 2; color: var(--foam); background: var(--ink); padding: .8em 1em; border-radius: 999px; transition: color .35s, background .35s; }
.mq__line { display: flex; white-space: nowrap; will-change: transform; align-items: center; height: 100%; }
.mq__unit { display: flex; align-items: center; gap: calc(40 * var(--u)); padding-right: calc(40 * var(--u)); }
.mq__unit .disp { font-size: calc(150 * var(--u)); line-height: 1; padding-top: .06em; color: transparent; -webkit-text-stroke: 2px rgba(238,240,236,.5); transition: color .5s var(--e-out), -webkit-text-stroke-color .5s var(--e-out); }
.mq__unit .disp .ch { transition: transform .9s var(--e-out); }
.mq__unit .it { font-size: calc(46 * var(--u)); color: var(--dim); }
.mq__unit .star { font-size: calc(40 * var(--u)); color: var(--sea); }
.mq__row.lit .mq__unit .disp { color: var(--foam); -webkit-text-stroke-color: transparent; }
.mq__row.hot { background: var(--foam); }
.mq__row.hot .mq__unit .disp { color: var(--ink); -webkit-text-stroke-color: transparent; }
.mq__row.hot .mq__unit .disp .ch { transform: translateY(-.08em); }
.mq__row.hot .mq__unit .it, .mq__row.hot .mq__unit .star { color: var(--ink); }
.mq__row.hot .mq__no { background: var(--sea); color: var(--ink); }
.mq__float { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: calc(460 * var(--u)); will-change: transform; }
.mq__float .in { width: 100%; height: 100%; position: relative; clip-path: circle(0% at 50% 50%); transform: scale(.85); transition: clip-path .6s var(--e-out), transform .7s var(--e-back); }
.mq__float.on .in { clip-path: circle(75% at 50% 50%); transform: none; }
.mq__float .in > * { position: absolute; inset: 0; opacity: 0; }
.mq__float .in > .on { opacity: 1; }
.mq__float video, .mq__float img { width: 100%; height: 100%; display: block; }
@media (max-width: 700px) { .mq__head { flex-direction: column; align-items: flex-start; gap: 14px; } .mq__head h1 { font-size: 19vw; } .mq__filters { flex-wrap: wrap; gap: 12px; }
  .mq__row { height: 18vw; } .mq__unit .disp { font-size: 16vw; } .mq__unit .it { font-size: 5vw; } .mq__float, .mq__no { display: none; } }