:root {
  /* Edit these two values to change the colours. */
  --background: #d8f3dc;
  --foreground: #212c2a;
}

* { box-sizing: border-box; }

html {
  background: var(--background);
  color: var(--foreground);
  scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  font-family: 'Satoshi', Arial, sans-serif;
}

/* Only enable the scroll runway when JavaScript is running. */
html.has-scroll-sequence body { height: var(--page-height); }

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: center;
}

.headline {
  display: grid;
  align-items: baseline;
  /* Reserve the opening prefix width so PEOPLE never moves on scroll. */
  grid-template-columns: var(--prefix-width, max-content) max-content;
  column-gap: .25em;
  width: max-content;
  margin: 0 auto;
  font-size: min(9vw, 12rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-transform: uppercase;
  white-space: nowrap;
}

.prefix {
  /* Anchor the entire word to the right edge, including words wider than the track. */
  justify-self: end;
  width: max-content;
  text-align: right;
  font-family: "amandine", sans-serif;
  /* Use Amandine’s own pair spacing, independently of PEOPLE. */
  font-kerning: normal;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: lowercase;
  font-style: normal;
}
.people { text-align: left; }


@media (max-width: 600px) {
  .headline { font-size: 10vw; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Small optical correction between the e and a in creative. */
.creative-opening { padding-inline-end: .01em; }