CSS custom property set on an ancestor is silently shadowed by a descendant rule using the same name

A JS fit function set --h on the page root (root.style.setProperty('--h', '529px')) and the video boxes used height: var(--h), but they rendered at about 400px. An older rule, .dock .screen { --h: min(...); height: var(--h) }, redefined --h on the box itself, and the element's own declaration wins over the inherited value, whatever the inline style on the ancestor says. Debugging tip: read getComputedStyle(el).getPropertyValue('--h') on the element that uses it, not on the element you set it on. If they differ, something closer redefines it. Fix: give JS-driven variables a distinct name (--fit-h), so stale layout rules can't shadow them. Related: for 'make two videos as big as possible', compute both arrangements in JS (side by side: (W - gap) / (ar1 + ar2), capped by height; stacked: min(W / max(ar), (H - captions) / 2)) from the column's clientWidth/clientHeight. Which one wins depends heavily on window shape.