.brand-lockup[data-brand] {
  --brand-ink: #161713;
  --brand-subtitle: #535b4b;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: max-content;
  max-width: 220px;
  min-width: 0;
  flex-shrink: 0;
  margin: 0;
  padding: 3px 0;
  color: var(--brand-ink);
  text-decoration: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.brand-lockup[data-brand][data-brand-tone="light"] {
  --brand-ink: #f5d21b;
  --brand-subtitle: #dbdfd0;
}
.brand-lockup[data-brand]:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 6px;
  border-radius: 3px;
}
.brand-lockup[data-brand] .brand-lockup__symbol {
  display: block;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: visible;
  color: var(--brand-ink);
}
.brand-lockup[data-brand] .brand-lockup__symbol > img,
.brand-lockup[data-brand] .brand-lockup__symbol > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  color: var(--brand-ink);
}
.brand-lockup[data-brand] .brand-lockup__copy {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.brand-lockup[data-brand] .brand-lockup__wordmark {
  display: block;
  width: 152px;
  aspect-ratio: 12057.34 / 1534;
  margin: 0;
  background: var(--brand-ink);
  -webkit-mask: url('/assets/brand-wordmark.svg') center / contain no-repeat;
  mask: url('/assets/brand-wordmark.svg') center / contain no-repeat;
}
.brand-lockup[data-brand] .brand-lockup__wordmark > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  opacity: 0;
}
.brand-lockup[data-brand] .brand-lockup__tagline {
  display: block;
  margin: 0;
  color: var(--brand-subtitle);
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .025em;
  text-transform: none;
  white-space: nowrap;
}
.capsule-mark[data-brand] {
  display: inline-grid;
  place-items: center;
  width: var(--capsule-size, 44px);
  height: var(--capsule-size, 44px);
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: transparent;
  color: var(--brand-ink, #161713);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.capsule-mark[data-brand][data-brand-tone="light"] { --brand-ink: #f5d21b; }
.capsule-mark[data-brand]:focus-visible {
  outline: 2px solid var(--brand-ink, #161713);
  outline-offset: 4px;
}
.capsule-mark[data-brand] .brand-lockup__symbol {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  color: inherit;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.capsule-mark[data-brand] .brand-lockup__symbol > img,
.capsule-mark[data-brand] .brand-lockup__symbol > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  color: inherit;
  overflow: visible;
}
.capsule-mark[data-brand].is-brand-interacting .brand-lockup__symbol {
  animation: brand-capsule-pop 1.5s cubic-bezier(.23, 1, .32, 1) both;
}
:is(.brand-lockup, .capsule-mark)[data-brand].is-brand-playing .brand-symbol-top {
  animation: brand-open-top 1.5s cubic-bezier(.23, 1, .32, 1) both;
}
:is(.brand-lockup, .capsule-mark)[data-brand].is-brand-playing .brand-symbol-bottom {
  animation: brand-open-bottom 1.5s cubic-bezier(.23, 1, .32, 1) both;
}
:is(.brand-lockup, .capsule-mark)[data-brand].is-brand-playing .brand-symbol-particle {
  animation: brand-release 1.5s ease both;
}
:is(.brand-lockup, .capsule-mark)[data-brand] .brand-symbol-particle-one { --brand-particle-x: -8px; --brand-particle-y: -41px; }
:is(.brand-lockup, .capsule-mark)[data-brand] .brand-symbol-particle-two { --brand-particle-x: -16px; --brand-particle-y: -53px; }
:is(.brand-lockup, .capsule-mark)[data-brand] .brand-symbol-particle-three { --brand-particle-x: 13px; --brand-particle-y: -50px; }
@keyframes brand-capsule-pop {
  0%, 100% { transform: rotate(0) scale(1); }
  24% { transform: rotate(-8deg) scale(1.09); }
  55% { transform: rotate(4deg) scale(1.03); }
}
@keyframes brand-open-top {
  0%, 12%, 100% { transform: translateY(0); }
  32%, 53% { transform: translateY(-19px); }
}
@keyframes brand-open-bottom {
  0%, 12%, 100% { transform: translateY(0); }
  32%, 53% { transform: translateY(7px); }
}
@keyframes brand-release {
  0%, 17%, 100% { transform: translate(0, 0); opacity: 1; }
  42% { transform: translate(var(--brand-particle-x), var(--brand-particle-y)); opacity: 1; }
  61% { transform: translate(var(--brand-particle-x), calc(var(--brand-particle-y) - 9px)); opacity: 0; }
  62% { transform: translate(0, 0); opacity: 0; }
  80% { transform: translate(0, 0); opacity: 1; }
}
@supports not (mask-image: url('/assets/brand-wordmark.svg')) {
  .brand-lockup[data-brand] .brand-lockup__wordmark { background: transparent; }
  .brand-lockup[data-brand] .brand-lockup__wordmark > img { opacity: 1; }
  .brand-lockup[data-brand][data-brand-tone="light"] .brand-lockup__wordmark > img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(86%) saturate(1782%) hue-rotate(348deg) brightness(101%) contrast(92%);
  }
}
@media (max-width: 760px) {
  .brand-lockup[data-brand] { gap: 8px; max-width: 190px; }
  .brand-lockup[data-brand] .brand-lockup__symbol { width: 32px; height: 32px; flex-basis: 32px; }
  .brand-lockup[data-brand] .brand-lockup__wordmark { width: 142px; }
  .brand-lockup[data-brand] .brand-lockup__copy { gap: 4px; }
  .brand-lockup[data-brand] .brand-lockup__tagline { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .capsule-mark[data-brand] .brand-lockup__symbol,
  :is(.brand-lockup, .capsule-mark)[data-brand] .brand-symbol-top,
  :is(.brand-lockup, .capsule-mark)[data-brand] .brand-symbol-bottom,
  :is(.brand-lockup, .capsule-mark)[data-brand] .brand-symbol-particle {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
@media(max-width:360px){.brand-lockup[data-brand]{gap:8px}.brand-lockup[data-brand] .brand-lockup__symbol{width:30px;height:30px;flex-basis:30px}.brand-lockup[data-brand] .brand-lockup__wordmark{width:134px}}
