/* ==========================================================================
   Sticky top bar

   The hero's own nav scrolls away with the hero, which left the rest of the
   page — some 8,000px of it on a desktop and more on a phone — with no way to
   move between sections except scrolling. This is the bar that takes over.

   It is hidden while the hero's nav is still on screen, so the two are never
   both visible, and slides down once that nav has gone.

   js/topbar.js adds .is-stuck. Without JavaScript the bar stays hidden and the
   hero's nav is still there at the top of the page, which is where it was
   before this file existed.
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  gap: var(--space-38);
  padding: 14px var(--gutter);

  background: rgba(8, 6, 5, .86);
  border-bottom: 1px solid rgba(217, 169, 58, .16);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);

  /* Parked just above the viewport until it is wanted. visibility keeps it out
     of the tab order while it is parked; opacity alone would not. */
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform .34s var(--ease-out),
    opacity .28s ease,
    visibility 0s linear .34s;
}

.topbar.is-stuck {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    transform .34s var(--ease-out),
    opacity .28s ease,
    visibility 0s;
}

/* Anchor targets have to clear the bar. Without this every jump — from the
   bar's own links, from the mobile menu, from any #hash — lands with the
   section's first line tucked underneath it. */
section[id] { scroll-margin-top: 78px; }

@media (max-width: 900px) {
  section[id] { scroll-margin-top: 62px; }
}

/* --- Wordmark ------------------------------------------------------------- */

.topbar__mark {
  display: flex;
  /* Cap-centres — see the note on .hero__wordmark. */
  align-items: center;
  gap: 13px;
  flex: none;
}

.topbar__mark:hover { color: inherit; }

.topbar__mark-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .28em;
  color: var(--gold);
}

.topbar__mark-divider {
  width: 1px;
  height: 12px;
  background: rgba(217, 169, 58, .42);
}

.topbar__mark-sub {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(240, 233, 220, .72);
}

/* --- Links ---------------------------------------------------------------- */

.topbar__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.topbar__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-34);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__nav a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(240, 233, 220, .7);
  transition: color .25s ease;
}

.topbar__nav a:hover,
.topbar__nav a:focus-visible { color: var(--gold); }

/* --- Call to action ------------------------------------------------------- */

/* Smaller than the plate elsewhere on the page: this one has to live inside a
   58px bar. */
.topbar__cta {
  flex: none;
  box-shadow: none;
}

.topbar__cta .cta-plate__label {
  padding: 12px 24px;
  font-size: 10px;
  letter-spacing: .14em;
}

/* --- Responsive ----------------------------------------------------------- */

/* The toggle only ever shows here; the links only ever show above it. Matches
   the hero, which drops its own inline links at the same width. */
.topbar__toggle { display: none; }

@media (max-width: 900px) {
  .topbar {
    justify-content: space-between;
    gap: var(--space-16);
    padding: 10px var(--gutter);
  }

  .topbar__nav,
  .topbar__cta { display: none; }

  .has-menu .topbar__toggle { display: inline-flex; }

  /* Slimmer than the hero's, which sits in open space rather than a bar. */
  .topbar__toggle { padding: 10px 14px; }
}

@media (max-width: 1150px) {
  .topbar__nav ul { gap: var(--space-22); }
  .topbar { gap: var(--space-24); }
}

@media (max-width: 380px) {
  .topbar__mark-name { font-size: 15px; letter-spacing: .22em; }
  .topbar__mark-sub { font-size: 8px; letter-spacing: .13em; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar { transition: opacity .2s ease, visibility 0s linear .2s; }
  .topbar.is-stuck { transition: opacity .2s ease, visibility 0s; }
}