/* Shared: the only real things on the page besides the mark — where to find Mila. */
.socials { display: flex; align-items: baseline; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.socials a { color: inherit; text-decoration: none; }
.handle { opacity: .55; margin-right: auto; }
.social {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .26em;
  padding: 6px 0 8px; position: relative;
}
.social::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(.18); transform-origin: left;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.social:hover::after, .social:focus-visible::after { transform: scaleX(1); }
.social:focus-visible { outline: none; }
.roll { display: inline-block; overflow: hidden; height: 1.4em; }
.roll > span { display: block; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.social:hover .roll > span, .social:focus-visible .roll > span { transform: translateY(-100%); }
.arrow { font-size: .75em; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.social:hover .arrow { transform: translate(3px, -3px); }
@media (max-width: 640px) {
  .handle { width: 100%; margin: 0 0 4px; }
  .socials { gap: 0; justify-content: space-between; }
}