:root{--sky-image:url(assets/optimized/sky-desktop.webp);--coal-texture-image:url(assets/optimized/coal-texture-desktop.webp);--coal-stone-image:url(assets/optimized/coal-stone-desktop.webp);--brown-tile-image:url(assets/optimized/brown-tile-desktop.webp);--quarry-image:url(assets/optimized/quarry-desktop.webp);}
@media(max-width:700px){:root{--sky-image:url(assets/optimized/sky-mobile.webp);--coal-texture-image:url(assets/optimized/coal-texture-mobile.webp);--coal-stone-image:url(assets/optimized/coal-stone-mobile.webp);--brown-tile-image:url(assets/optimized/brown-tile-mobile.webp);--quarry-image:url(assets/optimized/quarry-mobile.webp);}}
:root{color-scheme:dark;--blue:#1972aa;--yellow:#fff600;--font:'Fira Sans','Noto Sans',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{background:var(--blue);color:#fff;font-family:var(--font)}
.story{width:100%;container-type:inline-size;font-size:clamp(17px,calc(.9vw + 5px),22px);line-height:1.5}  /* Artwork fills wide screens; paragraph measures remain capped independently below. */
img{display:block;max-width:100%;height:auto}
figure,blockquote,h1,h2,h3,p{margin:0}
section,header,footer{position:relative}
.copy{position:relative;z-index:2;width:80%;margin:0 auto}
.copy p+p{margin-top:1em}
.copy.narrow{width:65%}.copy.medium{width:71%}.copy.wide{width:80%}
.copy[data-source-layer]{width:min(100% - 3rem,50rem);margin:0 auto}  /* one shared measure for every paragraph block, centred: text keeps the source line breaks and a common left edge, with equal space either side */
.copy+.copy{margin-top:2.5rem}
.section-heading{position:relative;width:90%;margin:6cqw auto 3rem;padding-bottom:1.25rem;text-align:center;font-size:clamp(23px,2.6cqw,40px);line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.section-heading::after{content:"";position:absolute;width:min(48.2cqw,560px);height:2px;background:currentColor;bottom:0;left:50%;transform:translateX(-50%)}
.blue{background:var(--blue)}
.coal-ground{background:#242222 var(--coal-texture-image) center top/100% auto repeat-y;isolation:isolate}
.coal-ground::before{content:"";position:absolute;inset:0;background:#0008;z-index:-1}
.hero{background:var(--sky-image) center top/100% auto no-repeat;color:#152d5d;overflow:hidden}
.hero h1{padding-top:12.5cqw;text-align:center;font-size:clamp(26px,3cqw,48px);line-height:1.15;letter-spacing:.02em}
.hero .hero-lead{margin-top:2.5rem;color:#373737;font-size:clamp(15px,1.3cqw,20px);font-style:italic;line-height:1.5}
.hero-bridge{position:relative;margin-top:21cqw;aspect-ratio:1920/1010}
.hero-bridge img{position:absolute;left:0;top:0;width:111.35%;max-width:none}
/* train layer from the PSD smart object (2138×1010 frame): box x 382–1656, y 0–270. The photo is 111.35% of the container wide, so left 382/2138·111.35, width 1274/2138·111.35 */
.hero-bridge .hero-train{left:19.89%;top:0;width:66.35%;transform-origin:0 100%}
/* deck front face, in front of the wheels: the same photo clipped to the strip between the parapet top edge and just below the rail (photo coords 2138×1010: parapet 124+.106(x-400), rail 152+.0927(x-500)) */
.hero-bridge .hero-deck{clip-path:polygon(17.7% 12.05%,77.9% 25.55%,77.9% 27.3%,17.7% 15.4%);pointer-events:none}
.opening{margin-top:-20.15cqw;padding-top:32.2cqw;background-color:transparent}
.opening::before{top:15.6cqw;background:linear-gradient(transparent,#0009 9cqw)}
.opening .mine{position:absolute;left:-24.1%;top:0;width:130%;max-width:none;z-index:-2}
.mine-scene{aspect-ratio:7680/2570}
.mine-background{width:100%}
.mine-truck{position:absolute;left:39.8046875%;top:10.93385214%;width:11.19791667%;height:auto}
.opening .truck-queue{width:100%;margin:1cqw 0 2.4cqw}
.opening .terminal{width:52.92%;margin:2.8cqw auto 0}
.national{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 0;margin:4cqw 0 0}
/* the scene needs its own ground, because it is pinned while the section's ground scrolls behind it, but the
   same photograph at a different scale meets the section's along two straight lines. Feather its edges. */
.national::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0008,#0008),var(--coal-texture-image) center/cover;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.national-content{position:relative;container-type:inline-size;width:min(100%,1600px,165svh)}  /* map height ≤ 77svh so the zoomed north edge stays inside the pinned screen */
.national-art{position:relative;aspect-ratio:1920/900;width:100%;overflow:visible}  /* Static mode keeps the full-country artwork. */
.national-geography{position:absolute;inset:0}
.national .map{position:absolute;width:94.9%;left:2.45%;top:0}
.national .routes{position:absolute;left:49.7%;top:17.4%;width:23.23%}
.national .routes-new{aspect-ratio:1338/2290}
.routes-new .city{font-size:clamp(6px,.7cqw,11px);white-space:nowrap}
.national-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:90%;margin:20px auto 0;text-align:center;font-weight:700;line-height:1.2;text-shadow:0 1px 3px #000}
.national-stats .year{font-size:clamp(28px,4.2cqw,64px);margin-bottom:.5rem}
.national-stats .stat-label{font-size:clamp(12px,1.1cqw,17px);letter-spacing:.04em;text-transform:uppercase}
.national-stats .stat-value{font-size:clamp(22px,3cqw,46px);margin-top:.25rem;line-height:1.1}
.national-stats .cargo-label{margin-top:1rem}
.national-stats .cargo-value{font-size:clamp(20px,2.6cqw,40px)}
.stat-change{display:block;font-size:clamp(12px,1.25cqw,20px);line-height:1.3;margin-top:.3em;color:var(--yellow)}
.national-source{font-size:clamp(12px,1.1vw,18px);margin-top:20px;text-align:center;color:#ddd}
.national--animated{height:100svh;height:100lvh;min-height:0;padding:24px 0;gap:16px;overflow:hidden}
/* A fixed reading column and a separate camera viewport keep the figures clear during the close-up. */
.national--animated .national-content{display:grid;grid-template-columns:32% minmax(0,1fr);flex:1;min-height:0;width:min(100%,1700px)}
.national--animated .national-art{grid-column:2;grid-row:1;height:100%;aspect-ratio:auto;overflow:hidden}
.national--animated .national-geography{inset:auto;left:0;top:0;width:100%;aspect-ratio:1920/900;transform-origin:0 0}
.national--animated .national-stats{grid-column:1;grid-row:1;align-self:center;position:relative;left:auto;top:auto;width:calc(100% - 40px);margin:0 auto;grid-template-columns:1fr;gap:0}
.national--animated .national-state{grid-area:1/1}
.national--animated .national-source{flex:none;margin-top:0}
.city{position:absolute;font-size:clamp(11px,1.15cqw,18px);font-weight:700;line-height:1.2;text-shadow:0 1px 3px #000}
/* photo strip: native horizontal scroll with snap, three across on desktop, one at a time on phones; add <img> tags to extend it */
.gallery{position:relative;z-index:2;margin-top:24px}
.construction-photos{display:flex;gap:2.1%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.construction-photos::-webkit-scrollbar{display:none}
.construction-photos:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.construction-photos img{min-width:0;flex:0 0 calc((100% - 4.2%)/3);height:19.1cqw;object-fit:cover;scroll-snap-align:start}
.gallery-nav{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px}
.gallery-nav button{width:44px;height:44px;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;opacity:.85}
.gallery-nav button::after{content:"";width:10px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(135deg)}
.gallery-nav .next::after{transform:rotate(-45deg)}
.gallery-nav button:disabled{opacity:.3;cursor:default}
.gallery-nav .dots{display:flex;gap:0}
.gallery-nav .dots button{width:32px;height:44px;opacity:1}
.gallery-nav .dots button::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;opacity:.35;transform:none}
.gallery-nav .dots button.on::after{opacity:1;background:var(--yellow)}
.gallery-nav button:focus-visible{outline:2px solid var(--yellow);border-radius:4px}
.timeline-first{position:relative;height:115.5cqw;isolation:isolate}
.timeline-first::before{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,var(--blue) 55%);z-index:-1}
.timeline-first .track{position:absolute;left:44.6%;top:-9.5cqw;width:9.27%;height:91.2cqw;object-fit:cover;object-position:top}
.trackclip{position:absolute;inset:0;overflow:hidden;pointer-events:none;container-type:size}
.timeline-title{position:relative;z-index:2;padding:28px 20px 24px;text-align:center;font-size:clamp(14px,1.7vw,28px);letter-spacing:.04em;font-weight:700;text-transform:uppercase}
.milestone{position:absolute;z-index:3;text-align:center;font-size:clamp(14px,1.3cqw,20px);font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.2}
.milestone strong{display:block;font-size:2.1em;margin-top:.12em}
@media(min-width:701px){.milestone{white-space:nowrap}}
.milestone.first{left:55%;top:10cqw;width:37%}.milestone.second{left:17%;top:37cqw;width:26%}
.timeline-first .cloud-small{position:absolute;left:8.18%;top:14.8cqw;width:38.18%;z-index:2;pointer-events:none}
.timeline-first .cloud-wide{position:absolute;left:-12.6%;top:53.65cqw;width:114.5%;max-width:none;z-index:2;pointer-events:none}
.export{padding-top:1.5cqw}
.chart{margin:3cqw auto 5.8cqw}
.chart-title{text-transform:uppercase;font-size:clamp(16px,1.5cqw,24px);letter-spacing:.04em;line-height:1.25;margin:0 0 1.5rem}
.revenue .chart-title{margin-left:11.9%}
.coal .chart-title{text-align:center}
.bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;width:86%;height:32.8125cqw;margin-left:7.5%;border-left:1px solid #ffffff30;border-bottom:1px solid #ffffff30;background:repeating-linear-gradient(to top,#ffffff30 0 1px,transparent 1px 20%)}
.bar{height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.bar-art{position:relative;width:43%;height:var(--height);background:var(--yellow);transform-origin:bottom}
.revenue .bar-art{background:transparent}
.revenue .bar-art::before{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleY(var(--bar-scale,1));transform-origin:bottom;pointer-events:none}
.revenue .coin-bar{width:68%}
.revenue .coin-bar::before{display:none}
.revenue-stack{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Crop only the transparent margins of the supplied 745×489 image (art bounds 637×369). */
.revenue-coin{--coin-progress:clamp(0,calc((var(--bar-scale,1)*(var(--coin-count) + 1) - var(--coin-index))/2),1);position:absolute;left:50%;margin-left:calc(var(--coin-width)/-2);width:var(--coin-width);aspect-ratio:637/369;background:url(assets/design/revenue-coin.png) 50% 56.666667%/116.954474% 132.520325% no-repeat;opacity:clamp(0,calc(var(--coin-progress)*2),1);transform:translateY(calc((var(--coin-progress) - 1)*var(--coin-drop)))}
.value{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:.35cqw;font-weight:600;white-space:nowrap;font-size:clamp(12px,1.15cqw,18px);line-height:1.1;text-align:center}
.years{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:86%;margin:.6cqw 0 0 7.5%;text-align:center;font-size:clamp(12px,1.3cqw,20px)}
.chart-copy{margin-top:0}
.coal{margin-top:4.5cqw}
.coal .bar-art{width:56%;background:transparent}
.coal .bar-art::before{content:"";position:absolute;inset:0;background:var(--coal-stone-image) calc(var(--column)*-12.3cqw) bottom/82.5cqw auto;clip-path:inset(var(--coal-clip,0%) 0 0 0);pointer-events:none}
.chart-train{position:relative;height:8.75cqw;margin-top:-8.75cqw;background:url(assets/design/horizontal-track.webp) left bottom/auto .73cqw repeat-x}
.chart-train .wagons{position:absolute;left:5.2%;bottom:.5cqw;width:69.635%}
.chart-train .locomotive{position:absolute;left:74.53%;bottom:.73cqw;width:20.83%}
.coal .years{margin-top:.6cqw}
/* Leave room for the title, highest value and years throughout the desktop hold. */
@media(min-width:701px){
 .chart{padding-top:16px;padding-bottom:16px}
 .chart .bars{height:min(32.8125cqw,calc(100svh - 210px))}
 .chart .chart-title{margin-bottom:48px}
}
.cost-heading{margin-top:4cqw}
.isometric{position:relative;display:grid;place-items:center;width:100%;height:100svh;min-height:320px;padding-bottom:112px;overflow:hidden;margin:0 auto;background:var(--blue)}
.isometric-plane{position:relative;width:min(100%,1040px,calc(110svh - 140px));aspect-ratio:1920/1536}
.isometric-rail{position:absolute;left:6.46%;top:10%;width:87.13%;aspect-ratio:1920/1192}
.isometric .track{position:absolute;width:53.7%;max-width:none}
.isometric .track-0{left:74.3%;top:-19.46%}.isometric .track-1{left:23.44%;top:27.85%}.isometric .track-2{left:-27.5%;top:75.25%}
.isometric .track-before{left:125.16%;top:-66.77%}.isometric .track-after{left:-78.44%;top:122.65%}
.isometric .track-mid-before{left:176.02%;top:-114.08%}.isometric .track-far-before{left:226.88%;top:-161.39%}
.isometric .track-mid-after{left:-129.38%;top:170.05%}.isometric .track-far-after{left:-180.32%;top:217.45%}
.isometric .train{position:absolute;left:8%;top:10%;width:86%;max-width:none}
.isometric .truck{position:absolute;width:7.4%;left:calc(22% + var(--row)*6.2% + var(--column)*9.5%);top:calc(71% + var(--row)*4.8% - var(--column)*6.94%)}
.transport-comparison{position:absolute;top:calc(100% + 16px);left:50%;width:min(560px,calc(100vw - 40px));transform:translateX(-50%);font-size:clamp(14px,1.15vw,18px);line-height:1.4;text-align:left}
.isometric .credit{position:absolute;left:max(20px,calc(50% - 400px));top:17%;font-size:clamp(12px,1.25vw,20px);font-style:italic;font-weight:700;color:#7cc3f5}
@media(min-width:801px){
 .transport-story{height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr);padding:32px 0 16px;background:var(--blue);overflow:hidden}
 .transport-copy .source-break{display:none}
 .transport-copy .cost-heading{margin-top:20px}
 .transport-story .isometric{height:100%;min-height:0;container-type:size;overflow:visible}
 .transport-story .isometric-plane{width:min(100cqw,1040px,125cqh)}
}
/* Unpinned short windows scroll through the artwork and caption at a readable size. */
@media(min-width:801px) and (max-height:479px){
 .transport-story{height:auto;grid-template-rows:auto auto}
 .transport-story .isometric{height:auto;container-type:inline-size}
 .transport-story .isometric-plane{width:min(100cqw,1040px,140svh)}
}

.yard{width:60.68%;margin:0 auto}
.cost-copy{margin-top:2.4cqw}
.industry{position:relative;margin-top:0}
.excavator{position:relative;z-index:2;width:107.86%;max-width:none;margin-left:-7.97%}
.excavator img{width:100%;height:auto}
.excavator-scoop{display:none;position:absolute;inset:0}
.excavator--animated{isolation:isolate}
.excavator--animated .excavator-scoop{display:block}
/* Complementary alpha keeps the shared truck/background steady during the photo dissolve. */
.excavator--animated img{mix-blend-mode:plus-lighter}
.dividends{position:relative;margin-top:-26.67cqw;padding:22.8cqw 0 9.7cqw;background:linear-gradient(transparent 0,#15141399 35%,#242222 100%),var(--quarry-image) center top/100% auto no-repeat}
.dividends table{position:relative;width:min(78.54%,960px);margin:auto;border-collapse:collapse;font-size:clamp(14px,1.3cqw,20px);font-weight:400;text-align:center;line-height:1.2;color:#fff;background:#17130f60}
.dividends caption{padding:0 16px 28px;font-size:clamp(19px,1.8cqw,28px);font-weight:700;line-height:1.35;text-align:center}
.dividends th{font-weight:400;font-size:clamp(12px,1.05cqw,16px);padding:.5rem .4rem .9rem;opacity:.85}
.dividends td{border-top:1px solid #ffffff50;padding:1rem .5rem}
.dividends th:nth-child(1){width:16%}.dividends th:nth-child(2){width:27%}.dividends th:nth-child(3){width:28%}.dividends th:nth-child(4){width:29%}
.after-industry{padding-top:0}
/* Carry the quarry's final colour into the coal texture so the section edge disappears. */
.after-industry::before{background:linear-gradient(#242222,#0008 clamp(140px,12cqw,220px))}
.after-industry .yard{margin-top:2.5cqw}
.environment-copy{margin-top:2.7cqw}
.after-industry .section-heading{margin-top:clamp(160px,12cqw,280px);margin-bottom:clamp(128px,10cqw,224px)}
.after-industry .section-heading::after{transform:translateX(-50%) scaleX(var(--chapter-rule-scale,1))}
.next-bridge{position:relative;z-index:2;aspect-ratio:1920/652;overflow:hidden}
.next-bridge img{position:absolute;left:-1.04%;width:103.65%;max-width:none}
/* train layer from the PSD smart object (1990×652 frame): box x 318–1740, y 0–290, placed on the same 103.65%-wide photo */
.next-bridge .next-train{left:15.53%;top:0;width:74.07%}
.brown-ground{background:#60514b var(--brown-tile-image) center top/100% auto repeat-y;isolation:isolate}
.brown-ground::before{content:"";position:absolute;inset:0;background:#0006;z-index:-1}
.next-line{padding-top:2.2cqw;background:none}
/* One continuous gravel texture rises over the bridge foreground, as in the PSD.
   Keep it outside the moving bridge so its lower edge never exposes a section seam. */
.next-line::before{top:-20cqw;background:linear-gradient(#0006,#0006),var(--brown-tile-image) center top/100% auto repeat-y,#60514b;-webkit-mask-image:linear-gradient(transparent,#000 20cqw);mask-image:linear-gradient(transparent,#000 20cqw);pointer-events:none}
.next-line .copy+.copy{margin-top:2.8cqw}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.3%;margin:2.1cqw 0 3.7cqw}
.photo-pair img{width:100%;height:34.17cqw;object-fit:cover}
.trace{position:relative;width:61.3%;margin:2.7cqw auto 4.3cqw}
.trace canvas,.trace .line{position:absolute;inset:0;width:100%;height:100%}
.trace .line{display:none}
html:not(.js) .trace .line,.trace.static .line{display:block}
.minister{width:63%;margin:5.8cqw auto 0}
.minister blockquote{font-size:clamp(21px,2cqw,30px);font-weight:700;line-height:1.35;text-align:center}
.minister figcaption{display:flex;align-items:center;justify-content:center;gap:2.5rem;margin:2rem 0 0;font-size:clamp(14px,1.1cqw,17px);line-height:1.4;text-align:center}
.minister figcaption img{width:clamp(96px,11cqw,170px);border-radius:8px}
.project-facts{--rail:9.27cqw;position:relative;height:135cqw;isolation:isolate}
.project-facts::before{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,var(--blue) 70%);z-index:-1}
.project-facts .track{position:absolute;left:46.8%;top:3cqw;width:9.27%;height:104.5cqw;object-fit:cover;object-position:top}
.project-facts .trackclip{top:3cqw;bottom:auto;height:104.5cqw;mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
.project-facts .train{position:absolute;left:51.435%;top:15cqw}
.project-fact{position:absolute;z-index:3;width:25%;font-size:clamp(15px,1.3cqw,20px);line-height:1.45}
.project-fact h3{font-size:clamp(20px,1.8cqw,28px);line-height:1.2;margin-bottom:.75rem}
.project-fact .copy{width:100%;margin-left:0;margin-right:0}
.project-fact .source-break{display:none}  /* the poster's narrow column breaks would wrap word by word at screen type sizes */
.project-fact.construction{left:22.9%;top:11.67cqw}.project-fact.investment{left:57.5%;top:35.8cqw}.project-fact.returns{left:21.2%;top:56.4cqw}
.project-facts .cloud-wide{position:absolute;left:-12.6%;top:73cqw;width:114.5%;max-width:none;z-index:2;pointer-events:none}
.project-facts .cloud-small{position:absolute;left:37.5%;top:97cqw;width:38.18%;z-index:2;pointer-events:none}
.conclusion{padding-top:0}
.conclusion .copy{z-index:3}
.conclusion .source-break{display:none}
.conclusion .closing-statement{margin-top:40px;font-family:"Noto Sans",sans-serif;font-size:clamp(20px,1.9cqw,28px);font-weight:700;line-height:1.5}
.calligraphy{position:relative;z-index:3;width:58.23%;margin:5.8cqw auto 0}
.final-art{position:relative;margin-top:-20.5cqw;aspect-ratio:1920/1379;overflow:hidden}
.final-train{position:absolute;left:-19.7%;top:0;width:165.2%;max-width:none}
.sleepers{position:absolute;left:-8.6%;top:4.7cqw;width:69%;max-width:none}
@media(max-width:700px){
 .story{font-size:16px;line-height:1.4}
 .source-break{display:none}
 .copy,.copy.narrow,.copy.medium,.copy.wide,.copy[data-source-layer]{width:auto;max-width:none;margin-left:20px;margin-right:20px}
 .copy+.copy{margin-top:24px}
 .hero h1{padding:44px 20px 0;font-size:26px;line-height:1.18}
 .hero h1 .source-break{display:block}
 .hero .hero-lead{width:auto;margin:28px 24px 0;font-size:15px;line-height:1.4}
 .hero-bridge{margin-top:50px}
 .opening{padding-top:34cqw}
 .opening .truck-queue{margin:24px 0}
 .opening .terminal{width:84%;margin-top:28px}
 .section-heading{font-size:24px;margin-top:40px;margin-bottom:24px;padding-bottom:14px}
 .section-heading::after{width:70%}
 .national{margin-top:30px;margin-bottom:18px}
 .national-content{width:100%}
 .national-stats{gap:14px;width:calc(100% - 32px);margin:24px auto 0}
 .national-stats .year{font-size:28px;margin-bottom:10px}
 .national-stats .stat-label{font-size:12px;line-height:1.25}
 .national-stats .stat-value{font-size:22px;margin-top:6px}
 .national-stats .cargo-label{margin-top:12px}.national-stats .cargo-value{font-size:20px}
 .national--animated .national-content{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .national--animated .national-art{grid-column:1;grid-row:1}
 .national--animated .national-stats{grid-column:1;grid-row:2;width:calc(100% - 32px);margin:20px auto 0}
 .national--animated .national-state{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-content:start}
 .national--animated .year{grid-column:1/3}
 .national--animated .stat-label{grid-column:1;grid-row:2;align-self:end}
 .national--animated .stat-value{grid-column:1;grid-row:3}
 .national--animated .cargo-label{grid-column:2;grid-row:2;margin-top:0}
 .national--animated .cargo-value{grid-column:2;grid-row:3;font-size:22px}
 .national-source{margin-top:20px;font-size:12px}
 .city{font-size:clamp(9px,2.8vw,12px)}
 .gallery{margin-top:24px}
 .construction-photos{gap:10px;padding-inline:7%;scroll-padding-inline:7%}
 .construction-photos img{min-width:0;flex:0 0 86%;height:auto;aspect-ratio:650/366;scroll-snap-align:center}
 .timeline-first{height:max(130cqw,500px)}
 .timeline-first .track{top:0;height:83%;width:11%;left:44.5%}
 .milestone{font-size:14px}.milestone strong{font-size:28px}
 .milestone.first{left:57%;top:20%;width:40%}.milestone.second{left:2%;top:45%;width:39%}
 .timeline-first .cloud-small{top:20%;left:-5%;width:46%}
 .timeline-first .cloud-wide{top:auto;bottom:0}
 .export{padding-top:16px}
 /* a graphic gets the screen to itself, the way the reference decks do: the chart is centred on a screen of
    its own, with the reading text on the screens either side of it */
 .chart{min-height:100svh;min-height:100lvh;display:grid;align-content:center;margin:0;padding:24px 0}
 .chart-title{font-size:16px;margin-bottom:20px}
 .revenue .chart-title{margin-left:20px}
 .bars{height:min(44svh,340px);height:min(44lvh,340px);width:calc(100% - 30px);margin-left:15px;padding-top:24px}
 .value{font-size:12px;white-space:normal;width:170%;max-width:52px;padding-bottom:5px;line-height:1.15;overflow-wrap:normal}
 .years{width:calc(100% - 30px);margin-left:15px;font-size:12px;margin-top:7px}
 .coal .bars{height:min(44svh,340px);height:min(44lvh,340px)}
 .chart-train{height:9cqw;margin-top:-9cqw;background-size:auto 3px}
 .chart-train .wagons{bottom:2px}.chart-train .locomotive{bottom:3px}
 .coal .years{margin-top:7px}
 .chart-copy{margin-top:0}
 .cost-heading{margin-top:28px}
 /* the fleet gets the screen to itself: the reader watches all 25 trucks arrive, then scrolls on to the
    photograph, which starts below the fold rather than sharing the screen with them */
 .isometric{margin-top:18px;height:auto;min-height:100svh;min-height:100lvh;padding:8px 0 112px}
 .transport-story+.yard{margin-top:32px}  /* clearance so the photograph starts below the fold, not beside the finished fleet */
 .isometric-plane{width:100%}
 .isometric .credit{font-size:12px;top:calc(50% - 190px)}  /* the scene is a whole screen now, so the credit rides just above the artwork instead of floating in the blue */
 .yard{width:84%}
 .cost-copy{margin-top:24px}
 .industry{margin-top:20px}
 /* Keep both registered frames in one cell at their natural height, close to the preceding copy. */
 .excavator{display:grid}
 /* Feather the photograph into the overlapping quarry background. */
 .excavator img{grid-area:1/1;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
 .excavator-scoop{position:relative;inset:auto}
 /* Overlap the 56px feather, then leave 24px before the table. */
 .dividends{margin-top:-56px;padding-top:80px;padding-bottom:28px;background-size:auto 100%;background-image:linear-gradient(var(--blue),transparent 140px),linear-gradient(transparent 0,#15141399 35%,#242222 100%),var(--quarry-image)}
 .dividends table{width:94%;font-size:12px;line-height:1.25}
 .dividends th{font-size:11px;padding:8px 4px}
 .dividends td{padding:12px 3px}
 .after-industry{padding-top:40px}  /* the table above ends one section and this paragraph starts the next: they still need air between them */
 .after-industry .yard{margin-top:24px}
 .environment-copy{margin-top:24px}
 .after-industry .section-heading{margin-top:160px;margin-bottom:136px}
 .next-line{padding-top:24px}
 .next-line .copy+.copy{margin-top:24px}
 .photo-pair{grid-template-columns:1fr;gap:16px;margin:26px 0}
 .photo-pair img{height:auto;aspect-ratio:16/9}
 /* Keep the base map and animated route at the artwork’s natural height. */
 .trace{width:100%;margin:32px auto;display:grid;align-content:center}
 .trace img,.trace canvas,.trace .line{grid-area:1/1;width:100%;height:auto}
 /* the base map is scaled by the scene, and a transformed element paints over anything in flow, so the
    drawn line has to sit above it explicitly */
 .trace canvas,.trace .line{position:relative;z-index:1}
 /* and the reading text keeps its distance from every picture */
 section>.copy+:is(figure,.photo-pair,.trace,.gallery),
 section>:is(figure,.photo-pair,.trace,.gallery)+:is(.copy,.section-heading){margin-top:40px}
 .next-line>.copy+.trace,.next-line>.trace+.copy{margin-top:32px}
 .minister{width:auto;margin:30px 24px 0}
 .minister blockquote{font-size:21px;line-height:1.3}
 /* the portrait and the name read as one credit on a phone: closer together, and large enough for a face */
 .minister figcaption{margin-top:24px;font-size:15px;gap:16px}
 .minister figcaption img{width:112px}
 .project-facts{--rail:11cqw;height:auto;display:grid;grid-template-columns:minmax(0,1fr) 14% minmax(0,1fr);column-gap:5%;row-gap:28px;padding:42px 14px 190px}
 .project-fact{position:relative;left:auto!important;top:auto!important;width:auto;font-size:15px;line-height:1.35}
 .project-fact h3{font-size:20px;line-height:1.15;margin-bottom:14px}
 .project-fact .copy{margin:0;font-size:15px}
 .project-fact.construction{grid-column:1;grid-row:1}.project-fact.investment{grid-column:3;grid-row:2}.project-fact.returns{grid-column:1;grid-row:3}
 .project-facts .track{left:44.5%;width:11%;top:0;height:82%}
 .project-facts .trackclip{top:0;height:82%}
 .project-facts .train{left:50%;top:90px}
 .project-facts .cloud-wide{top:auto;bottom:0}
 .project-facts .cloud-small{top:auto;bottom:0}
 .conclusion{padding-top:22px}
 .calligraphy{width:82%;margin-top:30px}
 .final-art{margin-top:-10cqw}
}
@media(max-width:360px){
 .copy,.copy.narrow,.copy.medium,.copy.wide{margin-left:16px;margin-right:16px}
 .national-stats .year{font-size:22px}.national-stats .stat-value{font-size:19px}.national-stats .cargo-value{font-size:15px}.national-stats .stat-label{font-size:11px}
 .project-fact h3{font-size:18px}.project-fact,.project-fact .copy{font-size:14px}
}

/* Keep the full feathered cloud edge and dissolve rail ends beneath it. */
.timeline-first>.track,.project-facts>.track{mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}

/* Complete source table in normal flow; the motion scene reuses these same rows. */
.timeline-first{--rail:clamp(38px,9.27vw,100px);height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:32px clamp(48px,12vw,160px);padding:0 20px 240px}
.timeline-first .track{left:50%;margin-left:calc(clamp(38px,9.27vw,100px)/-2);top:0;width:clamp(38px,9.27vw,100px);height:100%}
/* Keep the locomotive above the cloud band as the larger wagons extend beyond the top. */
.timeline-first .train{position:absolute;left:50%;bottom:42%}
/* Match the painted track, including enlargement from object-fit:cover. Its rails
   sit at 45.5% of the artwork width. Keep the train within narrow cropped tracks. */
.trackclip .train{
 --painted-rail:max(var(--rail),calc(100cqh * 178 / 1751));
 --train-width:min(calc(var(--painted-rail) * .46),calc(var(--rail) * .9));
 width:var(--train-width);
 margin-left:calc(var(--train-width) / -2 - min(var(--painted-rail) * .045,(var(--rail) - var(--train-width)) / 2))
}
.timeline-first .milestone{position:relative;left:auto;top:auto;width:100%;min-width:0;white-space:normal;font-size:clamp(14px,1.5vw,24px);line-height:1.25;align-self:start}
.timeline-first .milestone.first{grid-column:2;text-align:left}
.timeline-first .milestone.second{grid-column:1;text-align:right}
.timeline-first .milestone strong{font-size:clamp(27px,3vw,48px);white-space:nowrap}
.timeline-first .milestone-year{font-size:14px;font-weight:400;margin-bottom:8px;color:#ddd}
.timeline-first .milestone .milestone-status{font-size:clamp(14px,1.3vw,20px);white-space:normal;margin-top:12px;color:#ddd;font-weight:400;text-transform:none}
.timeline-first .cloud-small{left:0;top:16%;width:min(38%,340px)}
.timeline-first .cloud-wide{left:-7.25%;top:auto;bottom:0;width:114.5%;height:220px;object-fit:contain;object-position:bottom}
.timeline-first.timeline--animated{display:block;height:100svh;height:100lvh;padding:0}  /* lvh, not svh: a retracting browser toolbar grows the screen, and a scene measured in svh stays short of it and uncovers the coal ground behind the sky. Older engines keep the svh line */
.timeline-first.timeline--animated::after{content:"";position:absolute;left:0;right:0;top:100%;height:25vh;background:var(--blue);z-index:-1}  /* and the sky continues below the scene, so nothing shows through in the moment between the toolbar retracting and the pin being re-measured */
/* Rising rows cross the sky, so their type needs the same separation from clouds on every screen. */
.timeline-first.timeline--animated .milestone{position:absolute;width:calc(50% - clamp(38px,9.27vw,100px)/2 - 32px);max-width:440px;text-shadow:0 1px 2px rgba(6,29,48,.55),0 3px 16px rgba(6,29,48,.6)}
.timeline-first.timeline--animated .milestone.first{left:calc(50% + clamp(38px,9.27vw,100px)/2 + 16px);top:22%}
.timeline-first.timeline--animated .milestone.second{left:auto;right:calc(50% + clamp(38px,9.27vw,100px)/2 + 16px);top:48%}
.timeline-first.timeline--animated .cloud-wide{height:34%;object-fit:cover;object-position:center top}
/* Static desktop keeps the poster's larger cloud band; the animated band stays at the foot. */
@media(min-width:701px){
 .timeline-first .cloud-wide,.timeline--animated .cloud-wide{left:-7.25%;width:114.5%;height:52%;object-fit:cover;object-position:center top}
 .timeline-first .cloud-small{left:8%;top:14%}
}

/* phone: the same poster in portrait. The rail is matched to the screen's height the way the desktop rail
   is, so the sleepers read at full width instead of the sliced hairline a fixed 9.27vw box cropped them to,
   and the wide cloud band is scaled up to fill the foot of the screen the way it fills the foot of the
   desktop scene, low enough that its white never sits behind the white figures. */
@media(max-width:700px){
 .timeline-first.timeline--animated{--rail:min(8.4svh,25vw);--rail:min(8.4lvh,25vw)}
 .timeline-first.timeline--animated .track{width:var(--rail);margin-left:calc(var(--rail)/-2)}
 /* the rows stand along the railway and climb it: the script spaces them down the screen from the top
    reading line, three at a time, and the next year arrives at the foot as the column drifts up */
 .timeline-first.timeline--animated .milestone{width:calc(50% - var(--rail)/2 - 22px)}
 .timeline-first.timeline--animated .milestone.first{left:calc(50% + var(--rail)/2 + 12px);top:18%}
 .timeline-first.timeline--animated .milestone.second{right:calc(50% + var(--rail)/2 + 12px);top:48%}
}

/* Original picture frames remain in flow while matching footage plays over their posters. */
.story-video{position:relative;aspect-ratio:var(--video-ratio,16/9);overflow:hidden;line-height:0}
.story-video>img,.story-video>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.story-video>video{opacity:0}
.story-video.has-video>video{opacity:1}
.photo-pair .story-video{height:34.17cqw;aspect-ratio:auto}
@media(max-width:700px){.photo-pair .story-video{height:auto;aspect-ratio:16/9}}
/* desktop finale: the whole scene is zoomed out to 72% of the poster's framing and capped to 70% of the screen, so the calligraphy line and the train share the last screen. Layer geometry is the PSD's (bg 165.2% / train 69% at 4.7cqw) scaled by .72. Phone rules untouched */
@media(min-width:701px){
 .final-art{aspect-ratio:auto;height:min(51.7cqw,70svh);margin-top:-12cqw}
 .final-train{left:-14.2%;width:119%}
 .sleepers{left:-6.2%;top:3.4cqw;width:49.7%}
}
/* project facts as figures: each fact on its own line with a thin rule, the number pulled out large in the chart yellow. Wording and order are the source's; only emphasis and line breaks change */
.project-fact h3{padding-bottom:.5rem;border-bottom:2px solid var(--yellow);margin-bottom:1rem}
.project-fact .fact{margin:0;padding:.55em 0;border-top:1px solid #ffffff2e;line-height:1.35}
.project-fact .fact:first-child{border-top:0;padding-top:0}
.project-fact .fact b{display:block;font-size:1.9em;line-height:1.1;color:var(--yellow);font-weight:700;letter-spacing:-.01em;margin:.05em 0}
@media(max-width:700px){.project-fact .fact b{font-size:1.45em;white-space:nowrap}}
/* the diagonal rail runs past the scene box on both ends; dissolve it into the blue before the box edge instead of a hard cut where the next section starts */
.isometric{mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%)}