/* ==========================================================================
   SAVITRY GREENS - TYPOGRAPHY & HEADING HIERARCHY
   Matching exact sizes from html-site/index.html
   ========================================================================== */
body {
  font-family: var(--sg-font-sans);
  color: var(--sg-color-text-main);
  background-color: var(--sg-color-bg-white);
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
.font-serif {
  font-family: var(--sg-font-serif);
}

.section-tag {
  font-family: var(--sg-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--sg-color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}

.section-heading {
  font-family: var(--sg-font-serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--sg-color-text-main);
  line-height: 1.15;
}

@media (max-width: 768px) {
  .section-heading {
    font-size: 28px;
  }
}

.site-container {
  max-width: var(--sg-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .site-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}