.northlight-logo {
  --nl-light: 247,242,228;
  --nl-shade: 148,143,133;
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 704px;
  aspect-ratio: 704 / 220;
  overflow: hidden;
  isolation: isolate;
  vertical-align: middle;
}
.northlight-logo > img { display: block; width: 100%; height: 100%; }
.northlight-logo .nl-halo,
.northlight-logo .nl-glint {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  aspect-ratio: 1;
}
.northlight-logo .nl-halo {
  left: 64.914773%; top: 27.727273%; width: 21.590909%;
  mask-image: radial-gradient(circle closest-side,#000 0%,#000 70%,transparent 100%);
  background: radial-gradient(circle,rgba(var(--nl-light),0) 0%,rgba(var(--nl-light),0) 16%,rgba(var(--nl-light),.22) 23%,rgba(var(--nl-light),.13) 36%,rgba(var(--nl-light),.045) 62%,rgba(var(--nl-light),0) 100%);
  mix-blend-mode: screen;
}
.northlight-logo[data-surface="paper"] .nl-halo {
  top: 29.090909%;
  background: radial-gradient(circle,rgba(var(--nl-shade),0) 0%,rgba(var(--nl-shade),0) 19%,rgba(var(--nl-shade),.14) 28%,rgba(var(--nl-shade),.065) 46%,rgba(var(--nl-shade),.02) 68%,rgba(var(--nl-shade),0) 100%);
  mix-blend-mode: multiply;
}
.northlight-logo .nl-glint {
  left: 18.75%; top: 23.636364%; width: 5.681818%; opacity: 0;
  background: radial-gradient(circle,rgba(var(--nl-light),.5) 0%,rgba(var(--nl-light),.17) 22%,rgba(var(--nl-light),0) 70%);
  mix-blend-mode: screen;
}
.northlight-logo .nl-holiday { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.northlight-logo .nl-holiday[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .northlight-logo .nl-glint { display: none; }
}