/* ============================================================================
   nav.css — the one navigation bar, shared by the film and the document floor.

   It runs on --nb-* tokens. The interior pages get those from authority.css;
   the home page aliases them to its own --sc-* tokens, so the bar is literally
   the same component in both places and cannot drift.

   No JavaScript. The services menu opens on hover and on focus-within; the
   phone panel is a <details>, so it works with scripting off and is operable
   from the keyboard either way.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  /* explicit rgba rather than color-mix: the contrast verifier reads this
     value directly, and it should read the real one */
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--nb-hairline);
}
/* the film wants the bar floating over it, outside the engine's layout */
.nav--fixed { position: fixed; inset: 0 0 auto 0; }

.nav__in {
  width: 100%;
  max-width: var(--nb-maxw, 72rem);
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: 4.25rem;
}

/* ------------------------------------------------------------- wordmark -- */
/* The wordmark is a token slot: "Bob's Detail" and a sixty-three character
   name are the same string. Left at flex: none it pushed the menu, the phone
   and the CTA off the right edge of a 1440 viewport and off a phone entirely.
   It shrinks now, and past its cap it truncates rather than wrapping: the bar
   is one line tall and the full name is in the footer, the colophon and the
   page title. */
.nav__mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; white-space: nowrap;
  flex: 0 0 auto; min-width: 0; max-width: min(46ch, 40vw);
}
@media (max-width: 900px) { .nav__mark { max-width: min(30ch, 62vw); } }
/* the lamp, at 1:8 scale — the same mark as the sign lockup and the favicon */
.nav__mark::before {
  content: ""; width: 1.4rem; height: 3px; flex: none;
  background: var(--nb-accent);
  transition: width 200ms var(--nb-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.nav__mark:hover::before { width: 2rem; }
.nav__mark span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--nb-font-display); font-weight: 600;
  font-size: 0.9375rem;
  color: var(--nb-ink);
}

/* ---------------------------------------------------------------- links -- */
/* min-width: 0 alone lets the list shrink but not its children, so the last
   items slid under the phone number instead of being cut. The list clips.
   Nothing in it is unreachable: every destination is also in the footer, the
   colophon and the mobile panel. */
.nav__list {
  display: flex; align-items: center;
  flex: 0 1 auto; min-width: 0;
  /* clipping mid-word reads as a bug ("ABOL"), so the row scrolls instead and
     fades at the cut. Nothing becomes unreachable: tabbing scrolls it into
     view, and every destination is also in the footer and the mobile panel. */
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  gap: clamp(1rem, 2.2vw, 1.9rem);
  list-style: none; margin: 0 auto 0 clamp(0.5rem, 2vw, 1.5rem);
  /* the fade is a scroll cut, so it has to sit over empty space rather than
     over the last item. This padding is the fade's own width: at desktop the
     row does not overflow and "More" ends before it, and when the row does
     scroll the padding travels to the end with the content. */
  padding: 0 2.5rem 0 0;
}
/* Above this width the row fits, so the scroll cut is not just unnecessary,
   it fades the last item for no reason. Drop the whole affordance and its
   reserved padding, and the row is an ordinary static list again. */
@media (min-width: 1180px) {
  .nav__list {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding-right: 0;
  }
}
.nav__list > li { margin: 0; max-width: none; }

.nav__link {
  position: relative; display: inline-block;
  padding-block: 1.5rem;
  font-family: var(--nb-font-text);
  font-size: 0.9375rem;
  color: var(--nb-ink-soft); text-decoration: none; white-space: nowrap;
  transition: color 160ms var(--nb-ease-out, ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1.15rem;
  height: 1px; background: var(--nb-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--nb-ease-out, ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--nb-ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--nb-ink); }
.nav__link[aria-current]::after { transform: scaleX(1); }
.nav__caret {
  /* explicit: the film's stylesheet sets svg { display: block }, which would
     otherwise drop the chevron onto its own line */
  display: inline-block;
  width: 0.58em; height: 0.4em; margin-left: 0.45em; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--nb-ease-out, ease-out);
}
.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret { transform: rotate(180deg); }

/* ------------------------------------------------------------- services -- */
.nav__group { position: relative; }
.nav__menu {
  position: absolute; top: 100%; left: -0.9rem; min-width: 21rem;
  margin: 0; padding: 0.4rem; list-style: none;
  background: var(--nb-plate, #141416);
  border: 1px solid var(--nb-hairline);
  box-shadow: var(--nb-edge), var(--nb-e2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms var(--nb-ease-out, ease-out),
              transform 150ms var(--nb-ease-out, ease-out),
              visibility 150ms;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu li { margin: 0; max-width: none; }
.nav__menu a {
  display: block; padding: 0.7rem 0.85rem; text-decoration: none;
  color: var(--nb-ink); font-size: 0.92rem; line-height: 1.3;
  border-left: 2px solid transparent;
}
.nav__menu a small {
  display: block; margin-top: 0.2rem;
  font-size: 0.9375rem; color: var(--nb-ink-soft); letter-spacing: 0;
}
.nav__menu a:hover,
.nav__menu a:focus-visible {
  background: rgba(168, 135, 63, 0.10);
  border-left-color: var(--nb-accent);
  color: var(--nb-ink);
}
.nav__menu a[aria-current] { border-left-color: var(--nb-accent); color: var(--nb-accent); }

/* ----------------------------------------------------------- right side -- */
.nav__right { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.4rem); flex: none; }
.nav__tel {
  font-size: 0.9375rem; color: var(--nb-ink-soft);
  text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 160ms var(--nb-ease-out, ease-out);
}
.nav__tel:hover { color: var(--nb-ink); }
.nav__cta {
  font-family: var(--nb-font-text);
  font-size: 0.9375rem;
  background: var(--nb-accent); color: var(--nb-accent-ink, #0B0B0C);
  border: 1px solid var(--nb-accent);
  padding: 0.7rem 1.15rem; text-decoration: none; white-space: nowrap;
  transition: background 160ms var(--nb-ease-out, ease-out),
              border-color 160ms var(--nb-ease-out, ease-out),
              color 160ms var(--nb-ease-out, ease-out);
}
.nav__cta:hover { background: var(--nb-ink); border-color: var(--nb-ink); color: var(--nb-canvas, #0B0B0C); }

/* ------------------------------------------- second tier: the collection --
   Home only. The index of panels that jumps into the rail — the film's own
   nav treatment, kept, now sitting under the site bar instead of replacing it. */
.nav__tier {
  border-top: 1px solid var(--nb-hairline);
  background: rgba(10, 9, 8, 0.55);
}
.nav__tier-in {
  width: 100%; max-width: var(--nb-maxw, 72rem); margin-inline: auto;
  padding: 0 var(--nb-gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 2.6rem;
}
.nav__tier-label {
  font-size: 0.9375rem;
  color: var(--nb-accent); white-space: nowrap;
}
.nav__tier-in button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--nb-font-text); font-size: 0.9375rem;
  color: var(--nb-ink-soft); padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--nb-ease-out, ease-out),
              border-color 160ms var(--nb-ease-out, ease-out);
}
.nav__tier-in button:hover { color: var(--nb-ink); border-bottom-color: var(--nb-accent); }
.nav__tier-in button:active { transform: translateY(1px); }

/* --------------------------------------------------------------- mobile -- */
.nav__more { display: none; margin-left: auto; flex: none; }
.nav__more > summary {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  list-style: none; padding: 0.6rem 0.2rem;
  font-size: 0.9375rem;
  color: var(--nb-ink);
}
.nav__more > summary::-webkit-details-marker { display: none; }
.nav__more > summary::after {
  content: ""; width: 1.05rem; height: 8px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}
.nav__more[open] > summary::after {
  border-bottom-color: transparent;
  height: 4px;
}
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  /* no backdrop-filter here: nesting one inside the bar's own makes Chrome
     composite this panel translucently and the page reads through it */
  background: #0B0B0C;
  border-bottom: 1px solid var(--nb-hairline);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  padding: var(--nb-4, 1rem) var(--nb-gutter) var(--nb-6, 2rem);
  max-height: calc(100vh - 4.25rem); overflow-y: auto;
}
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel li { margin: 0; max-width: none; }
.nav__panel a {
  display: block; padding: 0.85rem 0; text-decoration: none;
  color: var(--nb-ink); font-size: 0.95rem;
  border-bottom: 1px solid var(--nb-hairline);
}
.nav__panel a[aria-current] { color: var(--nb-accent); }
.nav__panel .nav__panel-sub a {
  padding-left: 1rem; font-size: 0.9375rem; color: var(--nb-ink-soft);
}
.nav__panel .nav__panel-sub a:hover { color: var(--nb-ink); }
.nav__panel .nav__panel-sub a[aria-current] { color: var(--nb-accent); }
.nav__panel-head {
  font-size: 0.9375rem;
  color: var(--nb-accent); margin: var(--nb-5, 1.5rem) 0 var(--nb-2, 0.5rem);
}
.nav__panel .nav__cta { display: block; text-align: center; margin-bottom: var(--nb-5, 1.5rem); }
.nav__panel .nav__tel { display: block; padding: 0.85rem 0; font-size: 0.95rem; }

@media (max-width: 1080px) {
  .nav__list { gap: 1.1rem; }
  .nav__link { font-size: 0.9375rem; }
  .nav__tel { display: none; }
}
@media (max-width: 900px) {
  .nav__list, .nav__right { display: none; }
  .nav__more { display: block; }
  .nav__tier { display: none; }
  .nav__in { min-height: 3.75rem; }
  .nav__panel { max-height: calc(100vh - 3.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .nav__menu, .nav__mark::before, .nav__cta, .nav__tel, .nav__link { transition: none; }
}
@media print { .nav { display: none !important; } }

/* a name with no spaces long enough to widen its column breaks instead */
.ft__word, .colophon .plate__id { overflow-wrap: anywhere; }

.nav__list::-webkit-scrollbar { display: none; }

/* On a narrow phone the wordmark was the element that gave way, so the brand
   name itself rendered as "GLOB…". The name is the one thing in the bar that
   must never be abbreviated; the button beside it can lose a few pixels of
   padding instead. */
@media (max-width: 460px) {
  .nav__mark span { overflow: visible; text-overflow: clip; font-size: 0.8125rem;
    letter-spacing: 0.04em; flex: 0 0 auto; min-width: max-content; }
  /* The name holds its width, so the row gives way somewhere it can afford to. */
  .nav__cta { min-width: 0; padding-inline: 0.6rem; font-size: 0.75rem; }
  .nav__cta-long { display: none; }
  /* The crest and the rule beside it are the two pieces that can lose size
     without losing meaning. */
  .nav__mark img, .nav__mark svg { width: 22px; height: auto; }
  .nav__rule, .nav__mark::before { display: none; }
}
@media (max-width: 379px) {
  .nav__mark { gap: 0.5rem; }
}