/* Both decorations share one square dimension and are centered on the logos. */
.logo-link {
  --ring-size: min(310px, 82%);
}
.logo-link::before {
  width: var(--ring-size);
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-color: #fff;
  z-index: -1;
}
.logo-link:hover::before,
.logo-link:focus-visible::before {
  transform: translate(-50%, -50%);
  border-color: var(--yellow);
}
/* The supplied images have opaque black backgrounds. Clip the portion of
   the underlying circle covered by the diamond and lettering so the ring
   cannot shine through the artwork when screen blending removes that black. */
.bookstore .logo-link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M50,-10 L110,50 L50,110 L-10,50 Z' fill='black'/%3E%3Crect x='-5' y='10' width='110' height='65' fill='black'/%3E%3C/mask%3E%3Crect width='100' height='100' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M50,-10 L110,50 L50,110 L-10,50 Z' fill='black'/%3E%3Crect x='-5' y='10' width='110' height='65' fill='black'/%3E%3C/mask%3E%3Crect width='100' height='100' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}
.publisher .logo-link::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 18%, transparent 18% 82%, #000 82% 100%);
  mask-image: linear-gradient(to bottom, #000 0 18%, transparent 18% 82%, #000 82% 100%);
}
/* Avoid moving the image away from its matching occlusion when hovering. */
.logo-link:hover img,
.logo-link:focus-visible img { transform: none; }
@media (max-width: 900px) {
  .logo-link { --ring-size: min(260px, 82%); }
}
@media (max-width: 650px) {
  .logo-link { --ring-size: min(275px, 82%); }
}