/* ---------- Site header: white bar while the page is still; while scrolling, no bar and lettering in the inverse greys of what is behind ---------- */
:root { --header-h: 72px; }   /* the opening video and the collection pages start below this */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--header-h);
  background: #fff; color: var(--header-link);
  font-family: "Open Sans", system-ui, sans-serif; font-weight: 400;
  transition: background-color .8s ease, color .8s ease;   /* slow fade back to white */
}
.site-header .inner { display: flex; align-items: center; height: 100%; padding: 0 84px 0 28px; }   /* title left, options between it and the cart */
.site-header .brand {
  flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: center;
  color: var(--header-title); text-transform: uppercase; transition: color .3s;
}
.site-header .brand b { display: block; font-weight: 400; font-size: 18px; line-height: 24px; }
.site-header .brand span { display: block; font-size: 11px; line-height: 15px; margin-top: -2px; }
.site-header nav { flex: 1; display: flex; justify-content: space-evenly; align-items: center; }
.site-header nav > [data-collection="home"] { display: none; }   /* off the wide header for now; still in the phone menu */
.site-header nav > button, .site-header .more > button {
  height: 50px; padding: 0 10px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13px; color: inherit; transition: color .2s;
}
.site-header nav button:hover, .site-header nav button:focus-visible { color: var(--header-hover); outline: none; }
.site-header nav > button[aria-pressed="true"] { color: var(--header-hover); }
.site-header .more li button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }   /* the tab whose paintings are showing */

/* "More" menu: opens on hover or keyboard focus */
.site-header .more { position: relative; }
.site-header .more ul {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 125px; margin: 0; padding: 0; list-style: none; background: var(--header-menu);
}
.site-header .more:hover ul, .site-header .more:focus-within ul { display: block; }
.site-header .more li button {
  width: 100%; height: 59px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: #fff;
}
.site-header .more li button:hover, .site-header .more li button:focus-visible { color: #fff; opacity: .7; outline: none; }

/* while scrolling: the bar and its own lettering fade away (still clickable) and the two copies from site-header.js fade in */
.site-header > * { transition: opacity .8s ease; }
.site-header.scrolled { background: transparent; transition-duration: .3s; }
.site-header.scrolled > * { opacity: 0; transition-duration: .3s; }
.site-header.ghost {
  background: none; pointer-events: none;
  animation: ghost-in .3s ease backwards; transition: opacity .8s ease, visibility 0s .8s;
}
.site-header.ghost.invert { mix-blend-mode: difference; }   /* white lettering: shows the inverse of the page behind it */
.site-header.ghost.grey { mix-blend-mode: saturation; }     /* colourless lettering on top: leaves only greys */
.site-header.ghost * { color: #fff !important; }
.site-header.ghost .cart .count { background: #fff; color: #000 !important; }
.site-header:not(.scrolled, .ghost) ~ .ghost { opacity: 0; visibility: hidden; }
@keyframes ghost-in { from { opacity: 0; } }

/* cart, top right: the cart rocks back and rolls forward once on hover or keyboard focus (uiux anim-icon shoppingCart, 1.2s) */
.site-header .cart {
  position: absolute; top: 14px; right: 28px; width: 44px; height: 44px; padding: 0; border: 0;
  background: none; color: inherit; cursor: pointer; transition: color .2s;
}
.site-header .cart:hover, .site-header .cart:focus-visible, .site-header .cart[aria-pressed="true"] { color: var(--header-hover); outline: none; }
.site-header .cart svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 40.625% 78.125%;   /* the rear wheel */
}
.site-header .cart:hover svg, .site-header .cart:focus-visible svg { animation: cart-roll 1.2s ease-in-out; }
@keyframes cart-roll {
  0%   { rotate: 0deg; translate: 0 0; }
  14%  { rotate: 2deg; translate: -4.7% 0; }
  33%  { rotate: -7deg; }
  39%  { translate: 9.4% 0; }
  53%  { rotate: 1.5deg; }
  61%  { translate: -1.6% 0; }
  69%  { rotate: 0deg; }
  78%, 100% { rotate: 0deg; translate: 0 0; }
}
.site-header .cart .count {
  position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--header-hover); color: #fff; font-size: 10px; line-height: 16px; text-shadow: none;
}
.site-header .cart .count:empty { display: none; }

.site-header .menu { display: contents; }   /* only a wrapper on wide screens */
.site-header .menu-toggle { display: none; }

/* phone: title bar with the menu button left and the cart right; every option sits in a menu that opens below */
@media (max-width: 900px) {
  :root { --header-h: 55px; }
  .site-header { height: auto; min-height: var(--header-h); padding-bottom: 10px; }
  .site-header .inner { display: block; height: auto; padding: 0; }
  .site-header .brand { display: block; margin: 8px auto 0; }
  .site-header nav > [data-collection="home"] { display: block; }
  .site-header .cart { top: 2px; right: 4px; }
  .site-header .menu-toggle {
    display: block; position: absolute; top: 2px; left: 4px; width: 44px; height: 44px; padding: 0; border: 0;
    background: none; color: inherit; cursor: pointer;
  }
  .site-header .menu-toggle span, .site-header .menu-toggle span::before, .site-header .menu-toggle span::after {
    content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; border-radius: 1px; background: currentColor;
    transition: transform .25s cubic-bezier(.45, 0, .1, 1), background-color .15s;
  }
  .site-header .menu-toggle span::before { left: 0; top: -7px; }
  .site-header .menu-toggle span::after { left: 0; top: 7px; }
  /* open: the middle line fades, the outer two meet in the middle and cross */
  .site-header .menu-toggle[aria-expanded="true"] span { background: transparent; }
  .site-header .menu-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

  .site-header .menu {   /* closed = zero height; the row height is what animates */
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .25s cubic-bezier(.45, 0, .1, 1), visibility 0s .25s;
  }
  .site-header .menu-toggle[aria-expanded="true"] + .menu { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .site-header nav { display: block; min-height: 0; overflow: hidden; }
  .site-header nav button, .site-header .more li button { width: 100%; height: 44px; padding: 0; font-size: 13px; color: inherit; }
  .site-header .more > button { display: none; }   /* its two options are listed with the rest */
  .site-header .more ul { display: block; position: static; transform: none; width: auto; background: none; }
}