/**
 * Site header: slate masthead over a sticky navigation bar.
 *
 * Both bands are full-bleed with the content held to the container, which is
 * how the 2016 site was built (the bands ran to the viewport edge at 1440;
 * only the inner column was fixed). Nothing here is fixed-position: the
 * masthead scrolls away and only the bar pins, so the sticky chrome costs
 * 46px rather than 118px.
 */

.site-header { position: relative; z-index: var(--z-header); }

/* ---- Masthead ---------------------------------------------------------- */
.site-header__masthead {
  background: var(--chrome-masthead);
  color: var(--c-white);
}
.site-header__masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* ---- Brand ------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  text-decoration: none;
  color: inherit;
  margin-inline-end: auto;
  flex: none;
}
.brand__text { display: grid; gap: 0.2rem; }
.brand__name {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__slogan {
  font-size: var(--fs-2xs);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--c-gold);
}
/* Below the desktop breakpoint the masthead carries the brand, the language
   switcher and the menu toggle in one row, which does not fit a phone at the
   brand's natural width. `flex: none` above stops it shrinking, so it has to
   be relaxed here — otherwise the toggle is pushed past the container's
   padding and clipped at the viewport edge. */
@media (max-width: 63.99em) {
  .site-header__masthead-inner { gap: var(--s-3); }
  .brand { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 30em) {
  .brand__name { font-size: 0.875rem; letter-spacing: 0.03em; white-space: normal; }
  .brand__slogan { display: none; }
  .brand { gap: var(--s-2); }
  .brand .monogram { height: 30px; width: auto; }
}

/* The monogram is drawn in currentColor; on the slate ground it wants to be
   the gold accent rather than plain white, as it was in the original. */
.brand .monogram { color: var(--c-gold); flex: none; }

/* ---- Utility (language switcher) --------------------------------------- */
.site-header__utility { display: flex; align-items: center; gap: var(--s-4); }

/* ---- Toggle ------------------------------------------------------------ */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--c-white);
}
.nav-toggle__bars { display: grid; gap: 5px; width: 17px; }
.nav-toggle__bars span {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---- Navigation bar ---------------------------------------------------- */
.site-header__bar {
  background: var(--chrome-nav);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-menu);
}
.site-header__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--nav-h);
}

/* A hairline once the bar has left its resting position, so it reads as
   floating over the content rather than merged into it. */
.site-header.is-stuck .site-header__bar {
  box-shadow: 0 1px 12px -4px rgb(29 42 56 / 0.4);
}

/* ---- Desktop ----------------------------------------------------------- */
@media (min-width: 64em) {
  .nav-toggle { display: none; }
}

/* ---- Mobile panel ------------------------------------------------------ */
@media (max-width: 63.99em) {
  .site-header__utility { margin-inline-start: auto; }

  .site-header__bar {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: var(--chrome-nav);
    padding: var(--s-5) 0 var(--s-8);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
  }
  .site-header__bar.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  .site-header__bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
  }
}