The previous CSS pattern (position:absolute, inset:0, max-width:100%, max-height:100%, aspect-ratio:16/9) was over-constrained: inset:0 fixed all four edges, leaving aspect-ratio with nothing to compute, so on initial layout the section silently stretched to fill the host instead of letterboxing 16:9. A subsequent reflow (triggered by a viewport resize) would re-resolve the layout and the section would snap to 16:9 — that's why "resizing fixed it." Switch to explicit container-query sizing: host gets container-type: size, section width and height are computed as min(100cqi, 100cqb * 16 / 9) and min(100cqb, 100cqi * 9 / 16) so both axes are explicit and content cannot push past the box. Host becomes a grid with place-items:center so the letterbox sits centered in its parent. overflow:hidden on the host clips anything that escapes the section before the density auto-fit converges. This also fixes the related density-auto-fit symptom: predictions were correct, but they read a wrong section.clientHeight on the first paint at certain viewports, so the chosen tier reflected ~50% more canvas than was actually 16:9. With the letterbox now stable from the first layout, slide-9 picks the correct density at every viewport on load — no resize required. Coalesce ResizeObserver and fonts.ready into a single rAF-batched fit so post-font-load measurements are never dropped by the previous reentrancy guard. Add a window 'load' backstop for image-bearing slides. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>