@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/poppins-800-latin.woff2') format('woff2');
}

/* Colours sampled straight off the skit frames. The two pinks are both real:
   the deep one is the pins and the button, the bright one is the phone screen
   blown out by the camera on the REQUESTED shot. */
:root {
  /* Three pinks, and the reason there are three.

     --pink is the one the video shows, on the button and the map pins, and it
     is never darkened on a surface the video shows.
     --pink-ink is that pink taken down until small text passes AA. Measured
     against --paper it goes from 3.73:1 to 4.72:1, and white on it from 3.89
     to 4.92. Anything small and pink, or sitting on pink, uses this one.
     --pink-glow is the confirmation screen, which is the phone screen as the
     camera saw it. */
  --pink: #f0219b;
  --pink-ink: #d4148a;
  --pink-deep: #c2107a;
  --pink-glow: #fb76d6;
  --mint: #6ffcd4;
  --mint-ink: #0b7a63;
  --paper: #fcfaf6;
  --ink: #14100f;
  --ink-soft: #5b5350;
  --hairline: rgba(20, 16, 15, 0.07);

  --shell: 520px;
  --radius-card: 22px;
  --radius-box: 14px;

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-caption: ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

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

/* ---------------------------------------------------------------
   The wordmark. "home" set solid, "grrl" knocked out inside a
   rounded box that bites into the e. Same lockup as the skit, with
   the two colour arrangements it uses on light and on pink.
   --------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  font-size: var(--lockup-size, 1em);
}

.lockup__home {
  padding-right: 0.14em;
}

.lockup__grrl {
  padding: 0.16em 0.2em 0.2em;
  margin-left: -0.1em;
  border-radius: 0.34em;
}

.lockup--light .lockup__home {
  color: var(--ink);
}

.lockup--light .lockup__grrl {
  color: #fff;
  background: var(--pink);
}

.lockup--pink .lockup__home {
  color: #fff;
}

.lockup--pink .lockup__grrl {
  color: var(--pink);
  background: #fff;
}

/* The raised fist. It is the pin on the map, the bullet in lists and
   the favicon, so it gets one class and three sizes. */
.fist {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}