/* Shared top banner for aity's research-project pages (e.g. The Parenting Ledger).
Include with and drop
this markup as the first thing in , before any page-specific content. This
file sits behind aity.uk's 4h Cloudflare static-asset cache with no purge access
configured, so bump the `?v=N` on every page that links it whenever this file
changes, or edits won't show up for up to 4 hours.
Two separate links, not one: "aity" always goes to the site homepage ("/"),
"Research Projects" goes to /research.html, the index of every research page.
Keep them separate even if the wording changes later. No per-page title pill —
the page's own
already covers that, right below the bar.
Deliberately unscoped and self-contained (no shared CSS variables) so it drops
cleanly onto a page with its own, unrelated design system.
Standard width for this page type: the bar's inner row and the page's own
content wrapper both use `width:75%; max-width:1400px; margin:0 auto;`
(with `width:90%` under 900px) so the bar lines up with the content below it. */
.aity-research-bar{background:#12172B;border-bottom:1px solid #2A3150;padding:.65rem 1.5rem;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.arb-inner{width:75%;max-width:1400px;margin:0 auto;}
@media (max-width:900px){.arb-inner{width:90%;}}
.arb-crumbs{display:flex;align-items:baseline;gap:.5rem;}
.arb-home,.arb-section{text-decoration:none;}
.arb-home:focus-visible,.arb-section:focus-visible{outline:2px solid #2FD3B8;outline-offset:3px;border-radius:2px;}
.arb-home{display:inline-flex;align-items:baseline;gap:.4rem;}
.arb-home .arb-arrow{color:#2FD3B8;font-size:.85rem;}
.arb-home .arb-mark{font-weight:600;font-size:.95rem;color:#E8EAF2;}
.arb-home .arb-mark .arb-a{color:#2FD3B8;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em;}
.arb-sep{font-size:.78rem;color:#454B66;}
.arb-section{font-size:.78rem;color:#A6ADC8;letter-spacing:.02em;}
.arb-section:hover{color:#2FD3B8;}