/* The bar is never boxed. Over the first screen it is white type on the scene, set to the scene's margins. Past it the row draws in to the page's own column, turns to ink, and the page dissolves under it. */
.nav { position: fixed; z-index: 30; inset: 0 0 auto; color: var(--ink); transition: color 0.5s ease; }
.nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -28px;
  background: linear-gradient(rgb(255 255 255 / 0.96) 52%, rgb(255 255 255 / 0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, #0000);
  mask-image: linear-gradient(#000 55%, #0000);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: calc(var(--wrap) + 2 * var(--gut)); height: 68px; margin-inline: auto; padding-inline: var(--gut); transition: max-width 0.9s var(--ease), height 0.9s var(--ease), padding 0.9s var(--ease); }

.nav[data-over] { color: #fff; }
.nav[data-over]::before { opacity: 0; }
/* The scene is inset 10px from the window; the row keeps to the scene's own margins so the mark lines up with the headline. */
.nav[data-over] .nav-in { max-width: 100vw; height: 100px; padding-inline: calc(10px + clamp(18px, 3.4vw, 52px)); }

.brand { display: flex; align-items: center; justify-self: start; gap: 9px; color: inherit; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; text-decoration: none; white-space: nowrap; }
/* The mark's artwork sits low in its box; this seats it on the wordmark's centre line. */
.brand img { width: 24px; height: 24px; translate: 0 -1.5px; }
.brand b { color: var(--blue); font-weight: inherit; transition: color 0.5s ease; }
.nav[data-over] .brand b { color: inherit; }

.nav-links { display: flex; gap: clamp(20px, 2.4vw, 36px); }
.nav-end { display: flex; align-items: center; justify-self: end; gap: clamp(16px, 1.8vw, 26px); }
.nav-links a, .nav-quiet { color: inherit; font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: 0.8; transition: opacity 0.2s; }
.nav-links a:hover, .nav-quiet:hover { opacity: 1; }
.nav-cta { display: inline-flex; align-items: center; height: 40px; padding-inline: 18px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.4s, color 0.4s; }
.nav-cta:hover { background: var(--ink); }
.nav[data-over] .nav-cta { background: #fff; color: var(--ink); }
.nav[data-over] .nav-cta:hover { background: var(--blue); color: #fff; }
.nav-menu { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: inherit; font-size: 1.375rem; }

.menu { inset: 70px 10px auto; width: auto; margin: 0; padding: 10px; border: 0; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--float); color: var(--ink); }
.menu a { display: block; padding: 14px 16px; border-radius: 16px; font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
.menu a:hover { background: var(--tint); }

@media (max-width: 900px) {
  .nav-in { grid-template-columns: 1fr auto; height: 60px; padding-inline: var(--gut) 8px; }
  .nav[data-over] .nav-in { height: 88px; padding-inline: 28px 18px; }
  .nav-links, .nav-quiet:not(.nav-lang) { display: none; }
  .nav-end { gap: 2px; }
  .nav-lang { padding: 10px 8px; font-size: 0; opacity: 1; }
  .nav-lang::after { content: attr(data-short); font-size: 0.9375rem; }
  .nav-cta { padding-inline: 15px; }
  .brand { font-size: 1.0625rem; }
  .nav-menu { display: grid; }
}