nav {
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 25px; }
.nav-links a,
.nav-soon {
  font-size: var(--text-ui);
  line-height: var(--text-ui-lh);
  color: var(--muted);
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a.current { color: var(--ink); }
.nav-soon { display: inline-flex; align-items: center; gap: 4px; cursor: default; user-select: none; }

.nav-side { display: flex; align-items: center; gap: 22px; }

/* EN / PL — the active one in ink, the other muted, a hairline between. */
.lang { display: flex; align-items: center; gap: 0; font-size: 12px; line-height: 1.6; }
.lang button {
  padding: 2px 6px;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0;
  transition: color 0.25s ease;
}
.lang button + button { border-left: 1px solid var(--stroke); }
.lang button[aria-pressed="true"] { color: var(--ink); }
.lang button:hover { color: var(--ink); }

/* --------------------------------------------------------- floats on scroll-up
   The nav lifts out and floats as a white pill; shows going up, hides going
   down. .col gets its height back so the page doesn't jolt. */
nav.floating {
  position: fixed;
  top: 30px; left: 50%;
  z-index: 30;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 13px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(10, 10, 10, 0.05);
  background: var(--white);
  transform: translate(-50%, 0);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}
nav.floating.hide { opacity: 0; pointer-events: none; transform: translate(-50%, -18px); }
.col.reserve { padding-top: 64px; }

/* ------------------------------------------------------------ mobile menu */
.nav-toggle { display: none; width: 18px; height: 18px; color: var(--ink); }
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .close { display: none; }

@media (max-width: 1100px) { nav { padding-top: 41px; } }

@media (max-width: 640px) {
  nav { padding-top: 37px; position: relative; }
  .nav-toggle { display: block; }
  nav[data-open="true"] { z-index: 61; }
  nav[data-open="true"] .nav-toggle .menu { display: none; }
  nav[data-open="true"] .nav-toggle .close { display: block; }
  .nav-side { gap: 18px; }

  .nav-links {
    position: fixed;
    inset: 62px 0 0 0;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    padding: 37px max(25px, calc((100vw - var(--col)) / 2)) 40px;
    background: var(--bg);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.3s;
  }
  nav[data-open="true"] .nav-links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s;
  }
  nav[data-open="true"] .nav-links a,
  nav[data-open="true"] .nav-soon { color: var(--ink); }
  body[data-nav="open"] { overflow: hidden; }

  /* Floating: the menu hangs off the pill as a dropdown, not a sheet. */
  nav.floating .nav-links {
    position: absolute;
    inset: auto auto auto 0;
    top: calc(100% + 10px);
    width: max-content; min-width: 100%;
    background: var(--white);
    border: 1px solid rgba(10, 10, 10, 0.06);
    border-radius: var(--r-inner);
    padding: 25px; gap: 27px;
  }
}