/* Site bar (landing page only): the always-visible bar at the top: logo left, two nav links centred (Case studies | About, a cross-hair between), two social boxes right.
   Figma "XL" 297:1817 and "mobile" 297:1778. Desktop: one row (33px sides, 12px from the top, 10px above / below). At 900px and under: the logo and socials on the first row and the nav centred
   on a second row under them. The link for the current slide has a 1px underline (aria-current="true"); the others have a transparent one, so nothing shifts. The bar is clear: dithered pictures run right up to the top and under it. The links and the social boxes have the page colour
   (#E8E9E3) as their fill so they stay readable over a picture; the logo and the cross-hair have no fill. Socials: 30px boxes, 8px corners, 1px #3f3f3f outline, the icon in the same grey.
   <header class="site-bar"><div class="site-bar__row"> logo link · <nav class="site-bar__nav"> links + cross-hair </nav> · <div class="site-bar__socials"> 2 × .site-bar__social </div></div></header> */
.site-bar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; padding: 12px 33px 0; background: transparent; pointer-events: none; }   /* the bar itself is clear (pictures show right up to the top); the links and social boxes carry the page colour */
.site-bar a { pointer-events: auto; }
.site-bar__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-block: 10px; }   /* the nav is centred on the stage, not between the logo and the socials */
.site-bar__logo { justify-self: start; display: block; line-height: 0; }
.site-bar__logo img { display: block; width: 184px; height: 40px; }
.site-bar__nav { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.site-bar__link { margin: 0; padding: 6px 10px; background-color: var(--color-bg); border-bottom: 1px solid transparent; color: var(--color-action); text-decoration: none; white-space: nowrap; text-align: center; transition: border-color .25s ease-out; }
.site-bar__link[aria-current="true"] { border-bottom-color: var(--color-action); }
.site-bar__link:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
.site-bar__cross { flex: none; fill: var(--color-action); }
.site-bar__socials { justify-self: end; display: flex; gap: 10px; }
.site-bar__social { width: 30px; height: 30px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--color-action); border-radius: 8px; background-color: var(--color-bg); color: var(--color-action); text-decoration: none; }   /* filled with the page colour (#E8E9E3) so it reads over a picture */
.site-bar__social:hover, .site-bar__social:focus-visible { background-image: linear-gradient(rgba(63, 63, 63, .08), rgba(63, 63, 63, .08)); outline: none; }
@media (max-width: 900px) {
  .site-bar { padding: 12px 9px 0; }
  .site-bar__row { flex-wrap: wrap; row-gap: 4px; padding-block: 6px 8px; }
  .site-bar__logo img { width: 124px; height: 27px; }
  .site-bar__logo { margin-right: auto; }
  .site-bar__nav { order: 3; flex: 1 0 100%; }
}

/* Hamburger (phones only): dotted, three rows of 2px squares (like the cross-hair); open = a dotted X. Hidden on desktop. */
.site-bar__burger, .site-bar__menu { display: none; }
@media (max-width: 900px) {
  .site-bar { padding: 0; background: var(--color-bg); border-bottom: .5px solid var(--color-case-dark); pointer-events: auto; }   /* a full page-colour bar with a 0.5px grey line under it */
  .site-bar__row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 8px 9px; gap: 0; }
  .site-bar__nav, .site-bar__socials { display: none; }
  .site-bar__logo { grid-column: 2; justify-self: center; margin: 0; }
  .site-bar__logo img { width: 124px; height: 27px; }
  .site-bar__burger { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--color-action); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .site-bar__burger:focus-visible { outline: 2px solid var(--color-action); outline-offset: -2px; }
  .site-bar__burger svg { grid-area: 1 / 1; }
  .site-bar__burger-close { display: none; }
  .site-bar__burger[aria-expanded="true"] .site-bar__burger-open { display: none; }
  .site-bar__burger[aria-expanded="true"] .site-bar__burger-close { display: block; }
  .site-bar__menu { display: block; height: 0; overflow: hidden; background: var(--color-case-dark); color: var(--color-type-sample); transition: height .35s ease; }
  .site-bar__menu-nav { display: grid; justify-items: center; gap: 6px; padding-top: 28px; }
  .site-bar__menu-link { padding: 6px 10px; border-bottom: 1px solid transparent; color: var(--color-type-sample); text-decoration: none; text-align: center; }
  .site-bar__menu-link[aria-current="true"] { border-bottom-color: var(--color-type-sample); }
  .site-bar__menu-link:focus-visible { outline: 2px solid var(--color-type-sample); outline-offset: 2px; }
  .site-bar__menu-socials { display: flex; justify-content: center; gap: 10px; padding: 22px 0 28px; }
  .site-bar__menu .site-bar__social { border-color: var(--color-type-sample); color: var(--color-type-sample); background-color: transparent; }
}
/* landing page (all sizes): the big dithered logo is in view on the first slide, so the bar logo is not shown there; once you scroll past it, the (full size) logo scrolls up into the bar */
.site-bar--landing .site-bar__logo { transition: opacity .4s ease-out, transform .4s ease-out; }
html:not([data-section]) .site-bar--landing .site-bar__logo, html[data-section="0"] .site-bar--landing .site-bar__logo { opacity: 0; transform: translateY(18px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .site-bar__menu, .site-bar--landing .site-bar__logo { transition: none; } }

/* how far the open phone menu has pushed the page down (set by js/site-menu.js; animated here) */
@property --menu-push { syntax: '<length>'; inherits: true; initial-value: 0px; }
html { transition: --menu-push .35s ease; }
@media (prefers-reduced-motion: reduce) { html { transition: none; } }

/* The same phone bar on the case study pages (<header class="site-bar site-bar--mobile">): phones only; it replaces the fixed logo (.site-header) and sits above the docked nav bar (z 75).
   The page (main) and the docked bar move down with the open menu. */
.site-bar--mobile { display: none; }
@media (max-width: 900px) {
  .site-bar--mobile { display: block; position: fixed; z-index: 75; }
  body .site-header { display: none; }
  .site-bar--mobile ~ main { transform: translateY(var(--menu-push)); }
  .site-bar--mobile ~ .visual-nav--fixed { top: calc(var(--visual-nav-dock-top) + var(--menu-push)); }
}