@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

/* Desktop is laid out on a 2000 x 1300 canvas, mobile on 968 wide.
   --u is one canvas pixel. */
:root { --u: min(0.05vw, 0.0769vh); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #fefefe; }
body {
  font-family: "Inter", -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  color: #000;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage { position: fixed; inset: 0; overflow: hidden; }
img { display: block; position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }

.copy { position: absolute; left: calc(275 * var(--u)); top: calc(50% - 400 * var(--u)); }
h1 {
  font-weight: 900;
  font-size: calc(88 * var(--u));
  line-height: calc(80 * var(--u));
  letter-spacing: -0.04em;
  word-spacing: 0.06em;
  white-space: nowrap;
}
.br-m { display: none; }
p {
  margin-top: calc(18 * var(--u));
  font-weight: 800;
  font-size: calc(24.5 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: -0.025em;
}

.phone {
  width: calc(750 * var(--u));
  right: calc(-14 * var(--u));
  bottom: 0;
}

.nose { width: calc(313 * var(--u)); z-index: 3; }
.n-tr { left: auto; right: calc(-163 * var(--u)); top: calc(50% - 670 * var(--u)); }
.n-bl-back { z-index: 4; left: calc(-166 * var(--u)); top: calc(50% + 159 * var(--u)); }
.n-bl { left: calc(-124 * var(--u)); top: calc(50% + 17 * var(--u)); }

/* Portrait screens: 968-wide canvas, centred, scaled down if the screen is short
   so that text and images can never collide. */
@media (max-aspect-ratio: 1/1) {
  :root { --u: min(0.10331vw, 0.05vh); }
  .copy { top: calc(110 * var(--u)); left: calc(50% - 408 * var(--u)); }
  .br-m { display: inline; }
  h1 { font-size: calc(134 * var(--u)); line-height: calc(122 * var(--u)); letter-spacing: -0.04em; }
  p { margin-top: calc(20 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(46 * var(--u)); letter-spacing: -0.02em; }
  .phone { width: calc(1049 * var(--u)); left: calc(50% - 456 * var(--u)); right: auto; bottom: calc(-300 * var(--u)); }
  .nose { width: calc(425 * var(--u)); }
  .n-tr { left: auto; right: calc(-204 * var(--u)); top: calc(361 * var(--u)); }
  .n-bl, .n-bl-back { display: none; }
}