/* User-supplied logo; the loader shares the site's existing local Space Mono. */
.has-js .loader {
  align-items: center;
  padding: 24px;
  background: #000;
  transition: opacity 450ms ease, visibility 450ms ease;
}

.loader__art {
  flex: 0 0 auto;
  width: min(560px, 100%, calc(100svh - 180px));
  aspect-ratio: 1.3;
  overflow: hidden;
}

.loader__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.loader__mark {
  margin: 12px 0 24px;
  color: #ff9347;
  font-family: var(--mono);
  font-size: clamp(15px, 2.6vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .22em;
}

.loader__copy,
.loader__track {
  width: min(360px, 100%);
  max-width: none;
}

.loader__copy {
  align-items: baseline;
  gap: 12px;
  color: #b2a49b;
  font-size: clamp(9px, 2.6vw, 11px);
}

.loader__copy strong {
  color: #ffad72;
  font-variant-numeric: tabular-nums;
}

.loader__track { background: #2a2018; }
.loader__track span {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #ff9347;
  box-shadow: none;
  transition: transform 180ms ease;
}

.loader.has-logo-error .loader__art { display: none; }

@media (max-height: 430px) {
  .has-js .loader { padding: 12px 24px; }
  .loader__art { width: min(250px, 100%, calc(100svh - 110px)); }
  .loader__mark { margin: 4px 0 10px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .loader,
  .loader__track span { transition: none; }
}