:root {
  --page-bg: #fbfbf9;
  --stage-bg:
    radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 0.98) 0 17%, rgba(255, 255, 255, 0.7) 31%, rgba(255, 255, 255, 0) 51%),
    linear-gradient(135deg, #ffffff 0%, #f5f6f3 46%, #ecefed 100%);
  --wordmark-color: #070d25;
  --wordmark-weight: 860;
  --wordmark-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 38px rgba(13, 20, 42, 0.1);
  --wordmark-offset-y: 0.15rem;
  --grid-perspective: 1120px;
  --tile-perspective: 760px;
  --tile-depth: 4px;
  --tile-radius: 1px;
  --tile-border: 1px solid rgba(98, 105, 110, 0.18);
  --tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 14px 17px rgba(28, 35, 43, 0.22),
    0 2px 2px rgba(24, 31, 38, 0.18);
  --tile-sheen:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.34) 39%, rgba(201, 205, 207, 0.32) 100%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0 44%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0) 52% 100%);
  --spine-size: 1px;
  --spine-color: rgba(58, 64, 67, 0.2);
  --spine-opacity: 0.72;
  --axle-size: 4px;
  --axle-color: rgba(35, 40, 42, 0.2);
  --axle-shadow: 0 8px 12px rgba(25, 30, 34, 0.2);
  --axle-opacity: 0.62;
}

body.splash {
  background: #fbfbf9;
}

.stage {
  min-height: 100vh;
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(42, 49, 53, 0.045) 1px, transparent 1px) 0 0 / 96px 66px,
    linear-gradient(180deg, rgba(42, 49, 53, 0.038) 1px, transparent 1px) 0 0 / 96px 66px;
  content: "";
  pointer-events: none;
}

.tile-grid {
  filter: drop-shadow(0 26px 36px rgba(32, 37, 42, 0.12));
}

.tile-grid::before {
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 0.98) 0 14%, rgba(255, 255, 255, 0.74) 30%, rgba(255, 255, 255, 0) 53%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 14% 86%, rgba(255, 255, 255, 0.46));
}

.tile-grid::after {
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 0) 0 28%, rgba(250, 251, 250, 0.28) 48%, rgba(225, 229, 228, 0.56) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(220, 225, 225, 0.16));
  mix-blend-mode: multiply;
}

.tile {
  filter: saturate(1.08);
}

.tile-face {
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: -2px;
}

.tile-back {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 -12px 16px rgba(0, 0, 0, 0.25) inset,
    0 18px 22px rgba(30, 35, 39, 0.24);
}

.tile-back::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, 0.2)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 26% 74%, rgba(0, 0, 0, 0.14));
}

.brand-lockup {
  z-index: 8;
}

.wordmark-wrap {
  min-width: 0;
  padding: 0;
}

.wordmark {
  max-width: calc(100vw - 3rem);
  font-size: 5rem;
  font-stretch: 96%;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

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

@media (max-width: 640px) {
  :root {
    --stage-bg:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 20%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0) 67%),
      linear-gradient(135deg, #ffffff 0%, #f4f6f4 52%, #ecefed 100%);
  }

  .stage::before {
    background:
      linear-gradient(90deg, rgba(42, 49, 53, 0.04) 1px, transparent 1px) 0 0 / 74px 52px,
      linear-gradient(180deg, rgba(42, 49, 53, 0.034) 1px, transparent 1px) 0 0 / 74px 52px;
  }

  .wordmark {
    font-size: 2.85rem;
  }
}

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