/* Nav links (after Altrum): plain text links spread across the middle of the header.
   Each sits on a faint 1px line; on hover the letters roll up one after another (a second copy
   rolls in from below) and a solid line sweeps in from the left, leaving to the right.
   Letters are split by demos/nav-links.js. Hidden below 900px, where the mobile menu (demos/nav-menu.css) takes over. */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav .brand { justify-self: start; }
.nav .nav__right { justify-self: end; }
.nav__links { display: flex; gap: clamp(24px, 3.2vw, 52px); }
.nl { position: relative; display: inline-flex; padding-bottom: 5px;
  font: 600 15px/1.2 var(--font-body); letter-spacing: -.01em; color: var(--text); }
.nl__txt { position: relative; display: block; height: 1.2em; overflow: hidden; }
.nl__row { display: block; white-space: pre; }
.nl__row + .nl__row { position: absolute; left: 0; top: 100%; }
.nl__row i { display: inline-block; font-style: normal; transition: transform .5s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.nl:hover .nl__row i, .nl:focus-visible .nl__row i { transform: translateY(-100%); }
/* underline: faint track + solid sweep */
.nl::before, .nl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; }
.nl::before { opacity: .25; }
.nl::after { transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.nl:hover::after, .nl:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* over the homepage hero photo (before scrolling) everything in the nav stays white */
body:has(.hero) .nav:not(.is-scrolled) .nl { color: #fff; }
body:has(.hero) .nav:not(.is-scrolled) .roll { --b-ink: #fff; --b-acc: var(--brand); --b-on: var(--brand-ink); }
@media (max-width: 900px) { .nav { display: flex; } .nav__links { display: none; } }
@media (prefers-reduced-motion: reduce) { .nl__row i, .nl::after { transition: none; } }

/* Logo in the menu: white wordmark on dark, dark wordmark on light (and white again over a hero photo) */
.brand { display: flex; align-items: center; }
.brand__logo { display: block; height: 30px; width: auto; }
@media (max-width: 600px) { .brand__logo { height: 24px; } }