Navigation

Rail

The numbered list of a page’s sections: where you are in a long page, and a way to jump.

01

Examples

Rail beside the first sections (Management README)Open “Rail beside the first sections (Management README)” at full size

Tablet 768 · Light

Desktop 1440 · Light

Tablet 768 · Dark

Desktop 1440 · Dark

02

When to use it

Every content page with more than two sections. Entries match the section headings, numbered 01, 02, ….

Live: Management README, Advisory, Agents, Hirsla, Unresolved, articles, utility pages.

03

Anatomy

Trail
p.rail-crumbs, the band’s way back.
List
ol > li > a[href=#id] with .rail-n (tabular number) and .rail-t (the heading).
Marker
span.rail-mark: one 2px indigo bar that slides to the current section (site.js).
04

Variants

Call to action
p.rail-cta under the list (book and app pages): the page’s one action, hidden on tablet.
Utility
.rail-util: smaller entries, 15/22, on articles and utility pages.
05

States

Default
Secondary ink, 2px hairline on the left.
Current
aria-current="true", ink text, marker beside it.
Hover
Ink.
06

Behaviour

Phone, tablet, desktop
Phone: hidden. Tablet: a sticky row of numbers under the band (titles visually hidden), 2px marker under the current number. Desktop: sticky left column, 40px from the top.
Motion
Marker: 250ms on the system ease, transform and height. Height is the one stated layout exception: a single 2px bar, nothing reflows. The current section is the last one whose top has passed 30% of the viewport.
07

Accessibility

nav[aria-label=Sections]. aria-current on the active link. On tablet the titles stay in the accessibility tree.

08

Words

Sentence case, no full stops, the same words as the section heading.

09

Code

Classes: .rail .rail-n .rail-t .rail-mark .rail-crumbs .rail-util. Styles in site/assets/css/site.css.

<div class="main wrap cols">
<nav aria-label="Sections" class="rail">
<p class="rail-crumbs"><a href="/"><span><span aria-hidden="true">←  </span>Index</span></a></p>
<ol>
<li><a href="#r-north"><span class="rail-n">01</span><span class="rail-t">  My true north</span></a></li>
<li><a href="#r-dim"><span class="rail-n">02</span><span class="rail-t">  Think wide, care deep, act calm</span></a></li>
<li><a href="#r-deliver"><span class="rail-n">03</span><span class="rail-t">  Delivery principles</span></a></li>
<li><a href="#r-why"><span class="rail-n">04</span><span class="rail-t">  Why I am here</span></a></li>
<li><a href="#r-exp"><span class="rail-n">05</span><span class="rail-t">  Expectations</span></a></li>
<li><a href="#r-work"><span class="rail-n">06</span><span class="rail-t">  How to work with me</span></a></li>
<li><a href="#r-wrong"><span class="rail-n">07</span><span class="rail-t">  When things go wrong</span></a></li>
<li><a href="#r-121"><span class="rail-n">08</span><span class="rail-t">  One-on-ones and feedback</span></a></li>
<li><a href="#r-life"><span class="rail-n">09</span><span class="rail-t">  Life beyond work</span></a></li>
</ol>
<span class="rail-mark" hidden=""></span>
</nav>
<div class="read">
<p class="intro" data-tile="">This is a working document. It explains how I operate as a leader and colleague, what you can expect from me, and what I expect from you. My goal is simple: make our work together clear, calm, and meaningful.</p>
<section aria-labelledby="r-north-h" class="sec" id="r-north">
<div class="sec-rule"></div>
<div class="sec-n">01</div>
<h2 id="r-north-h">My true north</h2>
<p>I lead with clarity, respect, and long-term thinking. I care about people and relationships as much as I care about outcomes. I try to remove noise, create focus, and build systems that last.</p>
<p>I do not optimise for speed or volume. I optimise for signal, quality, and impact over time. The decisions we make today should still feel right years from now.</p>
<p>I believe in direct, honest relationships built on mutual respect and accountability. Kindness is not softness. It is the willingness to tell someone the truth when it matters, to hold people to high standards because you believe in them, and to be consistent whether the situation is easy or hard. I will always have your back. And I will always tell you what I think.</p>
</section>
<section aria-labelledby="r-dim-h" class="sec" id="r-dim">
<div class="sec-rule"></div>
<div class="sec-n">02</div>
<h2 id="r-dim-h">Think wide, care deep, act calm</h2>
<h3>Think wide</h3>
<dl class="rows">
<div><dt>Strategic clarity</dt><dd>I look for patterns early, zoom out, and simplify complexity into something navigable and actionable.</dd></div>
<div><dt>Curiosity and experimentation</dt><dd>I test, explore, and iterate. Progress comes from learning loops, not perfect plans.</dd></div>
<div><dt>Aesthetic and systems sense</dt><dd>I care about how things feel, flow, and connect. Good design and structure help people think better and work better.</dd></div>
</dl>
<h3>Care deep</h3>
<dl class="rows">
<div><dt>Empathy and connection</dt><dd>I care about perspectives, context, and wellbeing. Family grounds me, and I bring that same sense of humanity into work.</dd></div>
<div><dt>Balance seeking</dt><dd>I manage the tensions between vision and detail, presence and space. I stay close without micromanaging, and I re-enter when alignment matters.</dd></div>
</dl>
<h3>Act calm</h3>
<dl class="rows">
<div><dt>Resilience with perspective</dt><dd>I stay steady. I use calmness and lightness to keep momentum, even when pressure rises.</dd></div>
<div><dt>Grounded ambition</dt><dd>High standards, low drama. Improvement through clarity and focus, not stress.</dd></div>
</dl>
</section>
<div class="closing">
<p class="label">In one sentence</p>
<p>I create clarity, expect ownership, stay calm, and focus on long-term impact over noise.</p>
</div>
</div>
</div>