/* One interaction standard for every diagonal arrow on a link or button. */
:root {
  --link-arrow-distance:3px;
  --link-arrow-duration:200ms;
  --link-arrow-easing:cubic-bezier(0.16,1,0.3,1);
}
[data-diagonal-arrow] {
  display:inline-block;
  flex-shrink:0;
  text-decoration:none;
  transition:transform var(--link-arrow-duration) var(--link-arrow-easing);
  --link-arrow-y:calc(-1 * var(--link-arrow-distance));
}
[data-diagonal-arrow="down"] { --link-arrow-y:var(--link-arrow-distance); }
:is(a,button):is(:hover,:focus-visible) > [data-diagonal-arrow] {
  transform:translate(var(--link-arrow-distance),var(--link-arrow-y));
}
/* Underline labels separately: a parent's decoration also paints its arrows. */
:is(.home-page,.harness-page,.mission-page) :is(a,button):has(> [data-diagonal-arrow]):is(:hover,:focus-visible) {
  text-decoration:none;
}
:is(.home-page,.harness-page,.mission-page) a > [data-arrow-label] { font:inherit; }
a:is(:hover,:focus-visible) > [data-arrow-label="underline"] {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.commitment-work > a:focus-visible h3 { text-decoration:underline;text-underline-offset:6px; }
@media(prefers-reduced-motion:reduce) {
  :is(a,button):is(:hover,:focus-visible) > [data-diagonal-arrow] { transform:none;transition:none; }
}
.motion-paused :is(a,button):is(:hover,:focus-visible) > [data-diagonal-arrow] { transform:none;transition:none; }