.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--on-dark);
  transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}

/* Solid from the first scroll (js/topbar.js): paper, or dark teal over the
   dark sections and the hero. */
.topbar.is-solid {
  background: rgba(245, 243, 236, 0.9);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule-light);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.topbar.is-solid.is-dark {
  background: rgba(8, 43, 43, 0.86);
  color: var(--on-dark);
  box-shadow: 0 1px 0 var(--rule-dark);
}

/* The production site's logo, mark and lettering, as a mask filled with the
   text colour: light on the dark bar and the footer, ink on the paper bar.
   Box ratio from img/flowalto-logo.png, 492:87. */
.wordmark {
  display: block;
  height: 26px;
  aspect-ratio: 492 / 87;
  background: currentColor;
  -webkit-mask: url("../img/flowalto-logo.png") center / contain no-repeat;
  mask: url("../img/flowalto-logo.png") center / contain no-repeat;
}

/* The bar's one action. Outlined, so the hero's amber button stays the loud
   one; on hover the hero button's lit amber slides in across it on the
   house slant. */
.topbar__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.15rem;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color var(--calm) var(--ease),
    color var(--calm) var(--ease);
}

/* Wider than the button, so its slanted ends clear the corners. */
.topbar__cta::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  background: linear-gradient(180deg, #f4bd5f, var(--amber) 72%);
  transform: skewX(-13deg) translateX(-101%);
  transition: transform var(--calm) var(--ease);
}

.topbar__cta:hover {
  border-color: var(--amber);
  color: var(--night);
}

.topbar__cta:hover::before {
  transform: skewX(-13deg) translateX(0);
}

@media (max-width: 767px) {
  .wordmark {
    height: 22px;
  }
  .topbar__cta {
    height: 2.25rem;
    padding: 0 0.95rem;
    font-size: 0.84rem;
  }
}