/* =====================================================================
   SPAN · page
   Inner pages (About, Contact, legal, 404): the fixed rail, the top bar
   with its navigation axis, span headers and the reading primitives.
   Home does not load this file; its hero and sections live in home.css.
   ===================================================================== */
body{font-size:18px;line-height:1.6}
body::before{content:"";position:fixed;left:var(--rail-x);top:0;bottom:0;width:1px;background:var(--rule-2);z-index:1}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}



.head{position:fixed;left:calc(var(--rail-x) - 3px);top:22px;width:7px;height:7px;border-radius:50%;background:var(--ember);z-index:40;pointer-events:none}
.d{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;border:1px solid var(--fg);background:var(--bg);position:relative}
.d.f{background:var(--fg)}
.d.h{background:linear-gradient(90deg,var(--fg) 50%,var(--bg) 50%)}
.d.u{border:1px dashed var(--fg3);background:transparent}

/* ---------- top bar: the root name and the navigation axis ---------- */
.top{position:relative;height:96px;z-index:5}
.top .root{position:absolute;left:var(--ax1);top:31px;font-family:var(--f-display);font-weight:620;font-stretch:75%;font-size:21px;letter-spacing:-.01em}
.top .root:hover{color:var(--cobalt)}
.top .axis{position:absolute;left:47%;right:0;top:46px;height:1px;background:var(--rule-2)}
.top nav a{position:absolute;top:46px;padding:12px 10px 8px 0;transform:translateX(-3.5px)}
.top nav .d{position:absolute;left:0;top:-3.5px;width:8px;height:8px;border-color:var(--fg2)}
.top nav .l{font-family:var(--f-display);font-weight:500;font-size:14.5px;white-space:nowrap}
.top nav a[aria-current] .d,.top nav a:hover .d{background:var(--cobalt);border-color:var(--cobalt)}
.top nav a[aria-current] .l{text-decoration:underline;text-decoration-color:var(--cobalt);text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:719px){.top nav a:nth-child(1){left:var(--ax1)!important}.top nav a:nth-child(2){left:calc(var(--ax1) + 21%)!important}.top nav a:nth-child(3){left:calc(var(--ax1) + 39%)!important}.top nav a:nth-child(4){left:calc(var(--ax1) + 62%)!important}.top{height:104px}.top .root{top:18px;font-size:19px}.top .axis{left:var(--ax1);top:auto;bottom:18px}.top nav a{top:auto;bottom:18px;padding:0 6px 12px 0}.top nav .d{top:auto;bottom:-4.5px}.top nav .l{font-size:13px}}
.sh{position:relative;z-index:3;padding:0 var(--gut) 0 var(--ax1);font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;letter-spacing:.02em;color:var(--fg3);display:flex;flex-wrap:wrap;gap:4px 14px;line-height:1.6}
.sh::before{content:"";position:absolute;left:var(--rail-x);top:.8em;width:calc(var(--ax1) - var(--rail-x) - 12px);height:1px;background:var(--fg)}
.sh::after{content:"";position:absolute;left:calc(var(--rail-x) - 2px);top:calc(.8em - 2px);width:5px;height:5px;border-radius:50%;background:var(--fg)}
.sh b{font-weight:400;color:var(--fg2)}
.sec{position:relative;padding-block:var(--pad) 0}
.h2{margin:18px var(--gut) 0 var(--ax1);font-family:var(--f-display);font-weight:600;font-stretch:82%;font-size:clamp(28px,2.7vw,40px);line-height:1.05;letter-spacing:-.012em}
.lead{margin:18px var(--gut) 0 var(--ax2);max-width:56ch;font-size:clamp(17.5px,1.35vw,20px);line-height:1.52;color:var(--fg2)}
.note{margin:14px var(--gut) 0 var(--ax2);max-width:64ch;font-size:15px;line-height:1.5;color:var(--fg3)}
.note .mono{color:var(--fg2);margin-right:6px}
.more{display:inline-flex;align-items:center;gap:10px;margin:26px var(--gut) 0 var(--ax2);font-family:var(--f-display);font-weight:500;font-size:15.5px}
.more .d{width:8px;height:8px}
.more:hover{color:var(--cobalt)}.more:hover .d{background:var(--cobalt);border-color:var(--cobalt)}