:root {
  color-scheme: light;

  --ink: #292b2a;
  --muted: #85857f;
  --paper: #fbfaf6;
  --canvas-kjv: #f6f4f9;
  --canvas: var(--canvas-kjv);
  --line: #e9e6de;

  --blue: #defefc;
  --blue-strong: var(--blue);
  --lavender: #dcd7f7;
  --yellow: #fffecf;
  --pink: #fad4e0;
  --green: #d6f2b9;
  --coral: #c85f5f;
  --deep-teal: #315863;
  --navy-ink: #223b55;
  --brass: #a97c35;
  --brass-soft: #dfc681;
  --brass-shadow: #c7a95d;

  --chapter-blue: #72c6d3;
  --chapter-lavender: #dcd7f7;
  --chapter-pink: #fad4e0;
  --chapter-green: #d6f2b9;

  --focus: #799da8;
  --focus-border: #9ab8c0;
  --focus-ring: rgba(141, 180, 196, 0.14);
  --grain: rgba(99, 95, 78, 0.075);
}

.brand-mark {
  position: relative;
  isolation: isolate;
}

.brand-mark::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1px 4px at 22% 22%, #fff 35%, transparent 75%),
    radial-gradient(ellipse 4px 1px at 22% 22%, #fff 35%, transparent 75%),
    radial-gradient(ellipse 1px 3px at 77% 28%, #fff8dc 35%, transparent 75%),
    radial-gradient(ellipse 3px 1px at 77% 28%, #fff8dc 35%, transparent 75%),
    radial-gradient(ellipse 1px 4px at 34% 78%, #fff 35%, transparent 75%),
    radial-gradient(ellipse 4px 1px at 34% 78%, #fff 35%, transparent 75%),
    radial-gradient(circle at 82% 78%, #fff 0.75px, transparent 1.5px);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
}

.brand:hover .brand-mark::after,
.brand:focus-visible .brand-mark::after {
  animation: brand-mark-sparkle 0.9s ease-out both;
}

@keyframes brand-mark-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  28% {
    opacity: 0.95;
    transform: scale(1.08);
  }
  52% {
    opacity: 0.48;
    transform: scale(0.94);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-mark::after,
  .brand:focus-visible .brand-mark::after {
    animation: none;
  }
}