.site-logo {
  --brand-ink: #24232C;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 48px;
  flex-shrink: 0;
  line-height: 1;
}
.site-logo::after { content: none; }
.site-logo svg {
  display: block;
  height: auto;
  flex: 0 0 auto;
  fill: var(--brand-ink);
}
.site-logo .site-logo-symbol { width: calc(280px * 128 / 828); overflow: visible; }
.site-logo .site-logo-wordmark { width: calc(280px * 700 / 828); }
.site-logo-symbol path { transform-box: view-box; transform-origin: 64px 64px; }
:root[data-theme="dark"] .site-logo { --brand-ink: #F7F5F0; }

/* Motion enhances the static artwork; the wordmark stays readable throughout. */
@media (prefers-reduced-motion: no-preference) {
  .site-logo[data-logo-motion="ink-trace"] .site-logo-symbol path {
    stroke: var(--brand-ink);
    stroke-width: 1.6;
    stroke-dasharray: 1;
    animation: brand-ink-trace 1.8s ease-in-out both;
  }
  .site-logo[data-logo-motion="ink-trace"] .site-logo-symbol .brand-companion { animation-delay: 180ms; }
  .site-logo[data-logo-motion="assemble"] .brand-body {
    animation: brand-assemble-body 2.2s ease-in-out both;
  }
  .site-logo[data-logo-motion="assemble"] .brand-companion {
    animation: brand-assemble-companion 2.4s ease-in-out both;
  }
  .site-logo[data-logo-motion="float"] .brand-body { animation: brand-float-body 3.2s ease-in-out both; }
  .site-logo[data-logo-motion="float"] .brand-companion { animation: brand-float-companion 3.2s ease-in-out both; }
}
@keyframes brand-ink-trace {
  0% { stroke-dashoffset: 1; stroke-opacity: 1; fill-opacity: 0; }
  62% { stroke-dashoffset: 0; stroke-opacity: 1; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; fill-opacity: 1; }
}
@keyframes brand-assemble-body {
  0%, 100% { transform: none; }
  32% { transform: translate(-6px,-4px) rotate(-5deg) scale(.98); }
}
@keyframes brand-assemble-companion {
  0%, 100% { transform: none; }
  36% { transform: translate(8px,5px) rotate(6deg) scale(.98); }
}
@keyframes brand-float-body {
  0%, 100% { transform: none; }
  45% { transform: translate(0,-2px) rotate(-3deg); }
}
@keyframes brand-float-companion {
  0%, 100% { transform: none; }
  45% { transform: translate(3px,-4px) rotate(5deg); }
}
@media (max-width: 1000px) {
  .site-logo .site-logo-symbol { width: 48px; height: 48px; }
  .site-logo .site-logo-wordmark { display: none; }
}