html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

@font-face {
  font-family: 'Prolinea';
  src: url('../fonts/ProlineaDemo-ExtraBlack-repaired.woff2') format('woff2'),
       url('../fonts/ProlineaDemo-ExtraBlack-repaired.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Medium.woff2') format('woff2'),
       url('../fonts/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Bold.woff2') format('woff2'),
       url('../fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Black.woff2') format('woff2'),
       url('../fonts/Outfit-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mother';
  src: url('../fonts/mother.woff2') format('woff2'),
       url('../fonts/mother.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  src: url('../fonts/CrimsonPro-Italic-VariableFont_wght.woff2') format('woff2'),
       url('../fonts/CrimsonPro-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat-SemiBold.woff2') format('woff2'),
       url('../fonts/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-ink:    #111111;
  --color-ivory:  #F7F5EF;
  --color-paper:  #FFFFFF;
  --color-pink:   #FF5AC1;
  --color-blue:   #0A7FFF;
  --color-cherry: #E8112D;
  --color-muted:  #55524A;

  --color-pink-bright: #FF8FD5;
  --color-pink-lift:   #FFADE0;

  --font-display: 'Prolinea', 'Arial Black', sans-serif;

  --font-body: 'Outfit', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --weight-body: 500;

  --font-mono: 'Mother', 'Courier New', monospace;

  --font-quote: 'Crimson Pro', Georgia, serif;
  --weight-quote: 500;

  --font-correction: 'Caveat', cursive;
  --weight-correction: 600;

  --size-body: 15px;
  --size-button-label: 13px;
}

.band-white {
  --band-background:     var(--color-ivory);
  --band-text:           var(--color-ink);
  --band-text-secondary: var(--color-muted);
  --band-text-body:      var(--color-ink);
  --band-kicker:         var(--color-cherry);
  --band-kicker-dot:     var(--color-cherry);
  --band-accent:         var(--color-cherry);
  --band-accent-text:    var(--color-cherry);
  --band-button-bg:      var(--color-cherry);
  --band-button-text:    #FFFFFF;
}

.band-pink {
  --band-background:     var(--color-pink);
  --band-text:           #FFFFFF;
  --band-text-secondary: rgba(255, 255, 255, 0.88);
  --band-text-body:      var(--color-ink);
  --band-kicker:         #FFFFFF;
  --band-kicker-dot:     var(--color-blue);
  --band-accent:         #FFFFFF;
  --band-accent-text:    #FFFFFF;
  --band-button-bg:      var(--color-ink);
  --band-button-text:    #FFFFFF;
}

.band-blue {
  --band-background:     var(--color-blue);
  --band-text:           #FFFFFF;
  --band-text-secondary: rgba(255, 255, 255, 0.88);
  --band-text-body:      #FFFFFF;
  --band-kicker:         #FFFFFF;
  --band-kicker-dot:     var(--color-pink);
  --band-accent:         var(--color-pink-bright);
  --band-accent-text:    var(--color-pink-lift);
  --band-button-bg:      #FFFFFF;
  --band-button-text:    var(--color-blue);
}

.band-cherry {
  --band-background:     var(--color-cherry);
  --band-text:           #FFFFFF;
  --band-text-secondary: rgba(255, 255, 255, 0.88);
  --band-text-body:      #FFFFFF;
  --band-kicker:         #FFFFFF;
  --band-kicker-dot:     var(--color-pink);
  --band-accent:         var(--color-pink-bright);
  --band-accent-text:    var(--color-pink-lift);
  --band-button-bg:      #FFFFFF;
  --band-button-text:    var(--color-cherry);
}

.band-white,
.band-pink,
.band-blue,
.band-cherry {
  background: var(--band-background);
  color: var(--band-text);
}