/* Wind chime: the clapboard wall of a seaside house under its porch beam, the copy on the left and the chime drawn
   on a canvas. */
:root {
  --wall: #eef3f0;          /* the painted clapboards */
  --wall-line: #dce6e2;     /* the shadow under every clapboard */
  --light: #fff6e4;         /* the late sun on the wall */
  --beam: #a97c55;          /* the porch beam */
  --beam-dark: #6c4a30;     /* its shaded side */
  --ink: #1d3640;           /* the words */
  --muted: #557178;         /* the smaller words */
  --tube: #b9c7cd;          /* the aluminium tubes */
  --tube-warm: #cda86c;     /* the brass tubes */
  --wood: #b98556;          /* the ring and the clapper */
  --cord: #4a3a2e;          /* the cords */
  --wave: #2a7d9c;          /* the sound arcs */
  --sail: #f7f0e3;          /* the sail of the little boat */
  --stripe: #d8624a;        /* the stripe on the sail */
  --hull: #2e5c72;          /* the hull of the little boat */
  --streak: #86b6c4;        /* the lines of the wind */
  --shadow: #2c4a52;        /* the shadow of the chime on the wall */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--wall);
  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:
    radial-gradient(ellipse 60% 70% at 78% 30%, color-mix(in srgb, var(--light) 80%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--wall-line) 70%, var(--wall)) 0, transparent 14%),
    repeating-linear-gradient(to bottom, var(--wall) 0 44px, var(--wall-line) 44px 47px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the porch beam, with its shaded underside */
.beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(22px, 3.6vh, 34px);
  background: linear-gradient(to bottom, var(--beam) 0, var(--beam) 62%, var(--beam-dark) 100%);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--shadow) 45%, transparent);
  z-index: 3;
}

.chime {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.copy {
  position: absolute;
  left: clamp(24px, 7vw, 120px);
  top: 50%;
  translate: 0 -46%;
  width: min(38vw, 440px);
  z-index: 2;
  pointer-events: none;
}

.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(--wave);
}

.copy__title {
  margin-top: 0.35em !important;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(34px, 4.7vw, 68px);
  font-weight: 480;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.copy__title .word {
  display: inline-block;
  transform-origin: 50% 100%;
}

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

.copy__wind {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.7em;
  margin-top: 1.8em !important;
  font-size: clamp(12px, 1vw, 14px);
}

.copy__label {
  font-weight: 640;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the word of the wind: the old one flies up, the new one comes in from below */
.copy__beaufort {
  display: inline-grid;
  overflow: hidden;
  padding: 0.1em 0.1em 0.15em;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 1.45em;
  font-style: italic;
  font-weight: 560;
  color: var(--ink);
}

.copy__word {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.copy__open {
  margin-top: 0.7em !important;
  font-size: clamp(12px, 0.95vw, 13px);
  font-weight: 560;
  color: var(--muted);
}

.gust {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: none;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.gust:focus-visible {
  outline: 3px solid var(--wave);
  outline-offset: 6px;
}

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

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

  .copy__title {
    font-size: clamp(28px, 8.4vw, 40px);
  }

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

  .copy__wind {
    margin-top: 1em !important;
  }

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