/* ============================================
   header — Figma mobile 4:27 (DRAWN @390); desktop INVENTED (`inline-row`, logo-only — BA-NAV-1)
   Transparent bar over the hero photo (the hero owns the bg, extended up by --header-h).
   Geometry = fixed bar height + centred logo, NOT padding (D-HDR-1).
   No padding shorthand here — .container / .container--full own padding-inline.
============================================ */

.header {
  /* Logo height — header-scoped (not in tokens.css). 32 DRAWN; held to 1440, 42.67 @1920 INVENTED (BA-HDR-3) */
  --header-logo-h: 32px;

  box-sizing: border-box;
  height: var(--header-h);            /* 64 @390 · 69.66 @768 · 76.03 @1023/1024 · 80 @1440 (INVENTED) · 106.67 @1920 */
  display: flex;
  flex-direction: row;
  align-items: center;                /* centres the 32 logo in (64 − 1.5) → top 15.25 @390, as drawn */
  justify-content: flex-start;        /* Figma SPACE_BETWEEN with one child = start */
  border-bottom: var(--border-header); /* 1.5px rgba(255,255,255,.08), INSIDE the bar height */
  position: relative;
  z-index: var(--z-header);           /* above the hero bg layer that extends up under the header */
  background: none;                   /* never a copy of the photo — the hero owns it (D-HDR-5) */
}

.header__logo {
  display: block;
  flex: none;
  transition: opacity 0.2s ease;
}

.header__logo:hover,
.header__logo:active {
  opacity: 0.8;                       /* BA-HDR-1 (not drawn) */
}

.header__logo:focus-visible {
  outline: 2px solid var(--color-white);   /* BA-HDR-1 — white focus ring on the dark photo */
  outline-offset: 4px;
}

.header__logo-img {
  /* SVG root has preserveAspectRatio="none" → set ONLY the height, width follows the 72.75/32 aspect */
  height: var(--header-logo-h);
  width: auto;
  max-width: none;
}

/* DESKTOP 1024+ (INVENTED) — logo holds 32 to 1440, scales to 42.67 @1920 (BA-HDR-3) */
@media (min-width: 1024px) {
  .header {
    --header-logo-h: clamp(32px, calc(32px * (var(--max-vw) / var(--vw-base))), 43px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__logo { transition: none; }
}