/* =============================================================================
   PAGONI — CHROME
   The wordmark, nav and primary action. Fixed, not absolute: this is the site's
   furniture and it outlives every block it floats over.
   ============================================================================= */

.chrome {
  position: fixed;
  inset: var(--raw-spacing-page) var(--raw-spacing-page) auto;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--raw-spacing-md);
  pointer-events: none;        /* the gap between items must not eat clicks */
}
.chrome > * { pointer-events: auto; }

.chrome__wordmark {
  display: block;
  width: 13rem;
  color: var(--foreground);
  transition: opacity var(--raw-duration-fast) var(--raw-ease-entrance);
}
.chrome__wordmark:hover { opacity: 0.82; }

.brand-logo {
  /* The lockup keeps the traced logo's proportions (688 x 268 units) and scales
     with whatever width its container gives it. */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 688 / 268;
  container-type: inline-size;
}
.brand-logo__mark {
  position: absolute;
  left: calc(16 / 688 * 100cqw);
  top: calc(16 / 688 * 100cqw);
  width: calc(272 / 688 * 100cqw);
  height: auto;
}
/* Cormorant SemiBold at the size whose width matches the traced lettering,
   its baseline where the lettering's sat (0.835em below the line box top). */
.brand-logo__word {
  position: absolute;
  left: calc(316 / 688 * 100cqw);
  top: calc(219 / 688 * 100cqw - 0.835em);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: calc(126 / 688 * 100cqw);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--brand-wordmark);
}

.chrome__nav { grid-column: 3; }
/* 2.5rem was right for three links. With five the row runs into the wordmark
   on a 1280 laptop, so the gutter is a clamp: generous where there is room,
   tight where there is not. */
.chrome__navList { display: flex; gap: clamp(1.25rem, 2.2vw, 2.5rem); }
.chrome__navLink {
  position: relative;
  color: var(--foreground-muted);
  text-transform: uppercase;
  transition: color var(--raw-duration-fast) var(--raw-ease-entrance);
}
.chrome__navLink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.375rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--raw-duration-normal) var(--raw-ease-entrance);
}
.chrome__navLink:hover { color: var(--foreground); }
.chrome__navLink:hover::after { transform: scaleX(1); }

.chrome__action {
  grid-column: 4;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: var(--raw-radius-pill);
  border: 1px solid var(--border-signal);
  color: var(--foreground-signal);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--raw-duration-normal) var(--raw-ease-entrance),
    color var(--raw-duration-normal) var(--raw-ease-entrance);
}
.chrome__action:hover {
  background: var(--foreground-signal);
  color: var(--raw-void-950);
}

.chrome__toggle { display: none; }

/* When the page is over the one bright block, the chrome inverts to ink. It is
   the only element on the site that has to survive both grounds.

   Done by REDEFINING THE TOKENS rather than by overriding each child's colour.
   Every rule above already reads the semantic layer, so they all flip at once
   and a new child added later inherits the behaviour for free — which is the
   entire reason the token system has two layers. */
.chrome.is-inverted {
  --foreground:        var(--raw-deepink-900);
  --foreground-strong: var(--raw-deepink-a60);
  --foreground-muted:  var(--raw-deepink-a60);
  --foreground-faint:  var(--raw-deepink-a38);
  --foreground-signal: var(--raw-deepink-900);
  --border-signal:     rgb(6 35 29 / 0.28);
  --border-hairline:   rgb(6 35 29 / 0.22);
}
.chrome.is-inverted .chrome__action:hover {
  background: var(--raw-deepink-900);
  color: var(--raw-ink-050);
}

/* Both states cross-fade rather than switching, so passing the boundary reads
   as the light changing rather than as the header being replaced. */
.chrome__wordmark,
.chrome__navLink,
.chrome__action,
.chrome__toggle {
  transition:
    color var(--raw-duration-slow) var(--raw-ease-entrance),
    border-color var(--raw-duration-slow) var(--raw-ease-entrance),
    background-color var(--raw-duration-normal) var(--raw-ease-entrance),
    opacity var(--raw-duration-fast) var(--raw-ease-entrance);
}

/* -----------------------------------------------------------------------------
   BELOW 1024 — a disclosure, not a drawer
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .chrome { grid-template-columns: 1fr auto; }
  .chrome__wordmark { width: 10rem; }

  .chrome__toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--raw-radius-pill);
    border: 1px solid var(--border-hairline);
    color: var(--foreground);
    text-transform: uppercase;
  }

  .chrome__action { display: none; }

  .chrome__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
      max-height var(--raw-duration-slow) var(--raw-ease-entrance),
      opacity var(--raw-duration-normal) var(--raw-ease-entrance);
  }
  .chrome__navList {
    flex-direction: column;
    gap: var(--raw-spacing-md);
    padding-top: var(--raw-spacing-lg);
  }
  .chrome__navLink { font-size: var(--raw-text-lead); letter-spacing: 0; }

  .has-menu-open .chrome__nav { max-height: 60vh; opacity: 1; }
  .has-menu-open .chrome {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--rounding-card);
    padding: var(--raw-spacing-md);
    inset-inline: var(--raw-spacing-sm);
  }
}