@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@400;500;600;700;800&display=swap');

:root {
  --color-black: #17213f !important;
  --color-red: #17213f !important;
  --color-cream: #d9eefc !important;
  --color-white: #d9eefc !important;
  --saeba-ink: #17213f;
  --saeba-paper: #d9eefc;
  --saeba-sage: #8f9c72;
  --saeba-clay: #bd7253;
}

html,
body {
  background: var(--saeba-paper) !important;
  color: var(--saeba-ink) !important;
  font-family: 'Jost', Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body * {
  letter-spacing: 0 !important;
}

#header {
  color: var(--saeba-paper) !important;
}

#header > div {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

#header > div > a:first-child svg {
  display: none !important;
}

#header > div > a:first-child::before {
  content: 'SAEBA.';
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3.2vw, 3.15rem);
  font-weight: 700;
  line-height: .82;
  color: currentColor;
}

#header li a::before,
#header li a::after {
  content: none !important;
}

#theme-switcher {
  display: none !important;
}

main#page > div:first-child > div.mt-26 {
  margin-top: clamp(5.8rem, 9vw, 8.2rem) !important;
}

main#page > div:first-child > div.mt-26 > div.relative > svg.mb-6 {
  display: none !important;
}

main#page > div:first-child > div.mt-26 > div.relative::before {
  content: 'SAEBA.';
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(5.4rem, 23vw, 22rem);
  font-weight: 700;
  line-height: .72;
  color: var(--saeba-ink);
  margin-bottom: clamp(1rem, 2vw, 2rem);
}

main#page p,
main#page a,
main#page li,
footer p,
footer a {
  font-family: 'Jost', Arial, sans-serif !important;
}

main#page p[class*='tracking-tight'],
footer p[class*='tracking-tight'] {
  max-width: 62ch;
}

main#page a[href='https://www.hellohello.is'] {
  font-size: 0 !important;
}

main#page a[href='https://www.hellohello.is']::after {
  content: 'VISIT SAEBA';
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 700;
}

main#page a[href='https://www.hellohello.is'] svg,
footer a[href='https://www.hellohello.is'] svg {
  display: none !important;
}

footer a[href='https://www.hellohello.is']::before {
  content: 'SAEBA.';
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
}

main#page section a,
main#page [href*='/product/'] {
  color: var(--saeba-ink) !important;
}

main#page [class*='bg-current'],
footer [class*='bg-current'] {
  background-color: currentColor !important;
}

main#page [class*='text-[#5A5A5A]'],
footer [class*='text-[#5A5A5A]'] {
  color: var(--saeba-clay) !important;
}

html.has-custom-cursor,
html.has-custom-cursor body {
  cursor: auto !important;
}

html.has-custom-cursor body > div.pointer-events-none.fixed.top-0.left-0.z-\[9999\].transition-opacity.duration-200.ease-in-out.will-change-transform {
  display: none !important;
}

::selection {
  background: var(--saeba-clay) !important;
  color: var(--saeba-paper) !important;
}

@media (max-width: 767px) {
  #header > div {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  main#page > div:first-child > div.mt-26 > div.relative::before {
    font-size: clamp(4.8rem, 25vw, 8rem);
    line-height: .78;
  }
}

@media (min-width: 1024px) {
  #header > div {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}