@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.ttf");
  font-weight: 100 900;
}

:root {
  --brand-yellow: #f1d508;
  --brand-yellow-bright: #ffe104;
  --brand-yellow-pop: #ffed00;
  --brand-blue: #63c3de;
  --brand-blue-light: #66cdea;
  --brand-ink: #191919;
  --brand-green: #1faa59;
  --brand-red: #e0443b;
  --brand-paper: #ffffff;
  --brand-font: "Archivo", "Helvetica Neue", -apple-system, Arial, sans-serif;
  --brand-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3);
  --brand-shadow-float: 0 36px 72px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.25);

  /* app listing images: the geometry and type every set shares, so the shots read as one.
     The two-column pages hang their text block from the top and left insets. */
  --listing-pitch-top: 176px;
  --listing-pitch-left: 80px;
  --listing-title-size: 76px;
}