/* Solar + AI, version 2. Colour fields change as you scroll: hero sky, cream, desert scene, deep blue, amber, coral, cream.
   Rules used throughout: big display type, solid colour fields, one drawing per section, hard shadows, no borders on cards. */

main { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- animations shared by the drawings ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.05); } }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(160px); } }
@keyframes run { to { stroke-dashoffset: -100; } }
@keyframes sweep { 0%, 50% { transform: translateX(0); } 100% { transform: translateX(260px); } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes flowx { to { transform: translateX(var(--ext, 72px)); } }
@keyframes flowy { to { transform: translateY(var(--ext, 72px)); } }
@keyframes rise { from { transform: translateY(105%) rotate(7deg); } to { transform: none; } }
@keyframes pop { from { transform: scale(0.965) rotate(-0.7deg); } to { transform: none; } }
@keyframes ping { from { transform: scale(1); opacity: 0.55; } to { transform: scale(var(--ping-x, 1.45), 1.7); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes glide { from { transform: translateX(-44px); } to { transform: translateX(44px); } }
@keyframes buzz { 50% { transform: scaleX(0.7); } }
@keyframes ride { to { offset-distance: 100%; } }
@keyframes beamflick { from { opacity: 0.25; } to { opacity: 0.75; } }

.sun-rays { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite; }
.fan { transform-box: fill-box; transform-origin: center; animation: spin 2.2s linear infinite; }
.shine { animation: sweep 4.5s ease-in-out infinite; }
.led { animation: blink 1.4s ease-in-out infinite; }
.glow { animation: blink 2.6s ease-in-out infinite; opacity: 0.6; }
.lines { transform-box: fill-box; transform-origin: top center; }

/* ================= 1. HERO ================= */
.hero { position: relative; overflow: hidden; background: #0E86A6; min-height: clamp(560px, calc(100svh - var(--header-h)), 900px); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl { will-change: transform; }
.hl-sun { transform: translateY(calc(var(--hp, 0) * 70px)); }
.hl-far { transform: translateY(calc(var(--hp, 0) * 26px)); }
.hl-mid { transform: translateY(calc(var(--hp, 0) * 14px)); }
.ring { transform-box: fill-box; transform-origin: center; animation: pulse 5s ease-in-out infinite; }
.ring.r2 { animation-delay: -2.5s; }
.cloud { animation: drift 38s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.cloud.c3 { animation-duration: 44s; }
.pulse { stroke-dasharray: 5 95; animation: run 3.4s linear infinite; }
.birds path { animation: bob 3s ease-in-out infinite; }
.birds .b2 { animation-delay: -1.3s; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(32px, 7vh, 80px); padding-bottom: var(--s8); }
.hero-title { margin: 0 0 var(--s5); }
.ht { display: inline-block; overflow: hidden; font-size: var(--fs-hero); line-height: 0.9; letter-spacing: -0.045em; color: var(--cream); background: var(--ink); padding: 0.06em 0.18em 0.14em; border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0.05em 0.06em 0 var(--amber); white-space: pre-wrap; }
.ht .ch { display: inline-block; animation: rise 650ms var(--spring) both; animation-delay: min(calc(var(--i) * 40ms + 100ms), 500ms); } /* same on every page: the whole entry ends within 1.2 s */
@media (max-width: 600px) { .ht { font-size: 20vw; } .hero-copy { padding-top: var(--s6); } }
.hero-line { display: inline-block; margin: 0 0 var(--s6); padding: var(--s3) var(--s5); background: var(--sun); color: var(--ink); border-radius: 999px; font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--font-body); transform: rotate(1deg); max-width: 28ch; }
.hero-go { display: flex; width: fit-content; }

/* ================= 2. STAGES ================= */
.stages { background: var(--cream); padding-block: var(--s9) var(--s8); overflow: clip; }
.stages::before { content: ""; position: absolute; right: -9vw; top: -14vw; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: var(--cream-2); }
.stages::after { content: ""; position: absolute; right: 12vw; top: 3vw; width: 9vw; aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
.stages-pin > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); grid-template-areas: "title card" "rail rail"; column-gap: var(--s7); row-gap: var(--s7); align-items: end; }
.stages h2 { grid-area: title; font-size: clamp(38px, 5.6vw, 80px); max-width: 12ch; }
.rail { grid-area: rail; --sw: clamp(104px, 11.6vw, 152px); display: flex; align-items: flex-start; justify-content: space-between; }
.sunstart { flex: none; width: calc(var(--sw) * 0.82); margin-top: calc(var(--sw) * 0.04); }
.sunstart svg { width: 100%; height: auto; display: block; }
.stg { flex: none; position: relative; isolation: isolate; width: var(--sw); display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: 0; background: none; border: 0; cursor: pointer; text-align: center; transition: transform 240ms var(--spring); touch-action: manipulation; }
.stg svg { width: 100%; height: auto; display: block; overflow: visible; }
.stg::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: 130%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); transform: translate(-50%, -50%) scale(0); transition: transform 360ms var(--spring); }
.stg.active::before { transform: translate(-50%, -50%) scale(1); }
.stg-text { display: contents; }
.stg-line { display: none; }
.stg-name { font: 800 clamp(16px, 1.6vw, 22px)/1.05 var(--font-display); letter-spacing: -0.01em; background: var(--ink); color: var(--cream); padding: 11px 16px; border-radius: 999px; white-space: nowrap; transition: transform 240ms var(--spring); }
.stg.active .stg-name { background: var(--amber); color: var(--ink); }
.stg.on svg { filter: drop-shadow(0 0 10px rgba(255, 176, 32, 0.9)); }
@media (hover: hover) { .stg:hover { transform: translateY(-8px) scale(1.05); } }
.stg:active { transform: translateY(2px) scale(0.97); }

.wire { position: relative; flex: 1 1 36px; min-width: 24px; height: 14px; margin-top: calc(var(--sw) * 0.6 - 7px); border-radius: 7px; background: #E9CB98; }
.wire .w-fill { position: relative; overflow: hidden; display: block; width: 100%; height: 100%; border-radius: 7px; clip-path: inset(0 calc((1 - var(--f, 1)) * 100%) 0 0); }
/* the stripes are a strip wider than the wire, slid along by transform (a whole number of stripe periods per loop, so it joins up) */
.wire .w-fill::before { content: ""; position: absolute; inset: 0 0 0 calc(var(--ext, 72px) * -1); animation: flowx 1.65s linear infinite; }
.wire.dc .w-fill::before { background: repeating-linear-gradient(90deg, var(--teal-dark) 0 12px, var(--teal-3) 12px 24px); }
.wire.beam .w-fill::before { background: repeating-linear-gradient(90deg, var(--amber) 0 12px, var(--sun) 12px 24px); }
.wire.ac { height: 36px; margin-top: calc(var(--sw) * 0.6 - 18px); border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 48 36'%3E%3Cpath d='M0 18Q12-2 24 18T48 18' fill='none' stroke='%23E9CB98' stroke-width='8'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 36px; }
.wire.ac .w-fill { --ext: 48px; border-radius: 0; }
.wire.ac .w-fill::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 48 36'%3E%3Cpath d='M0 18Q12-2 24 18T48 18' fill='none' stroke='%23E5482B' stroke-width='8'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 36px; animation-duration: 0.9s; }
.tag { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); font: 800 15px/1 var(--font-body); letter-spacing: 0.04em; background: var(--ink); color: var(--cream); padding: 7px 11px; border-radius: 999px; }
.wire.ac .tag { top: -34px; }

.stage-card { grid-area: card; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4) var(--s6); min-height: 156px; padding: var(--s6) var(--s7); border-radius: var(--r-lg); background: var(--panel); color: var(--cream); }
.stage-card[data-stage="1"] { background: var(--teal-dark); color: var(--cream); }
.stage-card[data-stage="2"] { background: var(--sun); color: var(--ink); }
.stage-card[data-stage="3"] { background: var(--coral); color: var(--ink); }
.stage-card[data-stage="4"] { background: var(--amber); color: var(--ink); }
.stage-card.pop { animation: pop 420ms var(--spring); }
.sc-num { font: 800 clamp(64px, 8vw, 112px)/0.8 var(--font-display); letter-spacing: -0.05em; }
.sc-name { font: 800 clamp(26px, 3vw, 42px)/1 var(--font-display); letter-spacing: -0.02em; margin-bottom: var(--s2); }
.sc-line { font: 500 clamp(19px, 1.8vw, 24px)/1.3 var(--font-body); max-width: 34ch; }
.sc-stat { display: flex; align-items: center; gap: var(--s3); max-width: 24ch; font: 600 15px/1.25 var(--font-body); background: var(--ink); color: var(--cream); padding: var(--s3) var(--s5) var(--s3) var(--s4); border-radius: var(--r); }
.sc-stat em { font: 800 52px/1 var(--font-display); font-style: normal; color: var(--amber); }

/* the five lines also sit in the page as a plain list: shown without scripts, read by screen readers with them */
.stage-lines { margin-top: var(--s7); display: grid; gap: var(--s4); }
.stage-lines li { max-width: 60ch; background: #fff; padding: var(--s4) var(--s5); border-radius: var(--r-sm); }
.stage-lines .stat { display: block; margin-top: var(--s2); font-weight: 600; }
.stage-lines .stat em { font-style: normal; font-weight: 800; }
.js .stage-lines { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .stage-card, html:not(.js) .stg { cursor: default; }
html:not(.js) .stage-card { display: none; }
html:not(.js) .rail { display: none; } /* the five buttons only work with the script; the list below shows every stage as text */
html:not(.js) .station-static .hot { cursor: default; filter: none; } /* the drawing is a plain picture without the script: no hand cursor, no hover glow */

/* pinned (JS adds .pinned when there is room): the stage scrolls through the five stages */
.stages.pinned { height: 250vh; padding-block: 0; }
.stages.pinned .stages-pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
.stages.pinned .stages-pin > .wrap { width: min(100% - 2 * var(--gutter), var(--w-page)); }
.stages.pinned > .stages-pin > .wrap { row-gap: var(--s6); }

@media (max-width: 900px) {
  .stages { padding-block: var(--s8); }
  .rail { --sw: 124px; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .sunstart { width: 100px; margin: 0 0 0 calc(var(--s3) + 12px); }
  .stg { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s5); width: 100%; padding: var(--s2) var(--s3); text-align: left; }
  .stg svg { width: var(--sw); flex: none; }
  .stg::before { left: calc(var(--sw) / 2 + var(--s3)); top: 50%; width: calc(var(--sw) * 1.15); }
  .stg-name { font-size: 21px; padding: 12px 18px; white-space: normal; }
  .wire { flex: none; width: 14px; height: 56px; margin: 0 0 0 calc(var(--s3) + var(--sw) / 2 - 7px); border-radius: 7px; }
  .wire .w-fill { clip-path: inset(0 0 calc((1 - var(--f, 1)) * 100%) 0); }
  .wire .w-fill::before { inset: calc(var(--ext, 72px) * -1) 0 0 0; animation-name: flowy; }
  .wire.dc .w-fill::before { background: repeating-linear-gradient(180deg, var(--teal-dark) 0 12px, var(--teal-3) 12px 24px); }
  .wire.beam .w-fill::before { background: repeating-linear-gradient(180deg, var(--amber) 0 12px, var(--sun) 12px 24px); }
  .wire.ac { width: 36px; height: 64px; margin-left: calc(var(--s3) + var(--sw) / 2 - 18px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath d='M18 0Q-2 12 18 24T18 48' fill='none' stroke='%23E9CB98' stroke-width='8'/%3E%3C/svg%3E") repeat-y 0 0 / 36px 48px; }
  .wire.ac .w-fill::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath d='M18 0Q-2 12 18 24T18 48' fill='none' stroke='%23E5482B' stroke-width='8'/%3E%3C/svg%3E") repeat-y 0 0 / 36px 48px; }
  .tag { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
  .wire.ac .tag { top: 50%; left: calc(100% + 12px); }
  .stages-pin > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "rail"; row-gap: var(--s6); }
  .stage-card { display: none; }
  .stg-line { display: block; margin-top: var(--s2); font: 500 18px/1.3 var(--font-body); max-width: 26ch; }
  .stg-line em { font: 800 28px/1 var(--font-display); font-style: normal; margin-right: var(--s2); }
  .stg-text { display: flex; flex-direction: column; align-items: flex-start; }
  .stages::before, .stages::after { display: none; }
}

/* ================= 3. STATION ================= */
.station { position: relative; background: var(--sand); --view: clamp(500px, 74svh, 780px); }
.station-stage { position: relative; display: flow-root; padding-bottom: var(--s7); }
.bd { position: absolute; left: 0; right: 0; top: 0; height: var(--view); overflow: hidden; --hz: 56%; }
.bd-sky { position: absolute; left: 0; right: 0; top: 0; height: var(--hz); background: linear-gradient(#0E86A6 0 30%, #17A8B4 30% 52%, #3CC4B8 52% 70%, #F7E08A 70% 84%, #FFB84A 84% 94%, #FF8450 94% 100%); }
.bd-sun { position: absolute; width: clamp(110px, 12vw, 180px); left: calc(58% + var(--az, 0) * -40px); top: calc(var(--hz) * 0.05); }
.bd-cloud { position: absolute; height: 30px; border-radius: 15px; background: #FFF8E2; }
.bd-cloud.k1 { width: 280px; top: calc(var(--hz) * 0.3); left: 36%; animation: drift 40s ease-in-out infinite alternate; }
.bd-cloud.k2 { width: 200px; top: calc(var(--hz) * 0.5); left: 8%; animation: drift 50s ease-in-out infinite alternate-reverse; }
.bd-dunes { max-width: none; position: absolute; left: -14%; width: 128%; height: 15%; bottom: calc(100% - var(--hz) - 1px); transform: translateX(calc(var(--az, 0) * -90px)); }
.bd-ground { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; background: #F8C47E; }

.station-gl { position: absolute; left: 0; right: 0; top: 0; height: var(--view); z-index: 2; }
.station-gl:focus-visible { outline-offset: -8px; box-shadow: none; border-radius: 0; }
.station-gl canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.station-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.station-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.station-leaders line { stroke: var(--ink); stroke-width: 2; }
.station-leaders circle { fill: var(--ink); }
.station-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 800 15px/1 var(--font-display); background: var(--ink); color: var(--cream); padding: 8px 12px 9px; border-radius: 999px; }
.station-label.lit { background: var(--amber); color: var(--ink); }

.station-head { position: absolute; z-index: 3; left: 0; right: 0; top: var(--s6); pointer-events: none; }
.station-head h2 { display: inline-block; font-size: clamp(34px, 5.4vw, 76px); line-height: 0.95; background: var(--ink); color: var(--cream); padding: 0.07em 0.3em 0.16em; border-radius: 0.25em; transform: rotate(-1.5deg); box-shadow: 0.05em 0.06em 0 var(--amber); }

.station-ui { position: relative; z-index: 3; width: min(100% - 2 * var(--gutter), var(--w-page)); margin: calc(var(--view) + var(--s5)) auto 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.station-caption { flex: 1 1 360px; max-width: 640px; min-height: 92px; padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--ink); color: var(--cream); font: 500 19px/1.35 var(--font-body); box-shadow: 0 6px 0 rgba(6, 44, 59, 0.3); }
.station-caption.pop { animation: pop 360ms var(--spring); }
.caption-name { display: inline-block; margin-bottom: var(--s2); padding: 5px 14px 6px; border-radius: 999px; background: var(--chip, var(--amber)); color: var(--ink); font: 800 21px/1 var(--font-display); }
.caption-line { display: block; }
.station-actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.station-actions .btn { min-height: 56px; }
#station-explode:not([aria-pressed="true"]) { position: relative; }
#station-explode:not([aria-pressed="true"])::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 3px var(--ink); animation: ping 2s ease-out infinite; pointer-events: none; }

.station-static { display: none; position: absolute; z-index: 1; left: 50%; top: calc(var(--view) * 0.3); width: min(100%, 1180px); height: auto; transform: translateX(-50%); }
.station-static text { font: 800 17px var(--font-display); fill: var(--ink); }
.station-static .hot { cursor: pointer; }
.station-static .hot:hover, .station-static .hot.on, .station-static .hot:focus-visible { filter: drop-shadow(0 0 10px #FFB020) drop-shadow(0 0 3px var(--sun)); }
.station-static .hot:focus-visible { outline: none; }
html:not(.js) .station-static, .station.no-webgl .station-static { display: block; }
html:not(.js) .station-gl, .station.no-webgl .station-gl { display: none; }
html:not(.js) .station-ui .station-caption { display: none; }

.parts-list { display: grid; gap: var(--s3); padding: var(--s6) var(--gutter); max-width: 70ch; }
.js .parts-list { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }

@media (max-width: 760px) {
  .station { --view: clamp(420px, 62svh, 600px); }
  .station-static { position: relative; top: auto; left: auto; transform: none; width: 100%; margin-top: calc(var(--view) * 0.22); }
  .station.no-webgl .station-ui, html:not(.js) .station-ui { margin-top: var(--s4); }
  .station.no-webgl .bd, html:not(.js) .bd { height: 100%; }
  .station-ui { flex-direction: column-reverse; align-items: stretch; gap: var(--s4); }
  .station-caption { flex: 1 1 100%; max-width: none; }
  .station-actions { width: 100%; }
  .station-actions .btn { flex: 1 1 140px; }
  #station-explode { --ping-x: 1.06; } /* the button spans the row here, so the ping may only grow into the gutter; wider and the page scrolls sideways */
  .station-head { top: var(--s5); }
}
html:not(.js) .station-ui, .station.no-webgl .station-ui { margin-top: var(--s5); }
html:not(.js) .bd, .station.no-webgl .bd { height: 100%; }
html:not(.js) .station-static, .station.no-webgl .station-static { position: relative; top: auto; left: auto; transform: none; margin: calc(var(--view) * 0.3) auto 0; }

/* ================= 4. PARK ================= */
.park { background: var(--deep); color: var(--cream); }
.park { overflow: clip; }
.park::before { content: ""; position: absolute; right: -12vw; top: -10vw; width: 44vw; aspect-ratio: 1; border-radius: 50%; border: clamp(24px, 4vw, 56px) solid var(--panel); }
.park::after { content: ""; position: absolute; right: 8vw; top: 4vw; width: 7vw; aspect-ratio: 1; border-radius: 50%; background: var(--amber); }
.park h2 { margin-bottom: var(--s7); max-width: 20ch; font-size: clamp(38px, 6vw, 88px); }
.t-cap { grid-column: 1 / 8; background: var(--amber); color: var(--ink); }
.t-ring { grid-column: 8 / 13; background: var(--cream); color: var(--ink); }
.t-tower { grid-column: 1 / 6; grid-row: 2 / 4; display: flex; flex-direction: column; justify-content: space-between; background: var(--panel); color: var(--cream); }
.t-tower .big { white-space: nowrap; font-size: clamp(56px, 6.6vw, 112px); } /* the number and its unit stay on one line */
.t-panels { grid-column: 6 / 13; background: var(--teal-dark); color: var(--cream); }
.t-co2 { grid-column: 6 / 13; background: var(--coral); color: var(--ink); }
.t-co2::after { content: ""; position: absolute; right: -70px; bottom: -100px; width: 300px; aspect-ratio: 1; border-radius: 50%; background: var(--sun); z-index: 0; }
.t-co2 > * { position: relative; z-index: 1; }

.t-cap { display: flex; flex-direction: column; }
.vs { margin-top: auto; padding-top: var(--s6); display: grid; gap: var(--s4); }
.vs-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; align-items: center; gap: var(--s3); font: 600 17px/1.2 var(--font-body); }
.vs-bar { display: block; height: 36px; width: var(--w); border-radius: 18px; background: repeating-linear-gradient(135deg, var(--ink) 0 6px, var(--amber) 6px 12px); box-shadow: inset 0 0 0 3px var(--ink); transform-origin: left; transition: transform 900ms var(--glide); }
.vs-bar.hi { background: var(--ink); }
.vs-row b { font: 800 26px/1 var(--font-display); }
.js .tile:not(.in) .vs-bar { transform: scaleX(0); }

.t-ring h3 { margin: 0 0 var(--s4); font-size: clamp(24px, 2.4vw, 32px); }
.ring-art { display: block; width: min(100%, 230px); margin: 0 auto var(--s4); transform: rotate(-90deg); }
.ring-art .trk { fill: none; stroke: #EFD9AE; stroke-width: 22; }
.ring-art .arc { fill: none; stroke-width: 22; stroke-linecap: round; transition: stroke-dasharray 1100ms var(--glide); }
.ring-art .a36 { stroke: var(--coral-strong); stroke-dasharray: 36 100; }
.ring-art .a21 { stroke: var(--teal-dark); stroke-dasharray: 21.5 100; }
.js .tile:not(.in) .ring-art .arc { stroke-dasharray: 0 100; }
.ring-key { display: grid; gap: var(--s2); font: 600 17px/1.2 var(--font-body); }
.ring-key b { font: 800 30px/1 var(--font-display); margin-right: var(--s2); }
.k21 { color: var(--teal-dark); }
.k36 { color: var(--coral-deep); }

.tower-art { width: min(100%, 300px); height: auto; align-self: center; margin-bottom: var(--s4); }
.tower-art .rays path { stroke: var(--sun); stroke-width: 3; fill: none; animation: beamflick 2.2s ease-in-out infinite alternate; }
.tower-art .rays path:nth-child(2n) { animation-delay: -1.1s; }
.tower-art .beacon { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite; }
.field-art { display: block; width: 100%; height: auto; border-radius: var(--r); margin-bottom: var(--s5); overflow: hidden; }
.field-art .sweep { animation: sweep 5s ease-in-out infinite; }

/* ================= 4b. CHART ================= */
.chart-field { background: var(--amber); color: var(--ink); }
.chart-field h2 { margin-bottom: var(--s6); }
.chart { margin: 0; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 2vw, 28px); align-items: end; height: clamp(360px, 56vh, 540px); }
.bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.val { margin-bottom: var(--s2); font: 800 clamp(18px, 2.6vw, 38px)/1 var(--font-display); letter-spacing: -0.02em; }
.col { display: block; width: 100%; min-height: 6px; height: calc(var(--v) / 2000 * (100% - 128px)); border-radius: 16px 16px 0 0; background: var(--deep); transform-origin: bottom; transition: transform 900ms var(--glide); transition-delay: calc(var(--i, 0) * 80ms); }
.maybe .col { background: repeating-linear-gradient(135deg, var(--deep) 0 8px, var(--amber) 8px 16px); box-shadow: inset 0 0 0 3px var(--deep); }
.ph { margin-top: var(--s3); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-height: 72px; }
.ph b { font: 800 clamp(24px, 3vw, 42px)/1 var(--font-display); }
.ph small { font: 600 15px/1.2 var(--font-body); }
.js .chart:not(.in) .col { transform: scaleY(0); }
.chart figcaption { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); font: 600 17px/1.2 var(--font-body); }
.unit-chip { background: var(--ink); color: var(--amber); padding: 8px 16px; border-radius: 999px; font: 800 18px/1 var(--font-display); }
.key { display: inline-flex; align-items: center; gap: var(--s3); }
.key::before { content: ""; width: 28px; height: 20px; border-radius: 6px; background: var(--deep); }
.key-hatch::before { background: repeating-linear-gradient(135deg, var(--deep) 0 5px, var(--amber) 5px 10px); box-shadow: inset 0 0 0 2px var(--deep); }
.numbers { margin-top: var(--s7); }
.numbers summary { list-style: none; cursor: pointer; }
.numbers summary::-webkit-details-marker { display: none; }
.numbers summary::after { content: "+"; font-size: 24px; line-height: 1; }
.numbers[open] summary::after { content: "\2212"; }
.numbers table { width: 100%; margin-top: var(--s5); border-collapse: collapse; background: var(--cream); border-radius: var(--r); overflow: hidden; font-size: 17px; }
.numbers th, .numbers td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; }
.numbers thead th { background: var(--ink); color: var(--cream); font-weight: 700; }
.numbers tbody tr + tr > * { box-shadow: inset 0 1px 0 rgba(6, 44, 59, 0.15); }

@media (max-width: 760px) {
  .bars { grid-template-columns: 1fr; height: auto; gap: var(--s3); }
  .bar { flex-direction: row; align-items: center; justify-content: flex-start; height: auto; gap: var(--s3); }
  .ph { order: -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s3); flex: 0 0 148px; margin: 0; min-height: 0; text-align: left; }
  .ph small { font-size: 14px; }
  .col { height: 32px; min-height: 0; width: calc(var(--v) / 2000 * (100% - 250px)); min-width: 6px; border-radius: 0 16px 16px 0; transform-origin: left; flex: none; }
  .maybe .col { background: repeating-linear-gradient(135deg, var(--deep) 0 8px, var(--amber) 8px 16px); }
  .val { order: 3; margin: 0; font-size: 22px; min-width: 56px; }
  .js .chart:not(.in) .col { transform: scaleX(0); }
  .numbers td, .numbers th { padding: var(--s2) var(--s3); font-size: 16px; }
}

/* ================= 5. AI ================= */
.ai { background: var(--coral); color: var(--ink); }
.ai h2 { margin-bottom: var(--s5); }
.ai .lead { max-width: 34ch; margin-bottom: var(--s7); font-weight: 600; }
.ai-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
.c-forecast { grid-column: 1 / 8; grid-row: 1; background: var(--deep); color: var(--cream); display: flex; flex-direction: column; }
.c-dust { grid-column: 8 / 13; grid-row: 1; background: var(--cream); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s4); }
.c-dust h3, .c-dust .what, .c-dust .meta { margin: 0; }
.c-dust .meta { margin-top: auto; }
@media (min-width: 901px) { .c-dust .dust-pair { flex: 1; align-content: center; } } /* the drawings take the spare height of the equal-height card and sit in the middle of it */
.c-ir { grid-column: 1 / 8; grid-row: 2; background: var(--ink); color: var(--cream); display: flex; flex-direction: column; }
.c-eq { grid-column: 8 / 13; grid-row: 2; background: var(--deep); color: var(--cream); display: flex; flex-direction: column; }
.c-eq .eq-art { margin-top: auto; }
.c-eq .what { font-size: clamp(22px, 2.2vw, 30px); max-width: 24ch; }
.c-forecast .big { margin-top: auto; padding-top: var(--s5); font: 800 clamp(64px, 9vw, 130px)/0.9 var(--font-display); letter-spacing: -0.045em; max-width: none; }
.c-forecast .small-word { font-size: 0.3em; letter-spacing: 0; margin-right: 0.1em; }
.c-forecast .what { margin-top: var(--s4); }
.c-forecast .meta { padding-top: var(--s4); }
@media (min-width: 1280px) {
  .c-forecast::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 240px; aspect-ratio: 1; border-radius: 50%; background: var(--amber); }
  .c-forecast::before { content: ""; position: absolute; right: 0; bottom: 0; width: 100px; aspect-ratio: 1; border-radius: 50%; background: var(--sun); z-index: 0; }
}
.c-forecast > * { position: relative; z-index: 1; }
.fc-art { width: 100%; max-width: 520px; height: auto; display: block; }
.fc-art .ax { fill: none; stroke: var(--cream); stroke-width: 3; }
.fc-art .out { fill: none; stroke: var(--cream); stroke-width: 9; stroke-linecap: round; }
.fc-art .fcast { fill: none; stroke: var(--amber); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 20; animation: run 4s linear infinite; stroke-dashoffset: 0; }
.fc-art .dot { fill: var(--sun); offset-path: path("M40 220C120 220 170 60 300 60S480 220 570 220"); animation: ride 6s ease-in-out infinite alternate; }

.dust-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s5); }
.dust { margin: 0; min-width: 0; }
.dust svg { display: block; width: 100%; height: auto; }
.dust .num { white-space: nowrap; margin: var(--s2) 0 var(--s1); font: 800 clamp(26px, 2.9vw, 42px)/1 var(--font-display); letter-spacing: -0.03em; max-width: none; color: var(--coral-deep); }
.dust figcaption { font: 600 16px/1.3 var(--font-body); }
.c-dust .what { max-width: 30ch; }

.ir-art { width: 100%; max-width: 440px; height: auto; display: block; margin-bottom: var(--s4); }
.ir-art .cone { fill: var(--sun); opacity: 0.55; }
.ir-art .drone { animation: glide 5s ease-in-out infinite alternate; }
.ir-art .rotor { transform-box: fill-box; transform-origin: center; animation: buzz 0.8s ease-in-out infinite; }
.ir-art .hotc, .ir-art .warm { transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-in-out infinite; }
.ir-art .warm { animation-delay: -1.1s; }
.c-ir .meta { color: var(--cream); }
.eq-art { width: 100%; max-width: 440px; height: auto; display: block; margin-bottom: var(--s4); }
.eq-art .cable, .eq-art .ground { fill: none; stroke: var(--cream); stroke-width: 4; stroke-linecap: round; }
.eq-art .pulse-base, .eq-art .pulse { fill: none; stroke: var(--sun); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.eq-art .pulse-base { stroke: var(--cream); opacity: 0.4; }
.eq-art .pulse { stroke-dasharray: 30 70; animation: run 2.4s linear infinite; }

/* ================= 6. PHOTOS ================= */
.photos { background: var(--cream); padding-block: var(--s8); }
.photo-row { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s8); align-items: center; }
.p1 { transform: rotate(-2.2deg); }
.p2 { transform: rotate(2.6deg) translateY(28px); }

@media (max-width: 900px) {
  .ai-grid { grid-template-columns: 1fr; }
  .t-cap, .t-ring, .t-tower, .t-panels, .t-co2, .c-forecast, .c-dust, .c-ir, .c-eq { grid-column: 1; grid-row: auto; }
  .photo-row { grid-template-columns: 1fr; }
  .vs-row { grid-template-columns: 1fr auto; }
  .vs-row span { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .dust-pair { gap: var(--s3); }
  .dust .num { font-size: 26px; }
  /* the stage rail: tighter, so the longest stage names and their lines stay inside the card at 320 */
  .rail { --sw: 84px; }
  .stg { gap: var(--s3); }
  .stg-name { font-size: 18px; padding: 10px 14px; overflow-wrap: anywhere; }
  .stg-line { font-size: 17px; }
  /* 11 part labels do not fit a phone-width canvas without covering each other; the caption card names the part on tap */
  .station-labels { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ht .ch, .stage-card.pop, .station-caption.pop { animation: none; }
  .hl { transform: none !important; }
  .js .tile:not(.in) .vs-bar, .js .chart:not(.in) .col { transform: none; }
  .js .tile:not(.in) .ring-art .a36 { stroke-dasharray: 36 100; }
  .js .tile:not(.in) .ring-art .a21 { stroke-dasharray: 21.5 100; }
  .wire .w-fill { clip-path: none !important; }
  .eq-art .pulse { animation: none; stroke-dasharray: none; }
}