.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--t-colour) linear;
}

.link:hover {
  text-decoration-color: var(--green-ink);
}

[data-surface="ink"] .link:hover {
  text-decoration-color: var(--green);
}

/* A link that reads as a next step: mono, with a trailing arrow. */
.forward {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--rule);
  padding-bottom: 2px;
  transition: border-color var(--t-colour) linear;
}

.forward:hover {
  border-color: var(--green-ink);
}

[data-surface="ink"] .forward {
  border-color: var(--rule-dark);
}

[data-surface="ink"] .forward:hover {
  border-color: var(--green);
}

.arrow {
  font-family: var(--font-body);
}