/* ---------- webring: two vinyl stickers at the foot of the board ---------- */
.ring { position: relative; z-index: 1; max-width: 73.75em; margin: 0 auto; padding: 0 5vw 10vh; font-size: clamp(15px, 1.45vh, 24px); display: flex; justify-content: space-between; align-items: center; gap: 2em; }
.sticker {
  position: relative; display: inline-block; text-decoration: none;
  padding: .35em .9em .3em; color: #2a2218;
  font: 400 clamp(20px, 2.6vh, 28px)/1 var(--marker);
  background: rgba(238,228,200,.94);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transform: rotate(var(--r, -1.5deg));
  transition: transform .2s;
}
.sticker::before, .sticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; background: rgba(238,228,200,.6); }
.sticker::before { left: -8px; clip-path: polygon(100% 0, 0 20%, 100% 45%, 0 70%, 100% 100%); }
.sticker::after { right: -8px; clip-path: polygon(0 0, 100% 25%, 0 50%, 100% 75%, 0 100%); }
.sticker:hover { transform: rotate(0deg) translateY(-.1em); }
.sticker:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sticker.next { --r: 1.5deg; }
@media (max-width: 640px) { .ring { flex-direction: column; align-items: stretch; gap: 1.2em; } .sticker.next { align-self: flex-end; } }