/* Paper lanterns: a narrow street at dusk seen down its length, strings of paper lanterns across it, the copy of
   the fair at the bottom. The street and the lanterns are one SVG drawn by the script. */
:root {
  --sky-top: #1c1a3a;       /* the sky high up */
  --sky-low: #7a4560;       /* the sky down the end of the street */
  --dusk: #e58a5c;          /* the last light on the horizon */
  --wall: #2a2340;          /* the walls of the houses */
  --wall-far: #4a3558;      /* the houses down the end of the street */
  --window: #f4b866;        /* the lit windows */
  --shutter: #1a1530;       /* the shutters and the dark windows */
  --road: #241d33;          /* the cobbles */
  --cord: #120e1e;          /* the strings and the cords */
  --cap: #2b1c22;           /* the lacquered caps of the lanterns */
  --light: #ffe7b0;         /* the warm light inside the paper */
  --rib: #3b1a12;           /* the bamboo ribs, seen against the light */
  --paper-1: #e0473a;       /* the paper colours */
  --paper-2: #f2a03d;
  --paper-3: #2f9c8f;
  --paper-4: #e46a95;
  --paper-5: #f1cf4d;
  --paper-6: #6b78e0;
  --ink: #fbf1e4;           /* the words */
  --muted: #d6c2c9;         /* the smaller words */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--sky-top);
  color: var(--ink);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-low) 52%, var(--dusk) 72%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 62% at 10% 100%, color-mix(in srgb, var(--sky-top) 92%, transparent) 20%, transparent 80%);
}

.street {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.copy {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: clamp(28px, 7vh, 72px);
  width: min(44vw, 520px);
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--sky-top) 70%, transparent);
}

.copy p,
.copy h1 {
  margin: 0;
}

.copy__kicker {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 680;
  font-stretch: 118%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-2);
}

.copy__title {
  margin-top: 0.3em !important;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(36px, 5vw, 74px);
  font-weight: 520;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  line-height: 1;
  letter-spacing: -0.02em;
}

.copy__title em {
  display: inline-block;
  font-style: italic;
  color: var(--paper-1);
  transform-origin: 50% 100%;
}

.copy__line {
  margin-top: 0.9em !important;
  max-width: 38ch;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--muted);
}

.copy__when {
  margin-top: 0.9em !important;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 620;
  font-stretch: 110%;
  color: var(--ink);
}

.keys {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.keys button {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  opacity: 0;
  pointer-events: none;
}

.keys button:focus-visible {
  opacity: 1;
  outline: 3px solid var(--light);
  outline-offset: 4px;
}

.hint {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 7vh, 72px);
  margin: 0;
  z-index: 2;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 560;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  pointer-events: none;
}

@media (hover: hover) {
  .stage.is-over {
    cursor: pointer;
  }
}

@media (max-width: 719px) {
  .copy {
    left: 22px;
    right: 22px;
    bottom: 52px;
    width: auto;
  }

  .copy__title {
    font-size: clamp(30px, 9vw, 42px);
  }

  .copy__line {
    margin-top: 0.7em !important;
    font-size: 14px;
  }

  .hint {
    left: 22px;
    right: 22px;
    bottom: 20px;
    text-align: left;
  }
}