/* so · Quem pinta */
.so { padding-bottom: 0; }
.so-grade {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-areas: "topo topo" "retrato texto" "retrato jeitos";
  column-gap: clamp(32px, 6vw, 104px);
  max-width: 1320px; margin: 0 auto;
}

/* retrato dentro da pincelada, de pé na base da seção */
.so-retrato { grid-area: retrato; position: relative; margin: 0; align-self: end; }
.so-tinta { position: absolute; inset: 0; pointer-events: none; }
.so-tinta span { position: absolute; display: block; }
.so-tinta-a {
  inset: 14% -16% 10% -22%;
  background: var(--malha-funda);
  -webkit-mask: url(../img/pincel-largo.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-largo.png) center / 100% 100% no-repeat;
}
.so-tinta-b {
  left: -30%; right: -4%; top: 66%; height: 15%;
  background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-1.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-1.png) center / 100% 100% no-repeat;
  transform: rotate(-4deg);
  opacity: .95;
}
.so-retrato img {
  position: relative; display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent);
}
.so-assina {
  position: absolute; left: 50%; bottom: clamp(18px, 3vw, 40px); transform: translateX(-50%);
  z-index: 2; width: max-content; max-width: 90%; text-align: center;
  font-family: var(--f-display); font-variation-settings: "opsz" 40; font-size: 1.3rem; color: #fff;
}
.so-assina span {
  display: block; margin-top: .25rem;
  font-family: var(--f-texto); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #e6e5fb;
}

/* gesto: as duas pinceladas se pintam atrás dela */
.js .so-tinta span { clip-path: inset(0 100% 0 0); }
.js .so-retrato.wf-visto .so-tinta span { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.6, 0, .2, 1); }
.js .so-retrato.wf-visto .so-tinta-b { transition-delay: .45s; }

/* texto */
.so-topo { grid-area: topo; margin-bottom: clamp(28px, 4vw, 56px); }
.so-h2 { font-size: clamp(3rem, 7.4vw, 7.6rem); line-height: .9; }
.so-texto { grid-area: texto; min-width: 0; }
.so-abre {
  margin: 0 0 1rem; max-width: 30rem;
  font-family: var(--f-display); font-variation-settings: "opsz" 18;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.28; color: var(--indigo);
}
.so-ficha {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 2.2rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in oklab, var(--pervinca) 60%, transparent);
}
.so-ficha dt {
  font-family: var(--f-display); font-variation-settings: "opsz" 100; font-weight: 380;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; color: var(--indigo);
}
.so-ficha dd { margin: .5rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--texto-suave); }

/* dois jeitos de atender */
.so-jeitos {
  grid-area: jeitos; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto auto; gap: 18px clamp(20px, 3vw, 44px);
  margin-top: clamp(48px, 6vw, 84px); padding-bottom: var(--secao-y);
}
.so-estudio { grid-row: 1 / span 2; margin: 0; }
.so-estudio img { display: block; width: 100%; height: auto; box-shadow: var(--sombra); }
.so-jeito { min-width: 0; font-size: .95rem; line-height: 1.55; color: var(--texto-suave); }
.so-jeito p { margin: 0; }
.so-num {
  margin-bottom: .35rem !important;
  font-family: var(--f-display); font-variation-settings: "opsz" 40; font-weight: 450;
  font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--indigo-noite);
}
.so-jeito-1 { align-self: end; }
.so-num { display: flex; align-items: center; gap: .55em; }
.so-num::before {
  content: ""; flex: none; width: 34px; height: 10px;
  background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-2.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-2.png) center / 100% 100% no-repeat;
}
.so-voz { margin: .9rem 0 0; padding-left: 1rem; border-left: 2px solid var(--pervinca); }
.so-voz p {
  font-family: var(--f-display); font-variation-settings: "opsz" 18; font-size: 1.12rem; line-height: 1.38; color: var(--indigo);
}
.so-estudio figcaption { margin-top: .7rem; font-size: .8rem; line-height: 1.45; letter-spacing: .02em; color: var(--texto-suave); }
.so-casa { margin: 0 0 1rem; width: min(100%, 260px); }
.so-casa img { display: block; width: 100%; height: auto; box-shadow: var(--sombra); }

@media (max-width: 899px) {
  .so-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "retrato" "texto" "jeitos"; }
  .so-topo { margin-bottom: 0; }
  .so-h2 { font-size: clamp(3rem, 13vw, 4.6rem); }
  .so-retrato { width: min(84vw, 420px); margin: 8px auto 0; }
  .so-assina span { letter-spacing: .1em; font-size: .7rem; color: #e6e5fb; }
  .so-retrato img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent), linear-gradient(180deg, #000 80%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent), linear-gradient(180deg, #000 80%, transparent);
            mask-composite: intersect;
  }
  .so-assina { bottom: 14%; }
  .so-ficha { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .so-ficha > div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: baseline; padding: .7rem 0; border-bottom: 1px solid color-mix(in oklab, var(--pervinca) 35%, transparent); }
  .so-ficha dt { font-size: 2rem; }
  .so-ficha dd { margin: 0; font-size: .9rem; }
  .so-jeitos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; padding-top: 48px; }
  .so-estudio { grid-row: auto; grid-column: 1 / -1; }
  .so-estudio img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
  .so-jeito-1 { grid-column: 1 / -1; }
  .so-jeito-2 { grid-column: 1 / -1; display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 16px; }
  .so-casa { grid-row: 1 / span 2; margin: 0; width: 100%; }
}