/* Section intro: a small eyebrow naming the section, a big heading, a short paragraph, then the buttons.
   The pattern Christopher picked from biograph.com.

   <div class="intro">
     <p class="intro__eyebrow">About Dr. Beran</p>
     <h2 class="intro__title">A heading that says the one thing</h2>
     <p class="intro__text">One or two sentences.</p>
     <div class="intro__actions"><a class="button" href="#contact">Get in touch</a></div>
   </div>
   On graphite, add intro--dark. */

.intro {
  display: grid;
  justify-items: start;
  max-width: var(--text-w);
}

.intro__eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-accent-text);
}

.intro__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-h1);
}

.intro__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
}

.intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.intro--dark .intro__eyebrow { color: var(--c-accent); }
.intro--dark .intro__text { color: var(--c-on-dark-muted); }