/* Cabeçalhos de seção: um único tamanho para todos. O nome da seção é o título (vinho, com barra
   dourada como marco) e a frase vira subtítulo. Carrega por último para ganhar os empates. */
:root {
  --section-title: clamp(2.25rem, 3.7vw, 3.75rem);
  --section-subtitle: clamp(1.25rem, 1.7vw, 1.5rem);
}

h2.section-name {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--section-title);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--wine);
  text-wrap: balance;
  grid-area: auto;
}

h2.section-name::before {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-bottom: 1.15rem;
  border-radius: 2px;
  background: var(--gold);
}

p.section-line {
  margin: .9rem 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--section-subtitle);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
  grid-area: auto;
}

p.section-line em { font-style: italic; color: var(--muted); }

/* Experiências: nome, frase e chamada empilhados; a chamada volta ao tamanho de texto. */
#experiencias .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
#experiencias .section-head h2.section-name { font-size: var(--section-title); }
#experiencias .section-head .lede {
  margin: .6rem 0 0;
  font: 400 1rem/1.5 var(--font-body);
  letter-spacing: 0;
  color: var(--muted);
}

/* Assinaturas: nome à esquerda, acesso de membro à direita, na mesma altura. */
.plans-head h2.section-name { grid-area: eyebrow; }
.plans-head p.section-line { grid-area: title; margin-top: .6rem; max-width: 44ch; }
.plans-head .member-access { align-self: end; margin: 0; }

@media (max-width: 600px) {
  .plans-head {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "summary" "access";
  }
  .plans-head .lede { grid-area: summary; margin-top: .6rem; }
  .plans-head .member-access { justify-self: start; margin-top: .3rem; font-size: .84rem; }
}