/* LaBara – prototype: design image as the page, real HTML menu on top.
   images/design-bg.png is 1920 × 9958 px. The menu reproduces the Figma menu (1002 × 80 px),
   placed at x 463 / y 26 of the design. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  background: #000;
  font-family: "Prompt", "Segoe UI", system-ui, sans-serif;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Page ----------
   Up to 1920 px viewport: the image fills the full width.
   Wider viewport: the image stays at its native 1920 px and is centered. */

.page {
  /* 1 design pixel, scales with the image width */
  --u: calc(100cqw / 1920);
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

.design {
  position: relative;
}

.design img {
  display: block;
  width: 100%;
  height: auto;
}

/* invisible anchor targets, positioned in design pixels relative to the image height */
.target {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top) / 9958 * 100%);
  height: calc(var(--h) / 9958 * 100%);
  pointer-events: none;
  /* header is not sticky, so no offset is needed */
  scroll-margin-top: 0;
}

/* ---------- Header / menu (overlays the hero) ---------- */

.site-header {
  position: absolute;
  z-index: 1;
  top: calc(26 * var(--u));
  left: calc(463 * var(--u));
  color: #fff;
}

.main-nav {
  position: relative;
  width: calc(1002 * var(--u));
  height: calc(80 * var(--u));
}

.brand {
  position: absolute;
  top: 0;
  left: calc(462 * var(--u));
  display: block;
}

.brand img {
  display: block;
  width: calc(107 * var(--u));
  height: auto;
}

.nav-list li {
  position: absolute;
  top: calc(var(--text-top) * var(--u));
  left: calc(var(--x) * var(--u));
}

.nav-list {
  /* top of the line box that puts the capitals at y 45–54 of the menu box */
  --text-top: 44;
}

.nav-list a {
  display: block;
  border-bottom: 1px solid transparent;
  color: inherit;
  font-size: calc(14 * var(--u));
  font-weight: 200;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s;
}

.nav-list a:hover {
  border-bottom-color: currentColor;
}

a:focus-visible {
  outline: 2px solid #36c3ce;
  outline-offset: 3px;
}

/* ---------- Small screens: menu becomes a readable bar above the image ---------- */

@media (max-width: 900px) {
  .site-header {
    position: static;
    padding: 14px 16px 10px;
    background: #0b1626;
  }

  .main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
  }

  .brand {
    position: static;
    order: -1;
  }

  .brand img {
    width: 80px;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
  }

  .nav-list li {
    position: static;
  }

  .nav-list a {
    padding-block: 6px;
    font-size: 14px;
  }
}