/* -------------------------------------------------------------------------- */
/* Links */
a {
  position: relative;
  color: var(--link);
  border-radius: var(--space-1);
  padding: 0 .12em; /* room for highlight */
  transition: var(--hover-transition);
  background-image: linear-gradient(transparent 60%, color-mix(in srgb, var(--link) 25%, transparent) 0);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}
a:hover,
a:focus-visible {
  background-size: 100% 100%;
  outline: 0;
}
a:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 35%, transparent);
}

/* space between items and arrows */
.with-arrow, .ext {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* External link arrow: add class=\"ext\" */
a.ext::after {
  content: "↗";
  /* Lato and Charter do not have this arrow.  specify fallback stack*/
  /* so we don't unnecessarily skip the "tiny" font and fall back to*/
  /* the full one, only to see the arrow is not there */
  font-family: var(--font-symbol);
  font-size: var(--font-size-small);
  margin-left: var(--space-1);
  transition: var(--hover-transition);
}
a.ext:hover::after,
a.ext:focus-visible::after { transform: translate(2px,-2px); }

/* Follow-me arrow: add class=\"with-arrow\" where you want motion */
.with-arrow::after {
  content: "→";
  /* Lato and Charter do not have this arrow.  specify fallback stack*/
  /* so we don't unnecessarily skip the "tiny" font and fall back to*/
  /* the full one, only to see the arrow is not there */
  font-family: var(--font-symbol);
  transition: transform .18s ease;
}
.with-arrow:hover::after,
.with-arrow:focus-visible::after { transform: translateX(3px); }