/* underline-link.css — Shifting underline */

.ulink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--paper);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  transition:
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    padding-bottom var(--dur-base) var(--ease);
}

.ulink:hover,
.ulink:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  padding-bottom: 4px;
}

.ulink__arrow {
  font-family: var(--font-mono);
  font-weight: 400;
  transition: transform var(--dur-base) var(--ease);
}

.ulink:hover .ulink__arrow { transform: translateX(4px); }

.ulink--dim {
  color: var(--paper-dim);
  border-bottom-color: var(--paper-faint);
}

.ulink--dim:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}