/* so · Quem é a tia Yasmim */
.so { --m1: var(--lilas-nevoa); --m2: var(--manteiga); --m3: var(--rosa-nevoa); --m4: var(--pessego); }
.so-grade { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 6vw, 104px); align-items: center; }

/* retrato: a cabeça sai do painel, o corpo fica dentro */
.so-figura { grid-column: 2; grid-row: 1; position: relative; margin: 0; padding-top: clamp(56px, 8vw, 120px); }
.so-painel { position: relative; aspect-ratio: 1080 / 1000; border-radius: 28px;
  background: radial-gradient(circle at 42% 28%, oklch(96% .055 95), var(--manteiga) 62%, oklch(88% .07 88));
  clip-path: inset(-60% 0 0 0 round 28px); }
.so-retrato { position: absolute; left: -9%; bottom: 0; width: 109%; height: auto; display: block; }
.so-ondas { left: 5%; top: 24%; width: 8%; }
.so-ondas path { stroke: var(--lilas); stroke-width: 5.5; }
.so-bilhete { position: absolute; z-index: 3; left: -7%; bottom: 12%; width: min(270px, 52%); }
.so-grade { position: relative; z-index: 2; }
.so-historia { grid-column: 1; grid-row: 1; padding-top: clamp(40px, 6vw, 100px); padding-right: clamp(0px, 3vw, 48px); }

/* história */
.so-titulo { margin-bottom: clamp(24px, 3vw, 36px); }
.so-tia { position: relative; white-space: nowrap; }
.so-sub { left: -2%; width: 104%; height: .32em; bottom: -.22em; }
.so-sub path { stroke: var(--framboesa); stroke-width: 5.5; }
.so-texto .wf-texto { margin: 0 0 1em; }
.so-texto .wf-texto:first-child { font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); line-height: 1.5; color: var(--tinta); }

/* caderno da trajetória: fotos presas por cima, a linha a giz embaixo */
.so-caderno { margin-top: clamp(-40px, -2vw, 0px); }
.so-fotos, .so-linha { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 32px); }
.so-polaroide { grid-row: 1; margin: 0 0 -22px; width: min(100%, 250px); justify-self: center; padding: 9px 9px 26px; background: var(--papel); position: relative; z-index: 1;
  box-shadow: 0 1px 1px rgb(60 30 40 / .06), 0 16px 30px -14px rgb(70 40 50 / .38); transform: rotate(var(--r)); }
.so-polaroide:nth-child(1) { grid-column: 2; }
.so-polaroide:nth-child(2) { grid-column: 3; }
.so-polaroide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.so-polaroide .wf-fita { width: 70px; height: 22px; top: -11px; }

.so-caminho { position: relative; z-index: 2; display: block; width: 100%; height: 56px; margin: -6px 0 0; }
.so-caminho path { stroke: var(--lilas); stroke-width: 4.5; }

.so-linha { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; }
.so-marco { display: grid; align-content: start; gap: 12px; padding-top: 8px; }
.so-ano { position: relative; justify-self: start; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); line-height: 1; color: var(--tinta); padding: 0 .1em; }
.so-roda { left: -22%; top: -42%; width: 144%; height: 184%; }
.so-roda path { stroke: var(--framboesa); stroke-width: 3; }
.so-o-que { font-size: 1rem; line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.so-marco { position: relative; }
.so-coracao { width: 40px; left: calc(3.2em + 14px); top: -6px; transform: rotate(8deg); }
.so-coracao path { stroke: var(--framboesa); stroke-width: 4.5; }
.so-hoje .so-o-que { color: var(--tinta); font-weight: 450; }

/* tablet e celular */
@media (max-width: 900px) {
  .so-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .so-coracao { left: 2.6em; top: 18px; width: 30px; }
  .so-figura, .so-historia { grid-column: 1; grid-row: auto; }
  .so-historia { padding-top: 0; }
  .so-figura { max-width: 460px; width: 100%; justify-self: center; padding-top: 70px; }
  .so-bilhete { left: auto; right: -4%; z-index: 3; bottom: auto; top: calc(100% - 46px); width: min(280px, 78%); }
  .so-figura { margin-bottom: 168px; }
  .so-bilhete p { font-size: 1rem; line-height: 26px; }
  .so-caderno { margin-top: 64px; }
  .so-linha { padding-left: 0; }
  .so-fotos { grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
  .so-polaroide:nth-child(n) { grid-column: auto; margin: 0; }
  .so-caminho { display: none; }
  .so-linha { grid-template-columns: minmax(0, 1fr); border-left: 3px dotted color-mix(in oklab, var(--lilas) 60%, transparent); margin-left: 8px; }
  .so-marco { grid-template-columns: 7.6em 1fr; align-items: baseline; padding: 0 0 22px 22px; }
}
@media (max-width: 900px) { .so-ano { font-size: 1.3rem; } }