/* ==========================================================================
   Header — fixed. Only the logo swaps to the dark version over light
   sections (header.js toggles .is-light on .site-header). Pill nav and the
   social pill carry their own dark backgrounds, so they never change.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: var(--header-top) 0 auto 0;
  z-index: 50;
  pointer-events: none;                 /* only the real controls catch clicks */
}
.site-header > * { pointer-events: auto; }
/* Phone: header.js fades the header out after two screens of downward scroll */
.site-header { transition: opacity 0.35s var(--ease), visibility 0.35s; }
.site-header.is-hidden { opacity: 0; visibility: hidden; }

/* Logo — 194x40 svg, sits at the left gutter */
.logo {
  position: absolute;
  left: var(--gutter);
  top: 0;
  width: 194px;
  height: 40px;
}
.logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s var(--ease);
}
.logo__dark { opacity: 0; }
.site-header.is-light .logo__dark { opacity: 1; }
.site-header.is-light .logo__light { opacity: 0; }

/* Desktop pill nav */
.nav {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 13px 30px;
  background: var(--c-nav-bg);
  border: 1px solid var(--c-white-20);
  border-radius: var(--r-pill);
  font-size: 15px;
  line-height: normal;
  color: var(--c-white);
  white-space: nowrap;
}
.nav a {
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--c-white-70); }
.nav a.is-active { color: var(--c-white-50); }

/* Social pill (Instagram + YouTube) — right gutter */
.social {
  position: absolute;
  right: var(--gutter);
  top: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 45px;
  padding: 0 20px;
  background: var(--c-nav-bg);
  border: 1px solid var(--c-white-20);
  border-radius: var(--r-pill);
}
.social a {
  display: block;
  opacity: 1;
  transition: opacity 0.2s var(--ease);
}
.social img { height: 16px; width: auto; }
/* 70% on hover-capable devices, 100% on hover; touch devices stay at 100% */
@media (hover: hover) {
  .social a { opacity: 0.7; }
  .social a:hover { opacity: 1; }
}

/* Mobile hamburger pill (90x40) */
.menu-btn {
  position: absolute;
  right: var(--gutter);
  top: 0;
  display: none;
  width: 90px;
  height: 40px;
}
.menu-btn img { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Mobile overlay menu — opens/closes instantly (no animation, by design)
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: var(--c-white);
  color: var(--c-text);
  overflow-y: auto;
}
.menu.is-open { display: block; }

.menu__logo {
  position: absolute;
  left: var(--gutter);
  top: var(--header-top);
  width: 194px;
  height: 40px;
}
.menu__close {
  position: absolute;
  right: var(--gutter);
  top: var(--header-top);
  width: 90px;
  height: 40px;
}
.menu__close img { width: 100%; height: 100%; }

.menu__inner {
  min-height: 100dvh;
  padding-top: 80px;                   /* header zone (40 top + 40 logo) */
  display: flex;
  flex-direction: column;
  justify-content: center;             /* links + social centred in the remaining area */
  align-items: center;
}
.menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  font-size: 30px;
  line-height: 1;
  font-weight: 300;
}
.menu__links a.is-active { color: #9b9b9b; }

.menu__social {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: max-content;
  margin: 60px auto 0;
  padding: 0 20px;
  height: 45px;
  align-items: center;
  background: var(--c-nav-bg);
  border-radius: var(--r-pill);
}
.menu__social img { height: 16px; width: auto; }

/* --------------------------------------------------------------------------
   Below 1024: mobile header (logo + hamburger), pill nav and social hidden
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav,
  .social { display: none; }
  .menu-btn { display: block; }
}