@font-face {
  font-family: "Inter";
  src: url("assets/inter-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/inter-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  color: #F4F3EF;
  background: #101315;
  font-family: "Inter", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;

  /* Fluid values are bounded so the same rhythm works between devices. */
  --page-gutter: clamp(20px, 4vw, 64px);
  --space-1: clamp(4px, .4vw, 8px);
  --space-2: clamp(8px, .8vw, 16px);
  --space-3: clamp(16px, 1.25vw, 24px);
  --space-4: clamp(24px, 2vw, 32px);
  --space-5: clamp(32px, 3vw, 48px);
  --space-6: clamp(48px, 4vw, 64px);

  --emblem-size: clamp(88px, calc(5vw + 72px), 128px);
  --intro-top-space: clamp(48px, calc(2.5vw + 40px), 88px);
  --intro-bottom-space: clamp(48px, calc(1.7vw + 40px), 72px);
  --intro-copy-width: 860px;
  --body-copy-width: 700px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #101315;
}

img,
canvas {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.site {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  background: #101315;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, calc(1.3vw + 20px), 40px);
  padding: var(--intro-top-space) var(--page-gutter) var(--intro-bottom-space);
  text-align: center;
}

.emblem {
  position: relative;
  display: block;
  flex: 0 0 var(--emblem-size);
  width: var(--emblem-size);
  height: var(--emblem-size);
  overflow: visible;
}

.intro-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: min(var(--intro-copy-width), 100%);
  min-width: 0;
}

.primary-description,
.supporting-description {
  width: 100%;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.primary-description {
  color: #F4F3EF;
  font-size: clamp(22px, calc(.95vw + 19px), 32px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.supporting-description {
  color: #A7B0B5;
  font-size: clamp(16px, calc(.35vw + 14.9px), 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
}

.hero-art {
  position: relative;
  width: 100%;
  height: clamp(180px, calc(43vw + 20px), 840px);
  overflow: hidden;
  background: #101315;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* The source's near-black margins feather into the exact site background. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.company-description {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--space-6) var(--page-gutter) 0;
  background: #101315;
  color: #F4F3EF;
  text-align: center;
}

.company-description-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: min(var(--body-copy-width), 100%);
  min-width: 0;
}

.company-description-primary,
.company-description-supporting {
  width: 100%;
  margin: 0;
  text-align: center;
}

.company-description-primary {
  color: #F4F3EF;
  font-size: clamp(18px, calc(.5vw + 16px), 21px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.company-description-supporting {
  color: #A7B0B5;
  font-size: clamp(15px, calc(.35vw + 14px), 18px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.005em;
  text-wrap: pretty;
}

.footer {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--space-6) var(--page-gutter) var(--space-5);
  background: #101315;
  text-align: center;
}

.footer-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: 0;
}

.footer-copy a {
  display: inline-block;
  color: #F4F3EF;
  font-size: clamp(16px, calc(.15vw + 15.5px), 18px);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color .18s ease;
}

.footer-copy a:hover {
  color: #90A6B1;
}

.footer-copy a:focus-visible {
  outline: 1px solid #90A6B1;
  outline-offset: 5px;
}

.footer-copy p {
  margin: 0;
  color: #A7B0B5;
  font-size: clamp(14px, calc(.1vw + 13.7px), 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .005em;
}

.emblem-canvas,
.emblem-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.emblem-canvas {
  opacity: 0;
  transition: opacity .15s ease-out;
}

.emblem-fallback {
  background: #F4F3EF;
  -webkit-mask: url("assets/platform-sharp-p-mask.png") center / contain no-repeat;
  mask: url("assets/platform-sharp-p-mask.png") center / contain no-repeat;
  opacity: 1;
  transition: opacity .15s ease-out;
}

.emblem.webgl-ready .emblem-canvas {
  opacity: 1;
}

.emblem.webgl-ready .emblem-fallback {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .emblem-canvas,
  .emblem-fallback {
    transition: none;
  }
}