/* ==========================================================================
   nav.css — GLOBAL navigation. Loaded from base.html on EVERY page.
   Do NOT put nav styles in hero.css or any section file.

   The nav starts hidden (opacity 0) and is revealed by reveal.js adding the
   `.shown` class after the unveil. During the first-visit ceremony the fade is
   delayed to 1.6s (matches preview); return visits show it promptly.
   ========================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
  opacity: 0;
  border-bottom: 1px solid transparent;
  transition:
    opacity 0.4s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    padding 0.4s ease;
}

/* revealed */
.site-nav.shown {
  opacity: 1;
}
/* during the ceremony, hold the nav back until the eyes have adjusted */
body.reveal-go .site-nav.shown {
  transition:
    opacity 0.6s ease 1.6s,
    background-color 0.4s ease,
    border-color 0.4s ease,
    padding 0.4s ease;
}

/* condensed/scrolled state — backdrop appears once you leave the top */
.site-nav.stuck {
  background: rgba(12, 11, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--veil);
}

.site-nav__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---- brand lockup: moth mark + "Blindfold." + support line ---------- */
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bone);
}
.site-nav__brand .brand-mark {
  width: 32px;
  height: 32px;
  flex: none;
  overflow: visible;   /* don't clip the antennae / glow */
  /* optical nudge: the mark centers against the name+tag column, which sits a
     hair low vs the wordmark cap-height — lift it ~2px to align (visual only). */
  transform: translateY(-2px);
}
.site-nav__wm {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.site-nav__name {
  font-family: var(--font-display);
  font-weight: 300;
  /* "Blindfold Tattoos." is wider than the old "Blindfold." — scale the wordmark
     down on narrower viewports so it never crowds the links/hamburger/BOOK, and
     keep it on ONE line. Full 1.5rem on desktop (≥~1100px); eases to a 1.05rem
     floor on phones. */
  font-size: clamp(1.05rem, 0.5rem + 1.45vw, 1.5rem);
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.site-nav__name .dot {
  color: var(--grace);
  font-weight: 300;
}
.site-nav__tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-top: 0.45em;
}
/* smallest screens: drop the support line, keep moth + "Blindfold." */
@media (max-width: 26rem) {
  .site-nav__tag {
    display: none;
  }
}

/* ---- links ----------------------------------------------------------- */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.site-nav__link {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  transition: color 200ms ease;
}
.site-nav__link:hover {
  color: var(--grace);
}
/* active page link */
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] {
  color: var(--grace);
}

/* ---- content pages (no ceremony): nav is visible + backdropped, no JS ---- */
.page--static .site-nav {
  opacity: 1;
  background: rgba(12, 11, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--veil);
}

/* ---- nav booking CTA: full label on desktop, short on small screens --- */
.site-nav__links .btn {
  white-space: nowrap;   /* never wrap to two lines */
}
.site-nav__links .cta-short {
  display: none;
}

/* ---- mobile menu trigger (hamburger) -------------------------------- */
/* Hidden by default; revealed ONLY at the mobile breakpoint AND when JS ran
   (html.js, added by nav-menu.js) — so without JS it's never a dead control. */
.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bone);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover {
  color: var(--grace);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle__bars {
  position: relative;
}
.nav-toggle__bars::before {
  position: absolute;
  left: 0;
  top: -7px;
}
.nav-toggle__bars::after {
  position: absolute;
  left: 0;
  top: 7px;
}

/* ---- responsive: collapse text links on small screens --------------- */
@media (max-width: 48rem) {
  .site-nav__links {
    gap: 0.75rem;
  }
  /* inline section links collapse into the overlay menu */
  .site-nav__link {
    display: none;
  }
  /* shorten the CTA so it stops wrapping at narrow widths */
  .site-nav__links .cta-full {
    display: none;
  }
  .site-nav__links .cta-short {
    display: inline;
  }
  /* show the hamburger only when JS is present */
  html.js .nav-toggle {
    display: inline-flex;
  }
}

/* ==========================================================================
   MOBILE MENU OVERLAY — full-screen ink panel, moth + links rise from black.
   ========================================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;          /* above the nav (80); veil is gone by the time this opens */
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 8vw, 3rem);
  background: var(--ink);
  overflow-y: auto;                 /* the overlay itself scrolls if tall */
  overscroll-behavior: contain;     /* scroll-chaining can't reach the page behind */
  /* hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-unveil), visibility 0s linear 0.5s;
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s var(--ease-unveil), visibility 0s;
}
.nav-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 4vw, 1.8rem);
  text-align: center;
  /* rise-in */
  transform: translateY(1.5rem);
  transition: transform 0.6s var(--ease-unveil);
}
.nav-overlay.is-open .nav-overlay__inner {
  transform: translateY(0);
}
.nav-overlay__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: clamp(1rem, 5vw, 1.6rem);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bone-dim);
  transition: color 200ms ease;
}
.nav-overlay__close:hover {
  color: var(--grace);
}
.nav-overlay__home {
  display: inline-flex;
  margin-bottom: 0.4rem;
}
.nav-overlay__mark {
  width: clamp(64px, 18vw, 88px);
  height: auto;
  overflow: visible;
}
.nav-overlay__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 3vw, 1.2rem);
}
.nav-overlay__link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
  padding: 0.2em 0.5em;        /* comfortable tap target */
  transition: color 200ms ease;
}
.nav-overlay__link:hover {
  color: var(--grace);
}
.nav-overlay__link.is-active,
.nav-overlay__link[aria-current="page"] {
  color: var(--grace);
}
.nav-overlay__book {
  margin-top: 0.6rem;
}

/* body scroll-lock while the overlay is open (independent of body.sealed).
   position:fixed is the primary, iOS-robust mechanism; nav-menu.js sets the
   inline `top` (captured scroll offset) and restores scroll on close. */
body.menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;   /* belt-and-suspenders */
}

/* reduced motion: instant, no transform */
@media (prefers-reduced-motion: reduce) {
  .nav-overlay {
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav-overlay.is-open {
    transition: opacity 0.2s ease, visibility 0s;
  }
  .nav-overlay__inner {
    transform: none;
    transition: none;
  }
}