/* The three phases identify cards and progress; story surfaces alternate. */
.in-intro .ph-c1 { --ph:var(--ha-phase-mine); --phase-ink:var(--ha-white); }
.in-intro .ph-c2 { --ph:var(--ha-phase-solve); --phase-ink:var(--ha-white); }
.in-intro .ph-c3 { --ph:var(--ha-phase-amplify); --phase-ink:var(--ha-ink); }
.in-intro .ph-c.ph-c { background:var(--ph) !important; border:1px solid var(--ph) !important; color:var(--phase-ink); }
.in-intro .ph-c .ph-art { background:none; filter:none; aspect-ratio:16/10; }
.in-intro .ph-art img { display:block; width:100%; height:100%; object-fit:cover; }
.in-intro .ph-c1 .ph-art img { object-position:50% 52%; }
.in-intro .ph-c.ph-c3 .ph-art { background:var(--ha-card); }
.in-intro .ph-c3 .ph-art img { object-fit:cover; object-position:50% 50%; }
[data-phase="mine"] { --phase-accent:var(--ha-phase-mine); }
[data-phase="solve"] { --phase-accent:var(--ha-phase-solve); }
[data-phase="amplify"] { --phase-accent:var(--ha-phase-amplify); }
section[data-phase][data-phase] {
  --journey-colour:var(--ha-ink); --journey-ink:var(--ha-vapour);
  background:var(--journey-colour) !important; color:var(--journey-ink) !important;
  border-top-color:var(--journey-colour) !important;
}
:is(#team,#workshops,#trk-build,#voices,#ontap)[data-phase][data-phase] {
  --journey-colour:var(--ha-paper); --journey-ink:var(--ha-support-on-paper);
  border-top:3px solid var(--phase-accent) !important;
}
#talk[data-phase][data-phase] { --journey-colour:var(--ha-bloom); --journey-ink:var(--ha-ink); }
#itops[data-phase][data-phase] { border-top:3px solid var(--ha-bloom) !important; }
nav.trk.trk .trk-ol li:nth-child(1) { --ph:var(--ha-phase-mine); --ph-ink:var(--ha-white); }
nav.trk.trk .trk-ol li:nth-child(2) { --ph:var(--ha-phase-solve); --ph-ink:var(--ha-white); }
nav.trk.trk .trk-ol li:nth-child(3) { --ph:var(--ha-phase-amplify); --ph-ink:var(--ha-ink); }
nav.trk.trk .trk-s.trk-s, nav.trk.trk .trk-s.trk-s::after, nav.trk.trk .trk-ol li+li::before { background:var(--ph) !important; opacity:1 !important; }
nav.trk.trk .trk-s.trk-s .trk-l { color:var(--ph-ink) !important; }
#invent[data-phase] .inv-bg { display:block; }
#invent[data-phase] .inv-bg::before { filter:blur(3px); }
#invent[data-phase] .inv-bg::after { background:rgba(var(--ha-ink-rgb),.82); }
#workshops[data-phase] .ws2-photo > span { color:var(--ha-ink) !important; }
#workshops[data-phase] .ha-q-by { color:var(--ha-bloom-deep) !important; }
@media (max-width:640px) { .in-intro .ph-row.ph-row { grid-template-columns:minmax(0,1fr) !important; } }