@font-face {
  font-family: "Departure Mono";
  src: url("assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "DM Sans", sans-serif;
  color: #2d253b;
  background: #f5f2fa;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }

.brand {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(8px, 1.5svh, 20px);
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.brand-logo {
  --logo-height: min(64svh, 108vw, 44rem);
  display: block;
  width: calc(var(--logo-height) * .7);
  height: var(--logo-height);
  /* The source is square; this trims only transparent space beside the mark. */
  object-fit: cover;
  object-position: center;
}

.wordmark {
  margin: 0;
  padding: .02em .08em;
  color: #f5f2fa;
  background: #2d253b;
  font-family: "Departure Mono", monospace;
  font-size: 6.875rem;
  font-weight: 400;
  line-height: .85;
  letter-spacing: 0;
  font-kerning: normal;
}

/* Multiples of 11px at the default text size preserve the pixel grid. */
@media (max-width: 700px) {
  .wordmark { font-size: 6.1875rem; }
}

@media (max-width: 600px) {
  .wordmark { font-size: 3.4375rem; }
}

@media (max-width: 380px) {
  .wordmark { font-size: 2.75rem; }
}

@media (max-height: 500px) {
  .brand { gap: 4px; padding-block: 16px; }
  .brand-logo { --logo-height: min(60svh, 90vw); }
  .wordmark { font-size: 2.75rem; }
}