/* Industry Explorer, version 2 (the look of Solar + AI): a hero scene, six colour-coded tabs, one coloured panel per discipline.
   Power systems is finished; the other five panels keep their text and are only restyled to sit in the new shell.
   Patterns this page adds that base.css lacks: the colour-coded tab (.disc-tab), the stage rail with its wires and hotspots (.rail .stg .wire .ai-pin),
   the caption card (.stage-card .cap), the discipline panel (.discipline), and the compact card for text-only panels (.d-card). */

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

/* each discipline owns two custom properties, taken from the film's six node colours (tokens.css): --c the colour, --ci the ink on it */
[data-disc="power"] { --c: var(--disc-power); --ci: var(--disc-power-ink); }
[data-disc="renewable"] { --c: var(--disc-renewable); --ci: var(--disc-renewable-ink); }
[data-disc="electronics"] { --c: var(--disc-electronics); --ci: var(--disc-electronics-ink); }
[data-disc="control"] { --c: var(--disc-control); --ci: var(--disc-control-ink); }
[data-disc="comms"] { --c: var(--disc-comms); --ci: var(--disc-comms-ink); }
[data-disc="computing"] { --c: var(--disc-computing); --ci: var(--disc-computing-ink); }

/* ---------- motion 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 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(1.35, 1.7); opacity: 0; } }
@keyframes sweep { 0%, 50% { transform: translateX(0); } 100% { transform: translateX(260px); } }
@keyframes swing { from { transform: rotate(-28deg); } to { transform: rotate(34deg); } }
@keyframes slosh { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes slide { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes loopflow { to { stroke-dashoffset: -48; } }
@keyframes puff { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-16px); opacity: 0; } }

.fan { transform-box: fill-box; transform-origin: center; animation: spin 2.2s linear infinite; }
.led { animation: blink 1.4s ease-in-out infinite; }
.glow { animation: blink 2.6s ease-in-out infinite; opacity: 0.6; }
.win { animation: blink 4.5s ease-in-out infinite; }
.puff { animation: puff 3s ease-out infinite; }
.halo { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-in-out infinite; }
.sun-rays { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
.shine { animation: sweep 4.5s ease-in-out infinite; }
.needle { transform-box: fill-box; transform-origin: 0 100%; animation: swing 3.6s ease-in-out infinite alternate; }
.needle.r { transform-origin: 100% 100%; }
.slosh { animation: slosh 2.4s ease-in-out infinite alternate; }
.slide { animation: slide 2.8s ease-in-out infinite alternate; }
.slide.s2 { animation-duration: 3.6s; animation-delay: -1s; }
.slide.s3 { animation-duration: 2.2s; animation-delay: -0.6s; }
.node { animation: pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.node.n2 { animation-delay: -0.7s; }
.node.n3 { animation-delay: -1.4s; }
.arc { animation: blink 1.8s ease-in-out infinite; }
.arc.a2 { animation-delay: -0.9s; }
.bars rect { animation: blink 2s ease-in-out infinite; }

/* ================= 1. HERO ================= */
.hero { position: relative; overflow: hidden; background: #0E86A6; min-height: clamp(480px, calc(88svh - var(--header-h)), 700px); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-narrow { display: none; }
.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; }
.pulse { stroke-dasharray: 5 95; animation: run 2.6s linear infinite; }
.pulse.p2 { animation-delay: -0.6s; }
.pulse.p3 { animation-delay: -1.2s; }
.pulse.p4 { animation-delay: -1.8s; }
.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: clamp(52px, 10vw, 150px); line-height: 0.92; 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); }
.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: 17vw; } .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. THE EXPLORER ================= */
.explore { background: var(--cream); padding-block: var(--s8) var(--s9); overflow: clip; }
.explore::before { content: ""; position: absolute; right: -9vw; top: -14vw; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: var(--cream-2); }
.explore::after { content: ""; position: absolute; left: -4vw; bottom: 3vw; width: 12vw; aspect-ratio: 1; border-radius: 50%; background: var(--sun); opacity: 0.6; }

/* the tabs: six solid colour blocks with a hard shadow; the chosen one lifts */
.switcher ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.disc-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); width: 100%; min-height: 132px; padding: var(--s4) var(--s3); border: 0; border-radius: var(--r); background: var(--c); color: var(--ci); font: 800 clamp(17px, 1.5vw, 20px)/1.08 var(--font-display); letter-spacing: -0.01em; text-align: center; text-decoration: none; box-shadow: 0 6px 0 var(--ink); cursor: pointer; touch-action: manipulation; transition: transform 220ms var(--spring), box-shadow 220ms var(--spring); }
.disc-tab .ico { width: 44px; height: 44px; flex: none; transition: transform 320ms var(--spring); }
.disc-tab[aria-selected="true"] { transform: translateY(-8px); box-shadow: 0 14px 0 var(--ink); }
.disc-tab[aria-selected="true"] .ico { transform: scale(1.18) rotate(-6deg); }
@media (hover: hover) { .disc-tab:hover { transform: translateY(-5px); box-shadow: 0 11px 0 var(--ink); } .disc-tab[aria-selected="true"]:hover { transform: translateY(-8px); } }
.disc-tab:focus-visible { transform: translateY(-5px); box-shadow: 0 11px 0 var(--ink); }
.disc-tab[aria-selected="true"]:focus-visible { transform: translateY(-8px); box-shadow: 0 14px 0 var(--ink); }
.disc-tab:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }

.disciplines { margin-top: var(--s8); }
.discipline { position: relative; overflow: clip; padding: var(--s7); border-radius: var(--r-lg); background: var(--c); color: var(--ci); scroll-margin-top: var(--s5); }
.discipline + .discipline { margin-top: var(--s8); }
.discipline::before { content: ""; position: absolute; right: -9vw; top: -10vw; width: 30vw; aspect-ratio: 1; border-radius: 50%; border: clamp(18px, 3vw, 40px) solid rgba(255, 255, 255, 0.22); pointer-events: none; }
.discipline > * { position: relative; z-index: 1; }

.d-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--s6) var(--s7); align-items: center; margin-bottom: var(--s6); }
.d-title h2 { font-size: clamp(40px, 6vw, 88px); }
.d-title h2.long-name { font-size: clamp(34px, 4.6vw, 66px); }
.d-line { display: inline-block; margin: var(--s5) 0 0; padding: var(--s3) var(--s5); background: var(--sun); color: var(--ink); border-radius: 999px; font: 600 clamp(19px, 1.8vw, 24px)/1.2 var(--font-body); transform: rotate(1deg); max-width: none; }

/* the number tile */
.t-num { min-height: 0; padding: var(--s6) var(--s7) var(--s6) var(--s6); background: var(--deep); color: var(--cream); box-shadow: 0 8px 0 var(--ink); }
.t-num .big { font-size: clamp(54px, 6.2vw, 88px); color: var(--amber); }
.t-num .what { max-width: 24ch; }
.t-num .meta { color: var(--sun); max-width: 30ch; }
.tile-art { position: absolute; right: 14px; top: 14px; width: clamp(56px, 6vw, 84px); height: auto; color: var(--sun); animation: pulse 3s ease-in-out infinite; }
.bolt-art { right: -6px; top: -6px; width: clamp(74px, 8vw, 112px); color: inherit; animation: none; }
.t-num.long .big { font-size: clamp(40px, 4.4vw, 62px); }
.t-num.small .big { font-size: clamp(54px, 6.2vw, 88px); }
.t-num.small .big .unit { font-size: 0.3em; }

/* ---------- the board: six stages, wires between them, one caption card ---------- */
.board { padding: var(--s7) var(--s6) var(--s6); border-radius: var(--r-lg); background: var(--cream); color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
.rail { --sw: clamp(88px, 10.4vw, 134px); display: flex; align-items: flex-start; justify-content: space-between; }
.rail.has-tags { padding-top: 52px; }
.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: 40%; width: 128%; 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.active svg { filter: drop-shadow(0 0 10px rgba(255, 176, 32, 0.9)); }
.stg-name { font: 800 clamp(15px, 1.3vw, 18px)/1.1 var(--font-display); letter-spacing: -0.01em; background: var(--ink); color: var(--cream); padding: 9px 12px; border-radius: 18px; transition: transform 240ms var(--spring); }
.stg.active .stg-name { background: var(--amber); color: var(--ink); }
@media (hover: hover) { .stg:hover { transform: translateY(-8px) scale(1.05); } }
.stg:active { transform: translateY(2px) scale(0.97); }
.stg-wrap { flex: none; width: var(--sw); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }

/* wires: thin by default, .hi is thick; a colour class sets the flow */
.wire { --tg: calc(var(--sw) * 0.686 + 12px); position: relative; flex: 1 1 36px; min-width: 24px; height: 12px; margin-top: calc(var(--sw) * 0.686 - 6px); border-radius: 6px; background: #E9CB98; }
.wire.hi { --tg: calc(var(--sw) * 0.686 + 18px); height: 24px; margin-top: calc(var(--sw) * 0.686 - 12px); border-radius: 12px; }
.wire .w-fill { position: relative; overflow: hidden; display: block; width: 100%; height: 100%; border-radius: inherit; }
/* 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.8s linear infinite; background: repeating-linear-gradient(90deg, var(--teal-dark) 0 12px, var(--teal-3) 12px 24px); }
.wire.hi .w-fill::before { animation-duration: 1.02s; }
.wire.hi .w-fill::before, .wire.coral .w-fill::before { background: repeating-linear-gradient(90deg, var(--coral-strong) 0 12px, var(--sun) 12px 24px); }
.wire.amber .w-fill::before { background: repeating-linear-gradient(90deg, var(--amber) 0 12px, var(--sun) 12px 24px); }
.wire.sky .w-fill::before { background: repeating-linear-gradient(90deg, var(--panel) 0 12px, var(--teal-2) 12px 24px); }
.wire.pink .w-fill::before { background: repeating-linear-gradient(90deg, var(--disc-computing) 0 12px, var(--sun) 12px 24px); }
.tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: calc(var(--tg) - 14px); background: var(--ink); transform: translateX(-50%); }
.tag { position: absolute; left: 50%; bottom: calc(100% + var(--tg)); transform: translateX(-50%); white-space: nowrap; font: 800 15px/1 var(--font-body); letter-spacing: 0.02em; background: var(--ink); color: var(--cream); padding: 8px 12px; border-radius: 999px; z-index: 2; }

/* pins hang under a stage's name: .pin-ai pulses, .pin-x is a plain extra example */
.pin { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s4); border-radius: 999px; background: var(--sun); color: var(--ink); font: 800 17px/1 var(--font-display); white-space: nowrap; box-shadow: 0 4px 0 var(--ink); cursor: pointer; touch-action: manipulation; user-select: none; transition: transform 160ms var(--spring), box-shadow 160ms var(--spring), background-color 160ms; }
.pin-ai { background: var(--disc-computing); color: var(--disc-computing-ink); }
.pin-ai::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; }
.pin.active { background: var(--ink); color: var(--cream); }
.pin.active::after { animation: none; opacity: 0; }
@media (hover: hover) { .pin:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); } }
.pin:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* a feedback loop: a return wire under the rail from the last stage back to the second (Control and automation) */
.rail.has-loop { padding-bottom: 76px; position: relative; }
.loopback { position: absolute; left: calc(var(--sw) / 2 + (100% - var(--sw)) * 0.25); width: calc((100% - var(--sw)) * 0.75); bottom: 18px; height: 40px; overflow: visible; }
.loop-flow { stroke-dasharray: 10 14; animation: loopflow 0.9s linear infinite; }
.loop-head { position: absolute; left: calc(var(--sw) / 2 + (100% - var(--sw)) * 0.25 - 11px); bottom: 54px; border: 11px solid transparent; border-bottom: 16px solid var(--ink); border-top: 0; }
.loop-tag { position: absolute; left: calc(var(--sw) / 2 + (100% - var(--sw)) * 0.625); bottom: 0; transform: translateX(-50%); white-space: nowrap; font: 800 15px/1 var(--font-body); background: var(--ink); color: var(--cream); padding: 8px 12px; border-radius: 999px; }

.stage-card { margin-top: var(--s6); min-height: 148px; padding: var(--s5) var(--s6); border-radius: var(--r); background: var(--ink); color: var(--cream); display: flex; flex-direction: column; justify-content: center; gap: var(--s4); }
.stage-card.pop { animation: pop 360ms var(--spring); }
.cap-hint { font: 600 clamp(19px, 1.8vw, 24px)/1.3 var(--font-body); max-width: none; }
.cap { display: flex; align-items: center; gap: var(--s5); }
.cap b { flex: none; padding: 7px 18px 9px; border-radius: 999px; background: var(--chip, var(--amber)); color: var(--ink); font: 800 clamp(20px, 2vw, 26px)/1 var(--font-display); letter-spacing: -0.01em; }
.cap p { font: 500 clamp(18px, 1.7vw, 22px)/1.35 var(--font-body); max-width: 56ch; }
.cap.c0 { --chip: var(--amber); }
.cap.c1 { --chip: var(--coral); }
.cap.c2 { --chip: var(--teal-3); }
.cap.c3 { --chip: var(--sun); }
.cap.c4 { --chip: var(--sand); }
.cap.c5 { --chip: var(--mint); }
.cap.c-ai { --chip: var(--disc-computing); }
/* with scripts only the chosen caption shows; without them every caption reads as a list */
.js .cap:not(.on) { display: none; }
.js .stage-card.has-cap .cap-hint { display: none; }
html:not(.js) .stg, html:not(.js) .pin { cursor: default; }
html:not(.js) .pin-ai::after { display: none; }
html:not(.js) .stage-card .cap-hint { display: none; }
html:not(.js) .stage-card { min-height: 0; }
html:not(.js) .cap + .cap { margin-top: var(--s4); }

.d-jobs { margin-top: var(--s7); }
.d-jobs h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: var(--s2); }
.d-jobs .chips { margin-top: var(--s3); gap: var(--s3); }
.d-jobs .chips li { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; background: var(--cream); color: var(--ink); }
/* a chip that names one of the twelve careers is a link and presses like a button; the others are plain labels */
.d-jobs .chips li:has(> a) { padding: 0; background: none; }
.d-jobs .chips a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 11px 18px; border-radius: 999px; background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--ink); text-decoration: none; touch-action: manipulation; transition: transform 160ms var(--spring), box-shadow 160ms var(--spring); }
@media (hover: hover) { .d-jobs .chips a:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); } }
.d-jobs .chips a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.d-jobs .chips a:focus-visible { box-shadow: 0 0 0 7px var(--ink); }

.d-jobs .chips small { font: 800 14px/1 var(--font-body); background: var(--ink); color: var(--cream); padding: 5px 8px; border-radius: 999px; }

/* ================= the five panels still to be rebuilt: their text, restyled to fit the shell ================= */
.d-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.d-what, .d-diagram, .d-uae, .d-careers { grid-column: 1 / -1; }
.d-card { min-width: 0; padding: var(--s5) var(--s6); border-radius: var(--r); background: var(--cream); color: var(--ink); box-shadow: 0 6px 0 var(--ink); }
.d-card h3 { margin: 0 0 var(--s3); font-size: clamp(24px, 2.4vw, 30px); }
.d-card p { max-width: 70ch; }
.d-card p + p { margin-top: var(--s3); }
.d-card ul { display: grid; gap: var(--s3); }
.d-card li { max-width: 70ch; }
.d-card li strong { font-weight: 800; }
.d-diagram { container-type: inline-size; }
.dgm { display: block; width: 100%; height: auto; font-family: var(--font-display); font-size: 20px; }
.dgm-n { display: none; max-width: 360px; margin: 0 auto; font-size: 22px; }
.dgm .node rect { fill: var(--cream-2); stroke: var(--ink); stroke-width: 2; }
.dgm .node text { fill: var(--ink); font-weight: 700; }
.dgm .flow, .dgm .tie { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke: var(--ink); }
.dgm .head { fill: var(--coral-strong); }
.d-diagram figcaption { margin-top: var(--s4); }
@container (max-width: 759px) {
  .dgm-w { display: none; }
  .dgm-n { display: block; }
}

/* ================= smaller screens ================= */
@media (max-width: 1100px) {
  /* the tabs stay one row of six, only smaller, so they keep reading as navigation */
  .switcher ul { gap: var(--s2); }
  .disc-tab { min-height: 96px; padding: var(--s3) var(--s2); font-size: 15px; gap: var(--s2); border-radius: var(--r-sm); }
  .disc-tab .ico { width: 30px; height: 30px; }
  .d-head { grid-template-columns: minmax(0, 1fr); }
  .t-num { max-width: 520px; }
}
@media (max-width: 900px) {
  .explore { padding-block: var(--s7) var(--s8); }
  .discipline { padding: var(--s6) var(--s5); }
  .board { display: flex; flex-direction: column; padding: var(--s6) var(--s4) var(--s4); }
  .d-grid { grid-template-columns: minmax(0, 1fr); }
  .d-card { padding: var(--s4) var(--s5); }
  /* tabs: compact chips, three across, icon beside the label */
  .switcher ul { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5); }
  .disc-tab { flex-direction: row; justify-content: flex-start; min-height: 64px; padding: var(--s2) var(--s3); text-align: left; font-size: 16px; }
  .disc-tab .ico { width: 30px; height: 30px; }

  /* the rail turns upright: sprite and name in a row, a short wire between rows; the chosen caption opens under its stage (the script moves it there) */
  .rail { --sw: 104px; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .rail, .rail.has-tags { padding-top: 0; }
  .stg { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s4); width: 100%; padding: var(--s1) var(--s2); text-align: left; }
  .stg svg { width: var(--sw); flex: none; }
  .stg::before { left: calc(var(--sw) / 2 + var(--s2)); top: 50%; width: calc(var(--sw) * 1.1); }
  .stg-name { font-size: 20px; padding: 10px 16px; }
  .stg-wrap { width: 100%; align-items: stretch; gap: 0; }
  .stg-wrap .pin { align-self: flex-start; margin: var(--s2) 0 var(--s1) calc(var(--sw) + var(--s4) + var(--s2)); }
  .stg-wrap .pin + .pin { margin-top: var(--s2); }
  .stg-wrap > .cap { margin: var(--s3) 0 var(--s2); padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--ink); color: var(--cream); flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .wire { flex: none; width: 12px; height: 44px; margin: 0 0 0 calc(var(--s2) + var(--sw) / 2 - 6px); border-radius: 6px; }
  .wire.hi { width: 24px; height: 48px; margin-left: calc(var(--s2) + var(--sw) / 2 - 12px); border-radius: 12px; }
  .wire .w-fill::before { inset: calc(var(--ext, 72px) * -1) 0 0 0; animation-name: flowy; background-image: repeating-linear-gradient(180deg, var(--teal-dark) 0 12px, var(--teal-3) 12px 24px); }
  .wire.hi .w-fill::before, .wire.coral .w-fill::before { background-image: repeating-linear-gradient(180deg, var(--coral-strong) 0 12px, var(--sun) 12px 24px); }
  .wire.amber .w-fill::before { background-image: repeating-linear-gradient(180deg, var(--amber) 0 12px, var(--sun) 12px 24px); }
  .wire.sky .w-fill::before { background-image: repeating-linear-gradient(180deg, var(--panel) 0 12px, var(--teal-2) 12px 24px); }
  .wire.pink .w-fill::before { background-image: repeating-linear-gradient(180deg, var(--disc-computing) 0 12px, var(--sun) 12px 24px); }
  .tag { left: calc(100% + 12px); bottom: auto; top: 50%; transform: translateY(-50%); }
  .tag::after { display: none; }
  .rail.has-loop { padding-bottom: 0; }
  .loopback, .loop-head { display: none; }
  .loop-tag { position: static; transform: none; align-self: flex-start; margin: var(--s4) 0 0 var(--s2); }
  /* the card above the rail only holds the hint; the captions live under their stages */
  .js .stage-card.has-cap .cap-hint { display: block; }
  .stage-card { order: -1; margin: 0 0 var(--s5); min-height: 0; padding: var(--s4) var(--s5); }
  .cap { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .cap p { font-size: 18px; }
  .hero-wide { display: none; }
  .hero-narrow { display: block; }
}
@media (max-width: 560px) {
  .switcher ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); row-gap: var(--s5); }
  /* icon above the name, so a long word like "Communications" fits inside its chip; the row gap clears the 8 px lift of the chosen tab */
  .disc-tab { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 96px; padding: var(--s2) 10px; font-size: 14px; gap: var(--s2); overflow-wrap: break-word; }
  .disciplines { margin-top: var(--s7); }
  .d-line { font-size: 19px; }
  /* the one-word heading "Communications" is 326 px wide at 34 px: shrink with the screen so it stays inside its card at 320 */
  .d-title h2.long-name { font-size: min(34px, 8.6vw); }
}
@media (max-width: 480px) {
  /* the stage rail: tighter, so the longest stage names stay inside the card at 320 */
  .rail { --sw: 72px; }
  .stg { gap: var(--s3); }
  .stg-name { font-size: 17px; padding: 8px 12px; overflow-wrap: break-word; }
}
@media (max-width: 340px) {
  /* at 320 the longest stage names ("Microcontroller", "Measurement") are wider than the room beside the drawing */
  .rail { --sw: 56px; }
  .stg { gap: var(--s2); }
  .stg-name { font-size: 15px; padding: 8px 10px; }
  .stg-wrap .pin { margin-left: calc(var(--sw) + var(--s4)); } /* lines up under the stage name again */
}

@media (prefers-reduced-motion: reduce) {
  .ht .ch, .stage-card.pop { animation: none; }
  .hl { transform: none !important; }
}