:root {
  --col-verde: #365A2E;
  --col-perla: #ECE5DA;
  --col-terra: #5A3E35;
  --col-oro: #CAAA6A;
  --col-corallo: #B86D51;
  --col-arancio: #C25828;
  --col-mattone: #8A3B14;
  --col-avorio: #F4E9DD;
  --col-beige: #DAC1A0;
  --col-rame: #A5452D;
  --col-marino: #98AC9F;
  --col-acqua: #9FC4BB;
  --col-pietra: #FBF7F2;
  --col-selciato: #D2CBC1;
  --col-corda: #BEAF9D;
  --col-white: #FFFFFF;
  --col-black: #000000;
  --ff-serif: "Playfair Display", serif;
  --ff-sans: "Futura PT", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --radius-pill: 999px;
  --border-1: 1px;
  --border-2: 2px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.2s;
}

.st-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

.st-text-verde {
  color: var(--col-verde);
}
.st-text-perla {
  color: var(--col-perla);
}
.st-text-terra {
  color: var(--col-terra);
}
.st-text-oro {
  color: var(--col-oro);
}
.st-text-corallo {
  color: var(--col-corallo);
}

.st-text-arancio {
  color: var(--col-arancio);
}
.st-text-mattone {
  color: var(--col-mattone);
}
.st-text-avorio {
  color: var(--col-avorio);
}
.st-text-beige {
  color: var(--col-beige);
}
.st-text-rame {
  color: var(--col-rame);
}

.st-text-marino {
  color: var(--col-marino);
}
.st-text-acqua {
  color: var(--col-acqua);
}
.st-text-pietra {
  color: var(--col-pietra);
}
.st-text-selciato {
  color: var(--col-selciato);
}
.st-text-corda {
  color: var(--col-corda);
}

.st-text-white {
  color: var(--col-white);
}
.st-text-black {
  color: var(--col-black);
}

.st-bg-verde {
  background-color: var(--col-verde);
}
.st-bg-perla {
  background-color: var(--col-perla);
}
.st-bg-terra {
  background-color: var(--col-terra);
}
.st-bg-oro {
  background-color: var(--col-oro);
}
.st-bg-corallo {
  background-color: var(--col-corallo);
}

.st-bg-arancio {
  background-color: var(--col-arancio);
}
.st-bg-mattone {
  background-color: var(--col-mattone);
}
.st-bg-avorio {
  background-color: var(--col-avorio);
}
.st-bg-beige {
  background-color: var(--col-beige);
}
.st-bg-rame {
  background-color: var(--col-rame);
}

.st-bg-marino {
  background-color: var(--col-marino);
}
.st-bg-acqua {
  background-color: var(--col-acqua);
}
.st-bg-pietra {
  background-color: var(--col-pietra);
}
.st-bg-selciato {
  background-color: var(--col-selciato);
}
.st-bg-corda {
  background-color: var(--col-corda);
}

/* Background - Base */
.st-bg-white {
  background-color: var(--col-white);
}
.st-bg-black {
  background-color: var(--col-black);
}

.st-border-verde {
  border-color: var(--col-verde);
}
.st-border-perla {
  border-color: var(--col-perla);
}
.st-border-terra {
  border-color: var(--col-terra);
}
.st-border-oro {
  border-color: var(--col-oro);
}
.st-border-corallo {
  border-color: var(--col-corallo);
}

.st-border-arancio {
  border-color: var(--col-arancio);
}
.st-border-mattone {
  border-color: var(--col-mattone);
}
.st-border-avorio {
  border-color: var(--col-avorio);
}
.st-border-beige {
  border-color: var(--col-beige);
}
.st-border-rame {
  border-color: var(--col-rame);
}

.st-border-marino {
  border-color: var(--col-marino);
}
.st-border-acqua {
  border-color: var(--col-acqua);
}
.st-border-pietra {
  border-color: var(--col-pietra);
}
.st-border-selciato {
  border-color: var(--col-selciato);
}
.st-border-corda {
  border-color: var(--col-corda);
}

/* Border color - Base */
.st-border-white {
  border-color: var(--col-white);
}
.st-border-black {
  border-color: var(--col-black);
}

.st-font-serif {
  font-family: var(--ff-serif);
}

.st-font-sans {
  font-family: var(--ff-sans);
}

html {
  font-family: var(--ff-sans);
  color: var(--col-terra);
  overflow-x: hidden;
}

body {
  opacity: 0.01;
  animation: fadeIn 0.8s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  margin: 0;
}
p {
  margin: 0;
}

/* Mobile-first: base sizes (< 768px) */
.st-h1-special {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 46px;
}

h1, .st-h1 {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
}

h2, .st-h2 {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
}

h3, .st-h3 {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
}

/* Titolo H4 */
h4, .st-h4 {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body, .body, .st-body-primary {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  margin: 0;
  overflow-x: hidden;
}

.menu-voice {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Desktop: sizes from 768px up */
@media (min-width: 768px) {
  .st-h1-special {
    font-size: 70px;
    line-height: 80px;
  }

  h1, .st-h1 {
    font-size: 48px;
    line-height: 54px;
  }

  h2, .st-h2 {
    font-size: 36px;
    line-height: 42px;
  }

  h3, .st-h3 {
    font-size: 28px;
    line-height: 32px;
  }

  h4, .st-h4 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 3px;
  }

  body, .body, .st-body-primary {
    font-size: 18px;
    line-height: 24px;
  }

  .menu-voice {
    font-size: 36px;
    letter-spacing: 1px;
  }
}

.round-pill {
  border-radius: var(--radius-pill);
}
.st-border-1 {
  border-width: var(--border-1);
  border-style: solid;
}
.st-border-2 {
  border-width: var(--border-2);
  border-style: solid;
}