/* 1. sobre (so-) */
.so-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "abre abre" "palco texto";
  column-gap: clamp(48px, 8vw, 140px);
  align-items: start;
  max-width: 1280px; margin: 0 auto;
}

/* abertura: OI + título numa faixa só */
.so-abre {
  grid-area: abre;
  display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(56px, 7vw, 104px);
}
.so-oi { display: flex; flex: none; margin-left: -6px; }
.so-oi .wf-peca { --peca: clamp(84px, 10vw, 148px); }
.so-oi .wf-peca text { font-size: 19px; }
.so-abre-texto { padding-bottom: 6px; }
.so-titulo { max-width: 15ch; }

/* foto com as anotações */
.so-palco { grid-area: palco; position: sticky; top: 9vh; padding: 56px 0 0; }
.so-quadro { position: relative; width: min(100%, 420px); margin: 0 auto; }
.so-foto { --placa-giro: -3deg; }
.so-corte { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.so-corte img { position: absolute; width: calc(558 / 490 * 100%); max-width: none; left: calc(-10 / 490 * 100%); top: calc(-92 / 490 * 100%); }
.so-notas { list-style: none; margin: 0; padding: 0; }
.so-nota {
  position: absolute; z-index: 2;
  font-family: var(--f-titulo); font-weight: 500; font-size: 1.02rem; line-height: 1.15; color: var(--bordo);
  padding: .5rem .85rem; border-radius: 10px; background: #fffaf7; box-shadow: var(--sombra-eva);
  rotate: var(--g, 0deg); max-width: 15ch; text-wrap: balance;
}
.so-nota::after {
  content: ""; position: absolute; width: 46px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30' fill='none' stroke='%23a62d58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c8 14 22 20 38 20'/%3E%3Cpath d='M34 17l7 7-8 4'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .8; rotate: var(--s, 0deg);
}
.so-nota--1 { left: -17%; top: -48px; --g: -4deg; }
.so-nota--1::after { left: 70%; top: 100%; --s: 10deg; }
.so-nota--2 { right: -19%; top: -18px; --g: 3deg; }
.so-nota--2::after { right: 60%; top: 100%; scale: -1 1; --s: -10deg; }
.so-nota--3 { left: -23%; top: 72%; --g: 2deg; }
.so-nota--3::after { left: 100%; top: -30%; --s: -20deg; }
.so-nota--4 { right: -23%; top: 84%; --g: -3deg; }
.so-nota--4::after { right: 100%; top: -40%; scale: -1 1; --s: 20deg; }
.so-nota--5 { left: 50%; bottom: -46px; translate: -50% 0; --g: -1.5deg; max-width: none; white-space: nowrap; }
.so-nota--5::after { display: none; }
.so-legenda { margin: 84px 0 0; text-align: center; font-size: var(--t-mini); color: rgb(84 77 71 / .9); }

/* a história em capítulos, ligados por um fio pontilhado */
.so-texto { grid-area: texto; position: relative; padding-left: 0; }
.so-texto::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 8px; width: 0;
  border-left: 2px dashed rgb(166 45 88 / .22);
}
.so-texto > :not(.so-cap) { margin-left: 64px; }
.so-cap {
  display: flex; align-items: center; gap: 20px;
  margin: clamp(40px, 4vw, 56px) 0 0;
  font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; color: var(--tinta);
}
.so-texto .so-cap:first-child { margin-top: 0; }
.so-cap .wf-peca { --peca: 44px; }
.so-texto .wf-texto { margin-top: .8rem; margin-bottom: 0; }
.so-cit { margin-top: 1.6rem; margin-bottom: 0; }
.so-cit p { font-size: clamp(1.1rem, .6vw + .8rem, 1.3rem); line-height: 1.5; color: var(--texto-forte); }

/* hoje, também mãe: uma carta, com a foto pousada na borda */
.so-maes {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); align-items: center;
  max-width: 1180px; margin: clamp(96px, 11vw, 168px) auto 0;
}
.so-carta {
  position: relative; grid-column: 1 / -1; grid-row: 1;
  padding: clamp(40px, 5vw, 72px) calc(330px + clamp(48px, 6vw, 96px)) clamp(40px, 5vw, 72px) clamp(32px, 5vw, 80px);
  border-radius: 28px;
  background: linear-gradient(160deg in oklab, #fffaf7, oklch(95% .03 12));
  box-shadow: var(--sombra-eva), 0 30px 60px -36px rgb(130 40 70 / .35);
}
.so-aspas {
  position: absolute; top: -.32em; left: clamp(20px, 4vw, 60px);
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(6rem, 10vw, 9rem); line-height: 1; color: var(--rosa-eva);
}
.so-carta .so-cap { margin-top: 0; }
.so-carta .so-cap .wf-peca { --peca: 44px; }
.so-maes-intro { margin: 1rem 0 1.4rem; color: var(--texto-forte); font-size: var(--t-corpo); max-width: 46ch; }
.so-cit-grande p { font-size: clamp(1.25rem, 1.3vw + .65rem, 1.7rem); line-height: 1.42; color: var(--texto-forte); }
.so-cit-grande p + p { margin-top: .9rem; }
.so-foto2 { grid-column: 2; grid-row: 1; z-index: 2; width: 100%; margin: 0 0 0 0; translate: clamp(10px, 3vw, 48px) 0; --placa-giro: 3deg; }

@media (max-width: 1200px) and (min-width: 961px) {
  .so-quadro { width: 76%; }
  .so-foto2 { translate: 0; }
}
@media (max-width: 960px) {
  .so-grade { grid-template-columns: 1fr; grid-template-areas: "abre" "palco" "texto"; }
  .so-abre { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 0; }
  .so-palco { position: relative; top: auto; max-width: 520px; width: 100%; margin: 40px auto 56px; }
  .so-maes { grid-template-columns: 1fr; }
  .so-foto2 { grid-column: 1; grid-row: 1; justify-self: center; width: min(66%, 280px); translate: 0; margin-bottom: -48px; }
  .so-carta { grid-row: 2; padding: 84px clamp(24px, 5vw, 56px) 40px; }
  .so-aspas { display: none; }
}
@media (max-width: 560px) {
  .so-oi .wf-peca { --peca: 82px; }
  .so-palco { padding: 0; margin: 40px auto 48px; }
  .so-quadro { width: 82%; }
  .so-notas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; margin-top: 34px; }
  .so-nota { position: static; translate: none; font-size: .95rem; max-width: none; white-space: normal; }
  .so-nota::after { display: none; }
  .so-legenda { margin-top: 14px; }
  .so-texto::before { display: none; }
  .so-texto > :not(.so-cap) { margin-left: 0; }
  .so-cap { gap: 14px; }
  .so-cap .wf-peca, .so-carta .so-cap .wf-peca { --peca: 36px; }
  .so-carta { border-radius: 22px; padding: 76px 22px 32px; }
}