:root {
  --page-bg: #f4efe5;
  --stage-bg: #f4efe5;
  --wordmark-color: #303235;
  --wordmark-weight: 620;
  --wordmark-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 14px 28px rgba(50, 43, 34, 0.16);
  --wordmark-offset-y: 0.03em;
  --wordmark-plate: linear-gradient(
    180deg,
    rgba(248, 244, 235, 0.92),
    rgba(239, 231, 216, 0.86)
  );
  --wordmark-radius: 2px;
  --grid-perspective: 980px;
  --tile-perspective: 760px;
  --tile-depth: 5px;
  --tile-radius: 3px;
  --tile-border: 1px solid rgba(115, 102, 82, 0.28);
  --tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.74) inset,
    0 -1px 0 rgba(91, 75, 54, 0.16) inset,
    0 8px 17px rgba(53, 43, 31, 0.2);
  --tile-sheen:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.64), transparent 32%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.34), transparent 38%),
    linear-gradient(180deg, transparent 54%, rgba(80, 61, 43, 0.13));
  --spine-size: 2px;
  --spine-color: rgba(64, 55, 42, 0.22);
  --spine-opacity: 0.42;
  --axle-size: 4px;
  --axle-color: rgba(54, 46, 36, 0.38);
  --axle-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
  --axle-opacity: 0.62;
}

body.splash {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 253, 245, 0.88) 0 22%, transparent 43%),
    linear-gradient(135deg, #f9f5ec 0%, #ece2d2 48%, #d9cfbd 100%);
}

.stage {
  background:
    linear-gradient(rgba(91, 75, 55, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 75, 55, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 50% 44%, #fffaf0 0 18%, #f0e7d8 54%, #d6caba 100%);
  background-size:
    67px 67px,
    67px 67px,
    100% 100%;
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 17% 12%, rgba(166, 176, 155, 0.28), transparent 18%),
    radial-gradient(circle at 83% 20%, rgba(224, 85, 54, 0.18), transparent 16%),
    radial-gradient(circle at 76% 78%, rgba(47, 52, 50, 0.14), transparent 18%);
  pointer-events: none;
  content: "";
}

.stage::after {
  position: absolute;
  inset: 0;
  z-index: 6;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 38%, rgba(74, 62, 47, 0.18) 82%),
    linear-gradient(90deg, rgba(55, 48, 40, 0.1), transparent 18% 82%, rgba(55, 48, 40, 0.1));
  pointer-events: none;
  content: "";
}

.tile-grid {
  filter: drop-shadow(0 18px 24px rgba(76, 60, 43, 0.12));
}

.tile-grid::before {
  background:
    linear-gradient(rgba(66, 54, 41, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 54, 41, 0.17) 1px, transparent 1px);
  background-size: 67px 67px;
  mix-blend-mode: multiply;
  opacity: 0.34;
}

.tile-grid::after {
  background-image:
    radial-gradient(circle at 21% 27%, rgba(72, 60, 44, 0.13) 0 0.8px, transparent 1.1px),
    radial-gradient(circle at 69% 74%, rgba(255, 255, 255, 0.34) 0 0.7px, transparent 1px);
  background-size: 19px 17px, 23px 21px;
  mix-blend-mode: multiply;
  opacity: 0.42;
}

.tile {
  filter: saturate(0.98);
}

.tile:nth-child(7n) {
  --tile-tilt: -0.25deg;
}

.tile:nth-child(11n) {
  --tile-tilt: 0.3deg;
}

.tile-face {
  background-color: #f7f1e7;
}

.tile-face::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle at 24% 32%, rgba(70, 60, 44, 0.18) 0 0.8px, transparent 1.2px),
    radial-gradient(circle at 68% 70%, rgba(255, 255, 255, 0.46) 0 0.9px, transparent 1.3px);
  background-size: 17px 15px, 21px 19px;
  opacity: 0.3;
  pointer-events: none;
  content: "";
}

.tile-face::after {
  z-index: 2;
}

.tile-back {
  border-color: rgba(44, 39, 31, 0.34);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.36) inset,
    0 -2px 0 rgba(31, 24, 20, 0.18) inset,
    0 10px 20px rgba(41, 32, 24, 0.28);
}

.wordmark-wrap {
  min-width: min(54vw, 720px);
  padding: clamp(1.65rem, 4vw, 4.4rem) clamp(2.2rem, 7vw, 7rem);
  border: 1px solid rgba(125, 109, 84, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.68) inset,
    0 24px 54px rgba(60, 49, 36, 0.1);
}

.wordmark {
  font-family: "Optima", "Avenir Next", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 5.2rem;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
}

@media (max-width: 700px) {
  .stage {
    background-size:
      50px 50px,
      50px 50px,
      100% 100%;
  }

  .tile-grid::before {
    background-size: 50px 50px;
  }

  .wordmark-wrap {
    min-width: min(84vw, 480px);
    padding: 1.4rem 1rem;
  }

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