/* Myriad Technologies — logo lockup
   The rule is the mark's baseline: it keeps the mark's weight (6/108 of the
   mark's height) and its 2.5/108 corner radius, and runs to the edge of
   whatever it belongs to. Set --mark-h and everything else follows. */

.myriad-lockup {
  --mark-h: 56px;
  position: relative;
  display: inline-flex;
  align-items: baseline;            /* the mark's bottom edge IS the text baseline */
  gap: calc(var(--mark-h) * 0.42);
  min-height: calc(var(--mark-h) * 1.11);
  color: #201e1d;
  text-decoration: none;
  font: 800 calc(var(--mark-h) * 0.3) / 1 "Archivo", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* stretch the rule across its container (site header, footer, signature) */
.myriad-lockup--full { display: flex; width: 100%; }

.myriad-lockup__mark {
  display: block;
  flex: none;
  height: var(--mark-h);
  width: auto;
}

.myriad-lockup__name { white-space: nowrap; }

.myriad-lockup::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mark-h) * 1.0463);        /* feet + 5/108 clearance */
  height: calc(var(--mark-h) * 0.0556);     /* 6/108 — the mark's own weight */
  border-radius: calc(var(--mark-h) * 0.0231);
  background: currentColor;
}

/* reversed */
.myriad-lockup--reversed { color: #f3f2f2; }

/* the same line, unsigned, as a section divider */
.myriad-rule {
  height: 3px;
  border-radius: 1.5px;
  background: #201e1d;
}
.myriad-rule--soft { background: rgba(32, 30, 29, 0.35); }