/* The bar on scroll (owner, 2026-10-08: "what about the navbar what can we do about it? i want to make it like maybe hide or
   get smaller when you scroll", then "stop the functionality of it hiding, just make it smaller").

   A little way down the page (navbar.js sets .scrolled; without script the bar is exactly as it was) the bar settles to a
   slimmer height (72px to 56px, 64px to 54px on a phone) and the mark steps down with it. A margin under it takes up exactly
   the height it gives up, so nothing on the page moves; the page simply reads through the band it left. It never hides.
   Sticky parts of the pages keep their offsets (--nb-chrome-h). Flat, a crisp edge, no glow; tokens only. Reduced motion:
   the same two heights, with no movement between them. */

html .topbar {
  transition:
    min-height 260ms var(--nb-ease, ease),
    margin-bottom 260ms var(--nb-ease, ease),
    background-color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}
html .topbar .logo {
  transform-origin: left center;
  transition: opacity 0.18s ease, scale 260ms var(--nb-ease, ease);
}

/* slimmer once the page is under it */
html .topbar.scrolled {
  min-height: 56px;
  margin-bottom: 16px;
}
html .topbar.scrolled .logo {
  scale: 0.88;
}
@media (max-width: 767px) {
  html .topbar.scrolled {
    min-height: 54px;
    margin-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .topbar,
  html .topbar .logo {
    transition-duration: 0s !important;
  }
}