/* Raconteur Road — shared responsive navigation. One file, loaded on every page AFTER that page's own stylesheet, so these rules win on small screens. The desktop nav (wordmark left, mono link row right) is untouched; at <=600px the link row collapses into a hamburger dropdown. Progressive enhancement: nav.js adds .js-nav to and injects the .nav-toggle button. With JS off, the inline .nav-links stay visible (the desktop row) so navigation is never lost — it just wraps. Palette vars (--paper/--rule/--ink/--quiet/--accent) come from each page's CSS :root; fallbacks are inlined here so this file stands alone. */ .nav-toggle { display: none; /* shown only on mobile, only when JS present */ align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin: 0 -0.5rem 0 0; /* nudge to the header's right padding edge */ padding: 0; background: transparent; border: none; cursor: pointer; color: var(--ink, #1a1a1a); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } /* The icon: a centre bar plus two pseudo-bars. Morphs to an × when open. */ .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 21px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before { content: ""; position: absolute; left: 0; top: -6px; } .nav-toggle-bars::after { content: ""; position: absolute; left: 0; top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 600px) { /* Normalise the header bar across every surface. Each page set its own mobile header geometry: home used 60px tall / 1.5rem side padding / 1.25rem wordmark, while book, journeys, papers and tracks used tighter and differing values (52px, 0.75rem padding, and tracks even shrank the wordmark to 1rem). That made the bar — and the hamburger's distance from the edge — jump between pages. Pin them all to home's geometry so the bar is identical everywhere. tracks offsets its map by --header-h, so keep that variable in step with the height here. */ .js-nav .site-header, .js-nav body > header { height: 60px; padding-left: 1.5rem; padding-right: 1.5rem; } :root { --header-h: 60px; } .js-nav .site-header .wordmark, .js-nav body > header .wordmark { font-size: 1.25rem; } /* Show the toggle; the inline link row becomes a dropdown panel that is anchored to the header (nav.js sets the header to position: relative when it isn't already positioned — tracks' fixed header is left alone). Taking .nav-links out of flow also removes it as a cause of the header overflowing the viewport. */ .js-nav .nav-toggle { display: inline-flex; } .js-nav .nav-links { position: absolute; top: 100%; right: 0; left: auto; min-width: 12rem; display: none; flex-direction: column; align-items: stretch; margin: 0; padding: 0.25rem 0; background: var(--paper, #fafaf8); border: 1px solid var(--rule, #d8d3c8); border-top: none; border-radius: 0 0 3px 3px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14); z-index: 50; } .js-nav .nav-links.open { display: flex; } .js-nav .nav-links a { margin: 0; padding: 0.85rem 1.15rem; font-size: 0.9rem; color: var(--quiet, #4a4a4a); border-bottom: 1px solid var(--rule, #d8d3c8); } .js-nav .nav-links a:last-child { border-bottom: none; } /* The desktop active style is a 2px underline — wrong when the links are stacked. Replace it with a left accent marker. */ .js-nav .nav-links a.active { color: var(--ink, #1a1a1a); font-weight: 600; border-bottom: 1px solid var(--rule, #d8d3c8); padding-bottom: 0.85rem; box-shadow: inset 3px 0 0 var(--accent, #6b5d4f); } .js-nav .nav-links a.active:last-child { border-bottom: none; } } @media (prefers-reduced-motion: reduce) { .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } }