# nav — shared cross-surface header nav

One file, one set of destinations, every surface. A small breadcrumb that links
the connected gf.cx surfaces together at the top of the page. Single source —
change the destinations here, the whole portfolio updates.

## Use

```html
<div data-site-nav data-current="status"></div>
<script src="https://assets.gf.cx/nav/nav.js" defer></script>
```

Drop the placeholder as the first child of the page's content wrapper (top of
the page). The script replaces it in place with a `<nav class="site-nav">`
breadcrumb.

## data-current (orientation, not gating)

`data-current` marks which surface the page belongs to so the reader is
oriented. **Both destinations always render as links** — from a dated digest you
still want the Dailies index; from a status page you still want the status root.

| value       | surface                        |
|-------------|--------------------------------|
| `status`    | status.gf.cx (hub, /activity/, /spend/) |
| `dailies`   | dash.gf.cx /motion/ (Dailies)  |
| *(omitted)* | nothing marked current         |

## Destinations live in ONE place

The breadcrumb items are the `ITEMS` array in `nav.js`. Add a surface there and
it appears on every page across the portfolio at once — that's the point. Never
hand-copy nav markup into a page.

## Polite by design

- Themes off local CSS vars (`--mono` / `--ink-soft` / `--accent` / `--line`)
  with fallbacks, so it inherits each surface's palette.
- Hidden in `@media print`.
- With JS off, no nav renders (orientation affordance, not load-bearing).

## Lineage

v0.1.0 · 2026-06-28 — first cut. status.gf.cx ⇄ dash.gf.cx/motion (Dailies).
Same control-plane model as `made-with` and `back-to-top`.