// VariationDense — desktop V3 layout for the news article. // Three-column grid: 180px TOC / minmax(0,1fr) body / 280px promo + most-read. // Reading progress bar wired to scroll position. function CDReadingProgressBar({ height = 4 }) { const [pct, setPct] = cdUseState(0); cdUseEffect(() => { let raf = null; const update = () => { raf = null; const article = document.getElementById('cd-article-grid'); if (!article) return; const articleTop = article.getBoundingClientRect().top + window.scrollY; const articleHeight = article.offsetHeight; const vh = window.innerHeight; const denom = Math.max(1, articleHeight - vh); const raw = (window.scrollY - articleTop) / denom; const clamped = Math.max(0, Math.min(1, raw)); setPct(clamped); }; const onScroll = () => { if (raf == null) { raf = window.requestAnimationFrame(update); } }; window.addEventListener('scroll', onScroll, { passive: true }); update(); return () => { window.removeEventListener('scroll', onScroll); if (raf != null) window.cancelAnimationFrame(raf); }; }, []); return (

); } function VariationDense({ topic, mostRead, bodySize = 18 }) { const sections = [ { id: "h2-1", label: topic.h2_1 }, { id: "h2-2", label: topic.h2_2 }, { id: "h2-3", label: topic.h2_3 }, { id: "h2-4", label: topic.h2_4 }, ]; const onTocClick = (e, id) => { e.preventDefault(); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; return (

{/* Left rail: TOC + reading progress */} {/* Center column: article body */}

{topic.headline}

{topic.dek}

A residential Australian kitchen mid-renovation, with exposed timber framing and dust sheets visible. Editorial illustration. — Photograph ConstructionDaily / Investigative photography. Image illustrative — no specific contract or homeowner pictured.

{/* Right rail: sticky promo + most read */}