/* Sitewide navigation — a minimal wordmark, identical on every page. * * Two defenses keep page styles from bleeding in: * 1. The bar is absolutely positioned against the document, so per-layout * body margins/padding (Tufte's 12.5% left padding, video's reset, etc.) * can't shift it. * 2. The link is reset with `all: unset` behind selectors specific enough to * beat theme rules like Tufte's `a:link` underline gradients. */ nav.site-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 1.3rem 1.5rem; box-sizing: border-box; background: none; pointer-events: none; } nav.site-nav a.site-nav-home, nav.site-nav a.site-nav-home:link, nav.site-nav a.site-nav-home:visited, nav.site-nav a.site-nav-home:hover, nav.site-nav a.site-nav-home:focus { all: unset; pointer-events: auto; cursor: pointer; font-family: 'Petrona', Georgia, serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.24em; text-indent: 0.24em; /* balance the trailing letter-space so it centers true */ text-transform: uppercase; color: #9d9080; transition: color 0.2s ease; } nav.site-nav a.site-nav-home:hover, nav.site-nav a.site-nav-home:focus { color: #262420; } /* Dark modes: reading-experience toggles .dark-mode on , video pages on */ html.dark-mode nav.site-nav a.site-nav-home, body.dark-mode nav.site-nav a.site-nav-home { color: #a89f91; } html.dark-mode nav.site-nav a.site-nav-home:hover, html.dark-mode nav.site-nav a.site-nav-home:focus, body.dark-mode nav.site-nav a.site-nav-home:hover, body.dark-mode nav.site-nav a.site-nav-home:focus { color: #f0ebe0; }