/* anydayodelay.com — THE shared site nav. One bar, every page, one stylesheet. v2
*
* Source of truth: Maggie/maggie/digest/assets/nav.css — `maggie render` copies it
* to site-digest/assets/, and publish.ps1 bundles site-digest/ at the domain root,
* so it deploys to /assets/nav.css. The markup + behavior live in nav.js beside
* this file. Pages carry ONLY:
*
* (in )
* (top of )
*
* Pages whose carries its own padding (the digest editorial pages pad
* 48px 56px / 30px 18px on mobile) add the `sn-bleed` class so the bar bleeds
* to the viewport edge; bare-body pages (projects/) use plain `sitenav`.
*
* Everything is namespaced (.sitenav / --sn-*) and keyed off html[data-theme],
* which every page sets pre-paint (dark default), so the bar renders IDENTICALLY
* regardless of the host page's own palette or CSS reset.
* Look: the digest chrome — light = editorial (warm paper, Fraunces, vermilion),
* dark = console (ink panels, Bricolage, teal). */
@font-face{
font-family:'Fraunces';font-style:normal;font-weight:400 900;font-display:swap;
src:url(/assets/fonts/fraunces.woff2) format('woff2');
}
@font-face{
font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
src:url(/assets/fonts/bricolage-grotesque.woff2) format('woff2');
}
@font-face{
font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');
}
@font-face{
font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
src:url(/assets/fonts/ibm-plex-mono-600.woff2) format('woff2');
}
.sitenav{
/* light = editorial */
--sn-paper:#f4efe6; --sn-raised:#fbf8f1; --sn-ink:#191713; --sn-muted:#6f6757;
--sn-faint:#8c8473; --sn-rule:#d9d1c2; --sn-accent:#c8431f; --sn-accent2:#1f5c8c;
--sn-grad:linear-gradient(92deg,#191713 12%,#1f5c8c 58%,#c8431f);
--sn-display:"Fraunces",Georgia,serif;
--sn-mono:"IBM Plex Mono",Consolas,monospace;
--sn-glow:none; --sn-shadow:rgba(0,0,0,.22);
}
html[data-theme=dark] .sitenav{
/* dark = console */
--sn-paper:#0b0d12; --sn-raised:#13161f; --sn-ink:#e7ecf5; --sn-muted:#8a93a6;
--sn-faint:#5b6478; --sn-rule:#272d3b; --sn-accent:#3ee0c4; --sn-accent2:#8b7bff;
--sn-grad:linear-gradient(92deg,#fff 8%,#bcd4ff 52%,#8b7bff);
--sn-display:"Bricolage Grotesque",system-ui,sans-serif;
--sn-glow:0 0 8px -1px var(--sn-accent); --sn-shadow:rgba(0,0,0,.6);
}
/* ── the bar ── */
.sitenav{
position:sticky; top:0; z-index:60; box-sizing:border-box;
display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
gap:12px 18px; padding:12px 56px; margin:0;
background:color-mix(in srgb,var(--sn-paper) 82%,transparent);
backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35);
border-bottom:1px solid var(--sn-rule);
box-shadow:0 10px 30px -26px var(--sn-shadow);
transition:background .3s;
}
.sitenav *{box-sizing:border-box; margin:0; padding:0}
/* bleed variant for pages whose body carries the page padding (digest editorial) */
.sitenav.sn-bleed{margin:-48px -56px 34px}
.sitenav .sn-left{display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; flex:1 1 auto; min-width:0}
.sitenav .sn-brand{display:flex; align-items:center; gap:9px; font-family:var(--sn-display);
font-weight:800; font-size:16px; letter-spacing:-.015em; text-decoration:none; white-space:nowrap}
.sitenav .sn-gem{width:14px; height:14px; border-radius:4px; transform:rotate(45deg); flex:none;
background:linear-gradient(135deg,var(--sn-accent),var(--sn-accent2)); box-shadow:var(--sn-glow)}
.sitenav .sn-brand:hover .sn-gem{box-shadow:0 0 14px -1px var(--sn-accent)}
.sitenav .sn-word{background:var(--sn-grad); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:var(--sn-ink)}
.sitenav .sn-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.sitenav .sn-links a, .sitenav .sn-drop summary{
font-family:var(--sn-display); font-size:13px; letter-spacing:-.01em; font-weight:500;
text-decoration:none; color:var(--sn-muted); padding:7px 13px; border-radius:9px;
border:1px solid transparent; white-space:nowrap; line-height:1.2;
transition:color .14s, background .14s, border-color .14s;
}
.sitenav .sn-links a:hover, .sitenav .sn-drop summary:hover{
color:var(--sn-ink); background:color-mix(in srgb,var(--sn-accent) 10%,transparent);
border-color:color-mix(in srgb,var(--sn-accent) 16%,transparent);
}
.sitenav .sn-links a.active, .sitenav .sn-drop.active summary{
color:var(--sn-accent); font-weight:600;
background:linear-gradient(100deg,color-mix(in srgb,var(--sn-accent) 15%,transparent),color-mix(in srgb,var(--sn-accent2) 13%,transparent));
border-color:color-mix(in srgb,var(--sn-accent) 38%,transparent);
}
/* ── the Projects dropdown ── */
.sitenav .sn-drop{position:relative; list-style:none}
.sitenav .sn-drop summary{cursor:pointer; user-select:none; display:flex; align-items:center; gap:5px; list-style:none}
.sitenav .sn-drop summary::-webkit-details-marker{display:none}
.sitenav .sn-drop summary::marker{display:none}
.sitenav .sn-drop[open] summary{color:var(--sn-ink);
background:color-mix(in srgb,var(--sn-accent) 10%,transparent);
border-color:color-mix(in srgb,var(--sn-accent) 16%,transparent)}
.sitenav .sn-chev{font-size:.62em; opacity:.6; transition:transform .15s}
.sitenav .sn-drop[open] .sn-chev{transform:rotate(180deg)}
.sitenav .sn-menu{position:absolute; top:calc(100% + 8px); left:0; z-index:70;
display:flex; flex-direction:column; gap:1px; padding:6px; min-width:238px;
background:color-mix(in srgb,var(--sn-paper) 98%,transparent);
backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35);
border:1px solid var(--sn-rule); border-radius:12px;
box-shadow:0 14px 40px -18px var(--sn-shadow)}
.sitenav .sn-menu a{font-family:var(--sn-display); font-size:12.5px; font-weight:500; letter-spacing:-.01em;
display:block; text-decoration:none; color:var(--sn-muted); padding:8px 12px; border-radius:8px;
white-space:nowrap; transition:color .1s, background .1s}
.sitenav .sn-menu a:hover{color:var(--sn-ink); background:color-mix(in srgb,var(--sn-accent) 10%,transparent)}
.sitenav .sn-menu a.current{color:var(--sn-accent); background:color-mix(in srgb,var(--sn-accent) 8%,transparent)}
.sitenav .sn-sect{font-family:var(--sn-display); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
color:var(--sn-faint); font-weight:600; padding:8px 12px 4px}
.sitenav .sn-div{height:1px; background:var(--sn-rule); margin:4px 0; border:0}
/* ── mega menu: 4 explicit flex columns ──
NOT CSS multicol. Every multicol variant failed on this content:
- grid `repeat(4,1fr)`: forces every cell in a grid row to the tallest
cell's height → big empty gaps under the short sections ("weird spaces").
- `column-fill: balance`: equalizes column heights and leaves the 4th
column empty (the 13-item Trading section dominates), plus can space a
short section down to hit the balance target.
- `column-fill: auto` with no height: ALL content flows into column 1
→ renders as ONE column. With a fixed height it splits the tall
Trading section across columns (break-inside can't hold a section
taller than the column).
nav.js instead partitions the sections into 4 order-preserving groups
(greedy fill to ~total/4) and emits one .sn-mega-col per group; flex lays
them out side by side, each group stacked top-down. Robust as projects
grow — no height to tune, can never collapse to one column. */
.sn-menu.sn-mega {
display: flex;
flex-direction: row; /* base .sn-menu is flex-direction:column — must reset */
gap: 0;
/* 4 columns (nav.js NCOLS — the VGC layers merged into one section 2026-07-09, so the
menu narrowed 5→4). Centered on the VIEWPORT (position:fixed) and clamped so it can
never run off-screen — the "Projects" trigger sits near the left, so the old
absolute `left:50%` (relative to the trigger) pushed the menu half its width off
the LEFT edge. fixed + min()-width keeps it on-screen at any viewport; mobile
(<620px) still reverts to a single column below. top≈nav-bar height (45px)+8. */
position: fixed;
top: 53px;
width: min(860px, calc(100vw - 20px));
max-height: calc(100vh - 66px);
overflow-y: auto;
padding: 14px 6px 16px;
left: 50%;
transform: translateX(-50%);
}
.sn-mega-col {
flex: 1 1 0;
min-width: 0;
padding: 0 14px;
border-left: 1px solid color-mix(in srgb, var(--sn-rule) 65%, transparent);
}
.sn-mega-col:first-child {
border-left: none;
}
/* Section header = editorial kicker: muted uppercase label led by a small
accent tick (the site's kicker language), so each group reads as a titled
block without shouting color at 30 links. */
.sn-menu.sn-mega .sn-sect {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--sn-display);
font-weight: 700;
font-size: 9.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sn-faint);
padding: 3px 10px 8px;
}
.sn-menu.sn-mega .sn-sect::before {
content: "";
flex: none;
width: 14px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--sn-accent), var(--sn-accent2));
box-shadow: var(--sn-glow);
}
/* Stacked sections within one column get clear air + a hairline between them. */
.sn-mega-col > .sn-sect:not(:first-child) {
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--sn-rule) 55%, transparent);
}
/* Links: denser, with an accent rail that slides in on hover / marks current. */
.sn-menu.sn-mega a {
font-size: 12px;
padding: 6px 10px;
border-radius: 7px;
box-shadow: inset 0 0 0 0 var(--sn-accent);
transition: color .13s, background .13s, box-shadow .13s;
}
.sn-menu.sn-mega a:hover {
color: var(--sn-ink);
background: color-mix(in srgb, var(--sn-accent) 13%, transparent);
box-shadow: inset 2px 0 0 0 var(--sn-accent);
}
.sn-menu.sn-mega a.current {
color: var(--sn-accent);
background: color-mix(in srgb, var(--sn-accent) 10%, transparent);
box-shadow: inset 2px 0 0 0 var(--sn-accent);
}
/* ── right cluster: logout + theme toggle ── */
.sitenav .sn-actions{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; flex:none; margin-left:auto}
.sitenav .sn-logout{font-family:var(--sn-display); font-size:12px; letter-spacing:-.01em; font-weight:500;
text-decoration:none; color:var(--sn-faint); white-space:nowrap; transition:color .14s}
.sitenav .sn-logout:hover{color:var(--sn-accent)}
.sitenav .sn-toggle{font-family:var(--sn-display); font-size:12px; letter-spacing:-.01em; font-weight:500;
color:var(--sn-muted); background:var(--sn-raised); border:1px solid var(--sn-rule); border-radius:30px;
padding:7px 14px; cursor:pointer; transition:.18s; line-height:1.2}
.sitenav .sn-toggle:hover{color:var(--sn-accent); border-color:var(--sn-accent)}
/* ── mobile ── */
@media(max-width:620px){
.sitenav{padding:10px 18px; gap:9px 12px; flex-wrap:wrap}
.sitenav.sn-bleed{margin:-30px -18px 24px}
.sitenav .sn-left{gap:6px 10px; flex:1 1 100%}
.sitenav .sn-brand{font-size:15px}
.sitenav .sn-links{gap:3px}
.sitenav .sn-links a, .sitenav .sn-drop summary{font-size:11px; padding:6px 10px}
.sitenav .sn-actions{gap:8px}
.sitenav .sn-toggle{padding:6px 11px}
.sitenav .sn-menu{position:fixed; left:8px; right:8px; min-width:0; max-height:60vh; overflow-y:auto}
.sn-menu.sn-mega {
flex-direction: column;
left: 8px; right: 8px;
transform: none;
width: auto;
min-width: 0;
}
.sn-mega-col { border-left: none; padding: 0; }
}
/* ?f= deep-link highlight (nav.js scrolls the archive explorer's target finding
into view on the frozen edition pages — nav.css loads everywhere, archive.css doesn't). */
li.finding.acx-hit { outline: 2px solid var(--sn-accent, #6d93ff); outline-offset: 4px; border-radius: 8px; }