@font-face {
  font-family: "Cabinet Grotesk";
  src: url("assets/cabinet-grotesk-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Modak";
  src: url("assets/modak.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  background: #ff2e00;
  color: #fff;
  font-family: "Cabinet Grotesk", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
.scene img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.page {
  --u: min(0.0694444444vw, 0.0925925926svh);
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.scene {
  position: relative;
  width: calc(1440 * var(--u));
  height: 100svh;
  margin-inline: auto;
}

.silhouette {
  position: absolute;
  width: calc(1026 * var(--u));
  max-width: none;
  bottom: 0;
  left: calc(225 * var(--u));
  pointer-events: none;
}

.brand {
  position: absolute;
  top: calc(77 * var(--u));
  right: calc(72 * var(--u));
  width: calc(203 * var(--u));
}

.announcement {
  position: absolute;
  bottom: calc(420 * var(--u));
  inset-inline: 0;
  text-align: center;
  text-transform: uppercase;
}

.announcement p {
  margin: 0 0 calc(16 * var(--u));
  font-size: calc(56 * var(--u));
  font-weight: 500;
  line-height: 1;
}

h1 {
  margin: 0;
  font-family: "Modak", "Arial Black", sans-serif;
  font-size: calc(130 * var(--u));
  font-weight: 400;
  line-height: 0.86;
}

h1 span { display: block; }

.mascot {
  position: absolute;
  width: calc(208 * var(--u));
  bottom: calc(87 * var(--u));
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 600px) {
  .page { min-height: max(100svh, 640px); }
  .scene { width: 100%; height: max(100svh, 640px); }
  .brand { width: 132px; top: 28px; right: 24px; }
  .silhouette {
    width: max(620px, 95svh);
    left: 50%;
    transform: translateX(-48%);
    bottom: -7%;
  }
  .announcement { top: 34%; bottom: auto; padding-inline: 12px; }
  .announcement p { font-size: clamp(28px, 7.8vw, 42px); margin-bottom: 16px; }
  h1 { font-size: clamp(64px, 18.2vw, 108px); line-height: 0.92; }
  .mascot { width: clamp(140px, 39vw, 185px); bottom: 7%; }
}