.site-post-page .book-post a[href*="//x.com/"],
.site-post-page .book-post a[href*="//twitter.com/"] {
  text-decoration: none;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 1px,
    transparent 1px 3px
  );
  background-position: 0 calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.site-post-page .book-post a[href*="//x.com/"]::after,
.site-post-page .book-post a[href*="//twitter.com/"]::after {
  content: "";
  display: inline-block;
  width: .72em;
  height: .72em;
  margin-left: .16em;
  background: url("/article-assets/x-mark.svg") center / contain no-repeat;
  font-size: 1em;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  vertical-align: -.03em;
  opacity: .72;
  transition: opacity 150ms ease;
}

.site-post-page .book-post a[href*="//x.com/"]:hover,
.site-post-page .book-post a[href*="//twitter.com/"]:hover {
  background-image: linear-gradient(currentColor, currentColor);
}

.site-post-page .book-post a[href*="//x.com/"]:hover::after,
.site-post-page .book-post a[href*="//twitter.com/"]:hover::after {
  opacity: .55;
}

html:not(.light-mode) .site-post-page .book-post a[href*="//x.com/"]::after,
html:not(.light-mode) .site-post-page .book-post a[href*="//twitter.com/"]::after {
  filter: invert(1);
}