/*
 * What Crux's own site adds to the EMIAC page it is copied from: the brand in
 * the header and footer, "by EMIAC" drawn the way AirNote's site draws it, and
 * the Sign in button. Everything else is EMIAC's stylesheet unchanged.
 */

/* ---------- Brand: Crux, by EMIAC ---------- */

.crux-brand {
  color: var(--ink);
}

.crux-brand img {
  width: var(--mark-h, 24px);
  height: var(--mark-h, 24px);
}

.foot-logo.crux-brand {
  --mark-h: 36px;
}

.crux-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* The chip belongs to the name: 10px from it, not the bar's 36px gap. */
  margin-left: -26px;
  padding: 4px 9px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.crux-by span {
  color: var(--faint);
}

.crux-by img {
  width: auto;
  height: 12px;
}

/* The menu links carry 12px of padding; pull them in so the first word sits one
   bar-gap (36px) from the chip, the way EMIAC's menu sits from its name. */
.crux-by + .menu {
  margin-left: -12px;
}

.crux-by:hover {
  border-color: #cfd3d8;
  color: var(--ink);
}

.crux-foot-line {
  max-width: 260px;
  margin: 14px 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.crux-foot-line a {
  color: var(--ink);
}

@media (max-width: 960px) {
  .crux-by,
  .nav-signin {
    display: none;
  }

  /* EMIAC's mobile menu has one button, a filled one, so it writes every
     button's text in white. Sign in is the quiet one. */
  .mobile .btn-quiet {
    color: var(--ink);
  }

  .mobile .btn + .btn {
    margin-top: 10px;
  }
}