/* Visual nav: a row of visual buttons that scrolls the page to a section when clicked (js/visual-nav.js).
   Sits at the bottom of its section and scrolls away with the page. Once it is completely out of view, the COMPRESSED bar slides in and stays
   fixed to the top of the screen: the same five buttons without the images, over the always-on soft backdrop (.site-chrome, see site-header.css), so content scrolling underneath never clashes with them. On phones the logo and this bar are stacked: the logo on top, the bar under it (see --visual-nav-dock-top in tokens.css).  The bar is a separate element, placed once at the end of <body>.
   <div class="visual-nav-slot">
     <nav class="visual-nav" aria-label="…"> …five .visual-button links (with images)… </nav>
   </div>
   <nav class="visual-nav visual-nav--compressed visual-nav--fixed" aria-label="…"><div class="visual-nav__track"> …five .visual-button links (label only)… </div></nav>
   .visual-nav--compressed without --fixed is the same bar in the normal flow (used in the style guide). */
.visual-nav-slot { width: min(var(--container), 100%); margin-inline: auto; height: calc(38px + var(--visual-media-h)); }   /* js/visual-nav.js keeps this in proportion to the row's width */
.visual-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
/* Narrow screens (under the 1220px container): the full row is one row that scrolls sideways. The cards keep their height (38px bar + 323px picture) and
   their width is worked out so that a third of the next card always shows: n whole cards, n gaps, and a third of a card fill the row, where n steps down
   from 4 to 1 as the screen narrows (--n; the cards stay close to 228px wide). Swipe, trackpad or mouse drag (js/visual-nav.js); no scrollbar.
   The row is NOT cropped to the main container: the first card starts on the container's left edge and the row runs out to the edge of the screen (the
   third of the next card is measured from the container edge to the screen edge). */
.visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed) { --n: 4; }
@media (max-width: 1259px) {
  .visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed) {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity; cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y;
    width: 100vw; margin: -4px 0 -4px calc(50% - 50vw); padding: 4px var(--bleed-edge); scroll-padding-inline-start: var(--bleed-edge);   /* full screen width; first card on the container edge; the 4px is room for the focus outline */
  }
  .visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed)::-webkit-scrollbar { display: none; }
  .visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed) > .visual-button {
    flex: 0 0 calc((100vw - var(--bleed-edge) - var(--n) * var(--space-5)) / (var(--n) + 1 / 3)); scroll-snap-align: start; -webkit-user-drag: none;
  }
  .visual-nav.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .visual-nav.is-dragging, .visual-nav.is-moving { scroll-snap-type: none; }   /* while the script carries the row, the browser's own snapping stays out of the way */
}
@media (max-width: 983px) { .visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed) { --n: 3; } }
@media (max-width: 735px) { .visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed) { --n: 2; } }
@media (max-width: 487px) { .visual-nav:not(.visual-nav--fixed):not(.visual-nav--compressed) { --n: 1; } }
.visual-nav--compressed { position: relative; isolation: isolate; }
.visual-nav--compressed .visual-button__media { height: 0; }   /* images collapse, buttons remain */
.visual-nav--fixed {
  position: fixed; top: var(--visual-nav-dock-top); left: 0; right: 0; z-index: 60;
  width: min(var(--container), calc(100% - 2 * var(--gutter))); margin-inline: auto;
  opacity: 0; visibility: hidden; transform: translateY(-120px);   /* parked above the screen until the full row has scrolled away */
  transition: transform .35s var(--ease-out), opacity .2s ease-out, visibility 0s .35s;
}
.visual-nav--fixed { display: block; }
/* The fixed bar is ONE ROW that never stacks. Where all five buttons fit (the full 1220px container) they simply sit side by side; on narrower screens the row
   is swiped (touch / trackpad) or dragged (mouse) sideways, and js/visual-nav.js keeps the current section's button in view at the left. No scrollbar. */
.visual-nav__track {
  display: flex; gap: var(--space-5); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; cursor: grab; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y;
  padding: 4px var(--bleed-edge); margin: -4px calc(50% - 50vw); scroll-padding-inline-start: var(--bleed-edge);   /* runs the full screen width, first button on the container edge; the 4px is room for the focus outline */
}
.visual-nav__track::-webkit-scrollbar { display: none; }
@media (min-width: 901px) { .visual-nav__track { padding-left: max(var(--bleed-edge), 188px); scroll-padding-inline-start: max(var(--bleed-edge), 188px); } }   /* tablets / small laptops: the logo (34 + 134px) sits in the same top row, so the first button starts 20px right of it instead of under it */
.visual-nav__track > .visual-button { flex: 1 0 228px; scroll-snap-align: start; -webkit-user-drag: none; }
@media (min-width: 901px) and (max-width: 1599px) {   /* tablets / small laptops: the five buttons share the room between the logo and the right edge (no sideways scrolling; phones and the portrait tablet bar still scroll) */
  .visual-nav__track { overflow-x: visible; padding-right: max(var(--bleed-edge), 20px); cursor: auto; }
  .visual-nav__track > .visual-button { flex: 1 1 0; min-width: 0; }
}
.visual-nav__track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.visual-nav__track.is-dragging, .visual-nav__track.is-moving { scroll-snap-type: none; }
.visual-nav--fixed.is-visible { opacity: 1; visibility: visible; transform: none; transition: transform .35s var(--ease-out), opacity .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .visual-nav--fixed, .visual-nav--fixed.is-visible { transition: none; } }