@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_opsz\,wght.woff2') format('woff2');
  font-weight: 300, 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  /*Spacing tokens*/
  --space-1: clamp(8px, 1vw, 12px);
  --space-2: clamp(12px, 1.5vw, 18px);
  --space-3: clamp(16px, 2vw, 24px);
  --space-4: clamp(14px, 3vw, 40px);
  --space-5: clamp(32px, 4vw, 56px);

  /*Container padding*/
  --page-pad: clamp(16px, 4vw, 56px);

  /*Fluid type tokens*/
  --nav-size: clamp(16px, 1.6vw, 26px);
  --logo-pad: clamp(4px, .25vw, 8px);
  --logo-primal: clamp(24px, 2.8vw, 40px);
  --logo-cosmetics: clamp(14px, 2vw, 28px);

  --hero-title: clamp(30px, 4vw, 64px);
  --hero-subtitle: clamp(18px, 1.5vw, 45px);

  --social-bar: clamp(16px, 1.8vw, 30px);

  --product-card: clamp(240px, 24vw, 400px); 
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

body, html {
  height: 100%;
  background-color: #FFFFFF;
}

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-serif);
  font-style: normal;
  color: #A80000;
  width: 100%;
  height: auto;
  background-color: #FFE6E6;
}

.logo-group {
  display: flex;
  flex-direction: column;
  /*padding-left: var(--page-pad);*/
  padding: var(--logo-pad);
}

#primal-text {
  font-size: var(--logo-primal);
  line-height: 0.9;
}

#cosmetics-text {
  font-family: var(--font-sans);
  font-weight: 100;
  font-size: var(--logo-cosmetics);
}

.nav-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: row;
  width: 60%;
  align-items: center;
  overflow: hidden;
  gap: clamp(16px, 6vw, 120px);
  font-weight: 400;
  font-size: var(--nav-size);

}

.home span:hover,
.products span:hover,
.contact span:hover {
  color: #E95B87;
}

.hero {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  height: 55vh;
  width: 100%;
  padding-left: var(--page-pad);
  font-family: var(--font-serif);
  background-color: #FFFFFF;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(360px, 38vw, 640px);
  height: 120%;
  transform: translateY(-10%) translateX(-25%) scale(1.5);
  background-image: url('./assets/floral-bg-none.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 500;
}

#htext-l1, #htext-l2 {
  font-size: var(--hero-title);
}

#htext-l2 {
  line-height: 0.8;
}

#htext-l3 {
  padding-top: var(--space-4);
}

#htext-l3, #htext-l4 {
  font-size: var(--hero-subtitle);
  font-weight: 400;
}

.social-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: clamp(1.5vh, 3vh, 4vh);
  font-family: var(--font-serif);
  font-size: 1.25em;
  background-color: #FFE6E6;
}

.product-carousel {
  display: flex;
  flex-direction: row;
  height: auto;
  width: 100%;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-1);
  padding: var(--space-4);
  width: var(--product-card);
  border-radius: 12px;
  background-color: #FFE6E6;
}

.product-img {
  width: 100%;
}

@media (max-width: 640px) {
  :root {
    --nav-pad: clamp(4px, .25vw, 8px);
  }

  .banner { 
    flex-direction: column;
  }

  .logo-group {
    align-items: center;
  }

  .nav {
    align-items: center;
    padding-bottom: var(--nav-pad);
  }
}