/* Ported from the approved r7 prototype (_workspace/brd_site_2026-09/preview/r7/wall.css) —
   the design of record, unchanged. */
/* THE WALL — Peter-approved concept B, polished with measured values (refs/motion/wall/MOTION_wall.md) */
.wall { position: relative; margin-top: calc(160 * var(--u)); padding-bottom: calc(10 * var(--u)); overflow: clip; }   /* flung tiles stay inside the wall */
.wall__head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--m) calc(40 * var(--u)); }
.wall__head .lbl { color: var(--dim); } .wall__head a.lbl { color: var(--foam); }
.wall__title { position: sticky; top: calc(50vh - 110 * var(--u));   /* hangs below its anchor: never above the section (clipped) or over the header */ height: 0; z-index: 4; pointer-events: none; color: var(--foam); transition: opacity .3s var(--e-ui); }
.wall__title span { display: inline-block; margin-top: calc(24 * var(--u)); font-size: calc(300 * var(--u)); line-height: .8; white-space: nowrap; will-change: transform; text-shadow: 0 8px 70px rgba(0,0,0,.45); }
.wall.hov .wall__title { opacity: .1; }
.wall__grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.wall__row { display: flex; gap: 6px; }
.wall__tile { position: relative; flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); overflow: hidden; background: var(--panel); will-change: transform;
  transition: filter .3s var(--e-out); }
.wall__tile video, .wall__tile img { width: 100%; height: 100%; display: block; transition: transform .3s var(--e-ui); }
.wall.hov .wall__tile { filter: brightness(.38); }
.wall.hov .wall__tile.hot { filter: none; }
.wall.hov .wall__tile.hot video, .wall.hov .wall__tile.hot img { transform: scale(1.04); }
.wall__tag { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: flex; flex-direction: column; gap: 7px; padding: 14px 18px 16px; background: var(--foam); color: var(--ink);
  transform: translate(-50%, -50%) scale(0); transform-origin: 0 0; transition: transform .45s var(--e-back); }
.wall__tag.on { transform: translate(64px, 18px) scale(1); }
.wall__tag .disp { font-size: 30px; line-height: .9; } .wall__tag .it { font-size: 16px; }
@media (max-width: 700px) { .wall__title span { font-size: 22vw; margin-top: 28px; } .wall__tag { display: none; } }