/* ==========================================================================
   SOBRE — texto como protagonista, leitura que acende conforme avança
   ========================================================================== */

.about { padding: clamp(80px, 13vh, 160px) var(--margin) clamp(60px, 10vh, 120px); }

.about__grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.about__aside { grid-column: 1 / span 5; }
.about__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 4vh);
  padding-bottom: 4vh;
}
.about__title {
  font-size: clamp(44px, min(5.8vw, 11svh), 132px);
  font-weight: 860;
  font-variation-settings: "wdth" 66;
  line-height: .86;
  letter-spacing: -.008em;
  text-transform: uppercase;
  color: var(--paper);
}
.about__meter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 5vh, 56px);
  color: var(--muted-on-ink);
  font-size: var(--t-small);
}
.about__pw { width: 30px; height: 30px; color: var(--paper); }

.about__text {
  grid-column: 7 / span 6;
  padding-top: 16vh;
  padding-bottom: 10vh;
}
.about__p {
  max-width: 24ch;
  font-size: clamp(22px, min(2vw, 4.4svh), 40px);
  font-weight: 520;
  font-variation-settings: "wdth" 92;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--dim-on-ink);
  transition: color .8s var(--ease-out);
}
.about__p + .about__p { margin-top: 20vh; }
.about__p.is-active, .about__p.is-past { color: var(--paper); }
.about__p.is-past { color: #C9C7C0; }

/* Trechos-chave: um traço azul se desenha por baixo quando o parágrafo acende */
.about__p em {
  background: linear-gradient(var(--blue), var(--blue)) left 96% / 0% .09em no-repeat;
  transition: background-size 1s var(--ease-out) .15s;
  padding-bottom: .04em;
}
.about__p.is-active em, .about__p.is-past em { background-size: 100% .09em; }

/* O fechamento ganha corpo de título */
.about__verbs {
  display: block;
  margin-top: .5em;
  font-size: 1.45em;
  font-weight: 820;
  font-variation-settings: "wdth" 74;
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Sem JS: tudo aceso */
html:not(.js) .about__p { color: var(--paper); }
html:not(.js) .about__p em { background-size: 100% .09em; }

@media (max-width: 899px) {
  .about__aside, .about__text { grid-column: 1 / -1; }
  .about__sticky { position: relative; top: 0; }
  .about__text { padding-top: 8vh; padding-bottom: 4vh; }
  .about__p { max-width: 22ch; }
  .about__p + .about__p { margin-top: 12vh; }
  .about__meter { display: none; }
}