/* Shared type scale. Sizes use rem so browser text-size preferences still work.
   Mobile / tablet / desktop: body 16 / 16 / 16, headings 24 / 28 / 32,
   hero 28 / 32 / 36, hero links 20 / 24 / 28 pixels at the default root size. */
:root {
  --text-small: .875rem;
  --text-body: 1.1rem;
  --text-lead: 1.125rem;
  --text-heading: 1.5rem;
  --text-card: 1.5rem;
  --text-hero: 1.75rem;
  --text-hero-link: 1.25rem;
}

@media (min-width: 769px) {
  :root {
    --text-heading: 1.75rem;
    --text-hero: 2rem;
    --text-hero-link: 1.5rem;
  }
}

@media (min-width: 1025px) {
  :root {
    --text-lead: 1.25rem;
    --text-heading: 2rem;
    --text-card: 1.75rem;
    --text-hero: 2.25rem;
    --text-hero-link: 1.75rem;
  }
}

/* Only sizes belong here; fonts, weights, spacing and layout stay in styles.css. */
body,
#project {
  font-size: var(--text-body);
}

#main div>p,
#phases ul li p,
#phases ul li div section label,
#testimonials h5,
#testimonials label,
#project span label,
.content label,
.content ul li label,
.content ol,
.content .tech li,
#subc,
#subc label,
#main #footer p {
  font-size: var(--text-body);
}

#main div h3 {
  font-size: var(--text-heading);
}

#main div .subhead {
  font-size: var(--text-lead);
}

#main #service li h3,
#main #product li h3,
#main #client li h3 {
  font-size: var(--text-card);
}

.hero>label {
  font-size: var(--text-hero);
}

.hero-description {
  font-size: var(--text-lead);
}

#hero .subabout a {
  font-size: var(--text-hero-link);
}

#menu ul li,
#menu a {
  font-size: var(--text-body);
}

#project span input,
#project span textarea,
#project span button {
  font-size: var(--text-body);
}

#subc label small {
  font-size: var(--text-small);
}