/* Logo lockup (components/_logo.html): the mark + lowercase wordmark with "me" in a marigold
   pill (Guidelines §2). Never retyped in another font; the mark is the master SVG geometry. */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.logo:hover { color: var(--text); }
.logo .cmu-mark { width: 28px; height: 28px; flex: none; }
.logo .me { display: inline-block; background: var(--cmu-marigold); color: var(--cmu-ink);
  border-radius: var(--radius-pill); padding: 1px 6px 3px; margin-inline: 1px; }
.logo--lg { font-size: 30px; gap: 10px; }
.logo--lg .cmu-mark { width: 40px; height: 40px; }
.logo--sm { font-size: 17px; }
.logo--sm .cmu-mark { width: 22px; height: 22px; }
@media (max-width: 419.98px) {  .topbar .logo { font-size: 19px; } }
.cmu-mark { color: currentColor; }
.mark-dot { fill: var(--cmu-marigold); }
.on-marigold .mark-dot { fill: var(--cmu-paper); }
.ring-spin { animation: cmu-spin 6s linear infinite; transform-origin: 50% 50%; }
@keyframes cmu-spin { to { transform: rotate(360deg); } }

/* Loader: the ring holds still, the dot travels round and waits at the gap (§9). */
.loader { width: 40px; height: 40px; color: var(--text); }
.loader .mark-dot { fill: var(--cmu-marigold); }
.loader .orbit { animation: cmu-orbit 1.6s var(--ease-standard) infinite; transform-origin: 50% 50%; }
@keyframes cmu-orbit { 0% { transform: rotate(0); } 70%, 100% { transform: rotate(360deg); } }