/* Radical Elements footer credit (re-sign-project skill), at the end of the
   copyright line. It inherits the footer's font and colour, at the footer
   text's size, and takes the site's red on hover like the footer's links. */
.re-credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  /* A 44px-tall hit area around the tile, without changing the line's
     height (the negative margins take the padding back). */
  padding: 11px 6px;
  margin-top: -11px;
  margin-bottom: -11px;
  color: inherit;
  text-decoration: none;
  font: inherit;
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  touch-action: manipulation;
}
.re-credit__tile {
  display: inline-block;
  padding: 0.3em 0.5em;
  border: 1px solid currentColor;
  border-radius: 3px;
  letter-spacing: 0.02em;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.25s;
}
/* The wink, centred above the tile so it stays on screen wherever the
   tile is (left on desktop, centred on phones). */
.re-credit::after {
  content: attr(data-wink);
  position: absolute;
  left: 50%;
  bottom: 100%;
  white-space: nowrap;
  padding: 0.6em 0.85em;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: Canvas;
  color: CanvasText;
  font-size: 0.95em;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.re-credit:hover,
.re-credit:focus-visible {
  color: #e02c45;
}
.re-credit:hover .re-credit__tile,
.re-credit:focus-visible .re-credit__tile {
  opacity: 1;
  transform: rotate(-6deg);
}
.re-credit:hover::after,
.re-credit:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.re-credit:focus-visible {
  outline: none;
}
.re-credit:focus-visible .re-credit__tile {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .re-credit__tile,
  .re-credit::after { transition: none; }
  .re-credit:hover .re-credit__tile,
  .re-credit:focus-visible .re-credit__tile { transform: none; }
  .re-credit::after,
  .re-credit:hover::after,
  .re-credit:focus-visible::after { transform: translate(-50%, 0); }
}

/* Phones: the ESPA banner is fixed to the bottom of the screen (full width,
   732 × 92); room for it under the footer (its own 20px plus the banner),
   so it doesn't cover the copyright line and the credit at the end of the
   page. `body footer`: app.css loads after this file (loadCSS) and sets
   footer's padding. */
@media only screen and (max-width: 767px) {
  body footer { padding-bottom: calc(20px + 100vw * 92 / 732); }
}