/* ---------------------------- CUSTOM STYLES ---------------------------- */
:root {
  /* Colors */
  --primary: #e84848;
  --accent: #e8ba48;
  --black: #111111;
  --white: #fefefe;
  --gray: #808080;
  --selection: rgba(232, 72, 72, 0.9);
  /* Fonts */
  /* base */
  --base-font: "greycliff-cf", sans-serif;
  --base-size: 1rem;
  --base-weight: 300;
  /* titles */
  --title: "owners-wide", sans-serif;
  --h1: 2.5rem;
  --h2: 2rem;
  --h3: 2.5rem;
  --h4: 1.2rem;
  --h5-size: 1rem;
  --h5-weight: 500;
  /* texts */
  --quote-size: 2.125rem;
  --quote-weight: 400;
  --small: .8rem;
}

@media screen and (min-width: 768px) {
  :root {
    /* Colors */
    --primary: #e84848;
    --accent: #e8ba48;
    --black: #111111;
    --white: #fefefe;
    --gray: #808080;
    --selection: rgba(232, 72, 72, 0.9);
    /* Fonts */
    /* base */
    --base-font: "greycliff-cf", sans-serif;
    --base-size: 1rem;
    --base-weight: 300;
    /* titles */
    --title: "owners-wide", sans-serif;
    --h1: 6rem;
    --h2: 4.5rem;
    --h3: 2.5rem;
    --h4: 1.5rem;
    --h5-size: 1.2rem;
    --h5-weight: 500;
    /* texts */
    --quote-size: 3.125rem;
    --quote-weight: 400;
    --small: .8rem;
  }
}

/* ---------------------------- NORMALIZE & TWEAKS ---------------------------- */
/* ------ Main ------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--base-font);
  font-size: var(--base-size);
  background-color: var(--black);
  font-weight: var(--base-weight);
  color: var(--white);
  background-color: var(--black);

  margin: 0;
}
body > *:not(:nth-child(2)):not(div.side-cta) {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--black);
}

.no-scroll {
  overflow: hidden;
}

p {
  margin: 0;
}
p:not(blockquote p ) {
  line-height: 120%;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--white);
}

textarea {
  resize: none;
}

blockquote {
  margin: 0;
}
blockquote > * {
  font-size: var(--quote-size);
  font-weight: var(--quote-weight);
}

/* ------ Titles ------ */
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

h1 {
  font-family: var(--title);
  font-size: var(--h1);
  line-height: 100%;
}
h2 {
  font-family: var(--title);
  font-size: var(--h2);
}
h3 {
  font-family: var(--title);
  font-size: var(--h3);
}
h4 {
  font-family: var(--title);
  font-size: var(--h4);
  text-transform: uppercase;
}
h5 {
  font-family: var(--base-font);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  text-transform: uppercase;
  color: var(--gray);
}

h1::after,
h2::after,
h2::after,
.quote::after {
  content: "■";
  font-size: 1.2rem;
  color: var(--white);
}
h1::after,
h2::after,
h3::after {
  margin-left: .5rem;
}
.quote::after {
  margin-left: .3rem;
}
@media screen and (min-width: 768px) {
  h1::after,
  h2::after,
  h2::after,
  .quote::after {
    font-size: 2rem;
  }
  h1::after,
  h2::after,
  h3::after {
    margin-left: 1rem;
  }
  .quote::after {
    margin-left: .5rem;
  }
}

/* ------ Menu ------ */
.social-nav span,
.social-nav span {
  display: none;
}