Group steering-committee teams with connecting colour bars (#808)

[LukasWallrich]

Closes #808.

Problem

In the steering-committee team grid, title cards and member cards were equal-sized tiles flowing in one wrapping row. When the row wrapped, a member could land on a new line with no heading nearby — so it was ambiguous which sub-team it belonged to.

In the before shot below, Sara Lil Middleton wraps to the start of a new row and reads as part of "Ethics and Inclusion" (to her right), when she's actually the second member of "Sustainability & Strategy". Every title card is the same dark slate, so there's no way to tell teams apart across a wrap.

Fix — connecting colour bars

Kept the dense single-flow mosaic (one reading order, even rows) but made each team read as one connected run: a coloured bar runs along the top of every tile in a team (title + members), bridges the gap to the next tile, and breaks at the row edge / resumes on the next row when a team wraps. A wrapped member keeps its team colour, so it's never orphaned. Each team gets a distinct colour; Steering & Guidance (no sub-teams) stay plain.

Operations section — before vs after (worst case, 10 teams)

In after, Sara Lil Middleton's purple bar keeps her with Sustainability & Strategy, while "Ethics and Inclusion" is clearly the crimson team to her right.

Full page — after

Full page — before

(Screenshots live on the pr-images branch under 808/ for reproducibility — see its README for how they were generated.)

Approach & alternatives

This was chosen after mocking up several alternatives (boxed panels, horizontal lanes, forced line breaks, a compact roster). The connecting-bar approach preserves the "one overarching team split into smaller teams" feel without boxes.

Implementation notes

• Grouping and colours are now baked in at generation time (generate_sc_profiles.py), replacing the fragile runtime JS that re-fetched the source CSV and fuzzy-matched member names to re-order/colour cards. Net −317 lines.
• Card markup gains a .sc-card-photo wrapper (clips the image/zoom) so the connecting bar can overflow into the gap; a .sc-cbar element carries the bar.
• Heavy generator deps (pandas/requests/Pillow) are now imported optionally so the templates can be re-rendered without them.
• index.md was regenerated from the existing committed data (no network re-fetch), so the diff is purely the layout — all 32 members, names, roles, team titles and modals are unchanged. The generator still rebuilds correctly from the two Google Sheets sources (the data/merge path is unchanged; only card rendering moved into shared helpers, verified to reproduce the committed markup byte-for-byte).

🤖 Generated with Claude Code

[github-actions]

👍 All image files/references (if any) are in webp format, in line with our policy.

[github-actions]

📝 Spell Check Results

Found 1 potential spelling issue(s) when checking 45 changed file(s):

📄 content/nowherelab/phd-survival-guide.md

Line	Issue
157	Compleat ==> Complete

---

ℹ️ How to address these issues:

1. Fix the typo: If it's a genuine typo, please correct it.
2. Add to whitelist: If it's a valid word (e.g., a name, technical term), add it to .codespell-ignore.txt
3. False positive: If this is a false positive, please report it in the PR comments.

_{🤖 This check was performed by codespell}

[LukasWallrich]

✅ Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2026-06-24 21:15:53 UTC
Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.