:root {
  font-size: 14px;

  /*
   Minimum font-size 12px to avoid Lighthouse warnings
   */
  --text-xs: max(0.85rem, 12px); /* 12px */
  --text-sm: max(0.85rem, 12px); /* 12px */
  --text-base: 1rem; /* 14px */
  --text-lg: 1.125rem; /* 16px */
  --text-xl: 1.57rem; /* 22px */
  --text-2xl: 2rem; /* 28px */
  --text-3xl: 2.57rem; /* 36px */
  --text-4xl: 4.14rem; /* 58px */

  --font-body: "Space Grotesk", arial;
  --font-headline: "Grauna-Negra", "Impact";

  --leading-header: 0.9;
  --leading-normal: 1.3;

  --color-primary-600: #7b7b7b;
  --color-primary-500: #1f1f1f;
  --color-primary-400: #575757;
  --color-primary-300: #facccd;
  --color-primary-200: #fbdada;
  --color-background: #f3ebe8;
  --color-background-light: #fffaf8;
  --color-background-dark: #ecdfda;
  --color-background-600: #e1cfc8;
  --color-white: white;
  --color-black: black;

  /* Old variables */
  --color-red-500: #ff1a38;
  --color-primary: #000;
  --color-primary-light: #f9c3c4;
  --color-primary-dark: #cc001b;
  --color-neutral: #f3ebe8;
  --color-neutral-light: #fffbfa;
  --color-neutral-dark: #ecdfda;

  --spacer-supertiny: 0.125rem;
  --spacer-tiny: 0.25rem;
  --spacer-xs: 0.5rem;
  --spacer-sm: 1rem;
  --spacer-md: 1.5rem;
  --spacer-lg: 2.625rem;
  --spacer-xl: 3.5rem;
  --spacer-2xl: 6rem;
  --spacer-3xl: 9rem;
  --spacer-4xl: 14rem;
  --spacer-5xl: 18rem;

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  --opacity-disabled: 0.3;

  --drop-shadow-sm: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.1));
  --drop-shadow-lg: drop-shadow(0 -12px 40px hsla(0, 0%, 0%, 0.1));

  --grid-max-width: 3000px;
  --grid-column-gap: 1rem;
  --grid-row-gap: var(--spacer-md);

  --width-prose: 65ch;
  --width-content: 85rem;
  --width-hero-content: 60%;
  --width-hero-content-small: 45.8%;
}

@media (min-width: 939px) {
  :root {
    font-size: 16px;
    --text-xs: max(0.75rem, 12px); /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 2.25rem; /* 36px */
    --text-2xl: 3rem; /* 48px */
    --text-3xl: 4rem; /* 64px */
    --text-4xl: 8rem; /* 128px */

    --leading-normal: 1.4;
    --leading-tight: 1;
    --grid-max-width: 3000px;
    --grid-column-gap: 3rem;
    --width-prose: 50%;
  }
}

@media screen and (min-width: 1441px) {
  :root {
    --text-4xl: 9.25rem; /* 148px */
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --text-4xl: 11rem; /* 176px */
  }
}

@media screen and (min-width: 2560px) {
  :root {
    font-size: 1.125rem; /* 18px */
    --text-base: 1.125rem; /* 20px */
    --text-4xl: 12.5rem; /* 225px */
    --width-prose: 65ch;
  }
}

@font-face {
  font-family: "Grauna-Negra";
  src: url("/webfonts/grauna.woff2") format("woff2"),
    url("/webfonts/grauna.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/webfonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/webfonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/webfonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/webfonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  background-color: var(--color-background);
  color: var(--color-primary-500);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@media screen and (min-width: 939px) {
  body {
    border: 0; /* Force remove red borders from production build */
  }
}

body .customize-modal,
html .customize-modal {
  height: 100%;
}

.container {
  display: grid;
  grid-template-columns: 1fr calc(100% - 2rem) 1fr;
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
  padding-bottom: var(--grid-row-gap);
}

.container.container__tight {
  --grid-row-gap: var(--spacer-xs);
}

.container > * {
  grid-column: 2;
}

.container .full-bleed {
  width: 100%;
  grid-column: 1 / -1;
}

.prose {
  max-width: 85ch;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose :is(ul, ol) {
  list-style: initial;
  margin-left: 2rem;
  margin-right: 2rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  line-height: 0.84;
  font-weight: 700;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  text-transform: uppercase;
  font-family: var(--font-headline);
  font-weight: 400;
  color: var(--color-red-500);
}

h1,
.h1 {
  font-size: var(--text-4xl);
}

h2,
.h2 {
  font-size: var(--text-3xl);
}

h3,
.h3 {
  font-size: var(--text-3xl);
}

h4,
.h4 {
  font-size: var(--text-xl);
}

h5,
.h5,
h6,
.h6 {
  font-size: 18px;
}

.p {
  font-size: var(--text-base);
}

small {
  font-size: var(--text-sm);
  display: inline-block;
}

a {
  color: inherit;
  text-decoration: none;
}

a.underline {
  text-decoration: underline;
}

a:hover,
a:active {
  text-decoration: underline;
}

hr {
  border: none;
  padding: 0;
  margin: 0;
  height: 3px;
  background: var(--color-primary-500);
}

button,
input,
textarea,
::placeholder {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border-radius: 0px;
  -webkit-border-radius: 0px;
}

textarea {
  padding: var(--spacer-sm);
  resize: vertical;
}

button:not(:disabled) {
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-size: 16px;
  background: transparent;
  margin-right: var(--spacer-tiny);
  border: none;
  border-bottom: 1px solid var(--color-background-600);
  line-height: 1.8;
  color: var(--color-primary-500);
}

textarea {
  border: 1px solid var(--color-background-600);
}

:is(input[type="text"], input[type="email"], input[type="password"], textarea)::placeholder {
  color: var(--color-primary-500);
  opacity: 0.4;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  margin: 0;
  background-color: var(--color-background);
  border-radius: 3px;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-primary-500);
}

:is(input[type="checkbox"], input[type="radio"]):checked {
  background-color: var(--color-primary-500);
}

@media (min-width: 640px) {
  .container > .sm\:no-full-bleed {
    grid-column: 2;
  }
}

@media (min-width: 939px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    border-color: var(--color-primary-500);
  }
}

.badge {
  background: var(--color-background-light);
  color: var(--color-primary-500);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: var(--spacer-tiny) var(--spacer-xs);
}

.badge.special-edition {
  background-color: var(--color-primary-500);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media (min-width: 939px) {
  .badge {
    font-size: var(--text-sm);
  }

  .badge.special-edition {
    font-size: var(--text-xs);
  }

  .container {
    grid-template-columns: 1fr calc(100% - 6rem) 1fr;
    --grid-row-gap: var(--spacer-lg);
    padding-bottom: var(--spacer-lg);
  }

  .container.container__tight {
    --grid-row-gap: var(--spacer-sm);
  }

  .md\:h1 {
    font-size: var(--text-4xl);
  }

  .md\:h2 {
    font-size: var(--text-3xl);
  }

  .md\:h3 {
    font-size: var(--text-2xl);
  }

  .md\:h4 {
    font-size: var(--text-xl);
  }

  .md\:h5,
  .md\:h6 {
    font-size: var(--text-lg);
  }
}

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

@media (min-width: 1240px) {
  .container {
    --grid-row-gap: var(--spacer-xl);
  }

  .container.container__tight {
    --grid-row-gap: 0;
  }

  .container > .lg\:no-full-bleed {
    grid-column: 2;
  }
  .container > .lg\:left-bleed {
    grid-column: 1/3;
  }
}

@media (min-width: 1441px) {
  .container > .xl\:no-full-bleed {
    grid-column: 2;
  }
}

@media (min-width: 3096px) {
  .container {
    grid-template-columns: 1fr var(--grid-max-width) 1fr;
  }
}