/* A quiet grade change in the original wordmark; its layout never moves. */
grade-logo { display: block; position: relative; aspect-ratio: 1732 / 294; }
grade-logo > img { display: block; width: 100%; height: auto; }
grade-logo > svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
grade-logo.grade-logo-ready > svg { display: block; }
grade-logo.grade-logo-ready > img {
  clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%, 0 60%, 11% 60%);
}
.grade-logo-original { clip-path: inset(0 89% 40% 0); }
.grade-logo-original, .grade-logo-alternate {
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.grade-logo-alternate { opacity: 0; transform: translateY(6px); }
.grade-logo-swapped .grade-logo-original { opacity: 0; transform: translateY(-6px); }
.grade-logo-swapped .grade-logo-alternate { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  grade-logo.grade-logo-ready > img { clip-path: none; }
  grade-logo.grade-logo-ready > svg { display: none; }
}