/* 3 · vo — O que as pacientes escrevem: bilhetes que respondem à carta */
.vo{overflow:hidden}

/* cabeçalho em faixa: título à esquerda, texto e notas à direita */
.vo-cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.vo-cab .wf-h2{margin-top:18px}
.vo-intro{max-width:26em}
.vo-notas{list-style:none;margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.vo-notas a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:baseline;gap:2px 10px;min-height:44px;padding:14px 0 12px;border-top:1px solid var(--filete);text-decoration:none;color:var(--tinta-2);transition:border-color .3s}
.vo-notas b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3vw,44px);line-height:1;color:var(--tinta);letter-spacing:-.01em}
.vo-est{color:var(--mel);letter-spacing:2px;font-size:13px}
.vo-nota-txt{grid-column:1/-1;font-size:15px;line-height:1.4}
.vo-nota-txt::after{content:" ↗";color:var(--mel);display:inline-block;transition:transform .3s var(--curva)}
.vo-notas a:hover{border-color:var(--mel);color:var(--tinta)}
.vo-notas a:hover .vo-nota-txt::after{transform:translate(2px,-2px)}

/* a palavra: uma linha tipográfica que atravessa a seção */
.vo-palavra{margin:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(24px,3vw,48px);align-items:end}
.vo-palavra-rot{grid-column:1/-1;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.vo-palavra-pal{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mel);font-size:clamp(64px,12vw,184px);line-height:.9;letter-spacing:-.03em;margin-left:-.05em;padding-bottom:.06em}
.vo-palavra-num{font-size:15.5px;line-height:1.6;color:var(--tinta-2);max-width:22em;padding-bottom:1.6em;border-bottom:1px solid var(--filete)}
.vo-palavra-num i{font-family:var(--serif);font-style:italic;color:var(--tinta)}

/* mural: papéis numa mesa, larguras e alturas desencontradas */
.vo-mural{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:22px;align-items:start}
.vo-bil{margin:0;padding:26px 28px 22px 34px}
.vo-bil-1{grid-column:1/8;padding:38px 48px 30px 56px}
.vo-bil-2{grid-column:8/12;margin:86px 0 0 -14px}
.vo-bil-3{grid-column:1/6;margin-top:14px}
.vo-bil-4{grid-column:6/9;margin-top:84px}
.vo-bil-5{grid-column:9/13;margin-top:-34px}
.vo-bil-6{grid-column:2/6;grid-row:3;align-self:start;margin-top:-6px}
.vo-bil-7{grid-column:6/10;grid-row:3;margin-top:58px;margin-left:10px}
.vo-bil-8{grid-column:10/13;grid-row:3;margin-top:-26px;margin-right:-10px}
.vo-bil blockquote{position:relative;font-family:var(--serif);font-size:17.5px;line-height:1.58;color:var(--tinta)}
.vo-bil blockquote::before{content:"“";position:absolute;left:-.62em;top:-.12em;font-size:2.6em;line-height:1;color:var(--mel);opacity:.75}
.vo-bil-1 blockquote{font-size:clamp(20px,1.75vw,25px);line-height:1.48;letter-spacing:-.003em}
.vo-bil-1 blockquote::before{font-size:3.2em;left:-.6em;top:-.2em}
.vo-bil figcaption{margin-top:14px;font-size:15px;font-weight:500;color:var(--tinta);letter-spacing:.01em}
.vo-bil figcaption span{font-weight:400;color:var(--tinta-2)}
/* bilhete pautado (folha de caderno) e bilhete de linho */
.vo-pautado .wf-papel{background:
  repeating-linear-gradient(180deg,transparent 0 27px,rgba(120,95,80,.10) 27px 28px),
  repeating-linear-gradient(90deg,rgba(150,130,110,.022) 0 1px,transparent 1px 3px),
  linear-gradient(160deg,#fcfaf6,var(--folha) 55%,#f2ebe1)}
.vo-bil-5 .wf-papel,.vo-bil-2 .wf-papel{background:
  repeating-linear-gradient(90deg,rgba(150,130,110,.025) 0 1px,transparent 1px 3px),
  radial-gradient(120% 90% at 0% 0%,#fbf6ee,transparent 60%),
  linear-gradient(160deg,#f7f0e6,#efe5d7 60%,#e9ddcc)}

/* a resposta dela: um papel menor por baixo, girado ao contrário */
.vo-resp{position:relative;isolation:isolate;margin:18px -16px -6px 18%;padding:14px 18px 12px 20px}
.vo-resp-papel{position:absolute;inset:0;z-index:-1;transform:rotate(calc(var(--giro) * -1.4));background:linear-gradient(160deg,#fffdf9,#f6efe5);box-shadow:0 1px 1px rgba(60,40,30,.06),0 8px 18px -10px rgba(60,40,30,.3);border-left:2px solid color-mix(in oklab,var(--tulipa) 45%,transparent)}
.vo-resp-txt{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:var(--tinta)}
.vo-resp-ass{margin-top:6px;display:flex;align-items:flex-end;justify-content:flex-end;gap:2px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mel)}
.vo-tul{width:36px;height:33px;stroke-width:2.2;margin:0 0 1px -4px}

/* as palavras contadas, marcadas no texto delas */
.vo-bil mark{background:linear-gradient(transparent 58%,color-mix(in oklab,var(--blazer) 70%,var(--mel) 30%) 60% 90%,transparent 92%) no-repeat 0 0/100% 100%;color:inherit;padding:0 .08em;margin:0 -.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .vo-bil[data-rev] mark{background-size:0% 100%;transition:background-size .9s var(--curva) calc(var(--atraso,0s) + .9s)}
.js .vo-bil[data-rev].visto mark{background-size:100% 100%}

/* matéria: folha arrancada do caderno (picote em cima) e canto dobrado no linho */
.vo-pautado .wf-papel{-webkit-mask:linear-gradient(#000,#000) 0 7px/100% calc(100% - 7px) no-repeat,radial-gradient(circle at 50% 0,transparent 3.2px,#000 3.6px) 0 0/9px 7px repeat-x;mask:linear-gradient(#000,#000) 0 7px/100% calc(100% - 7px) no-repeat,radial-gradient(circle at 50% 0,transparent 3.2px,#000 3.6px) 0 0/9px 7px repeat-x;box-shadow:none}
.vo-sombra{position:absolute;inset:0;z-index:-1;filter:drop-shadow(0 1px 1px rgba(60,40,30,.08)) drop-shadow(0 12px 16px rgba(60,40,30,.16))}
.vo-bil-2 .wf-papel::after,.vo-bil-5 .wf-papel::after{content:"";position:absolute;right:0;top:0;width:26px;height:26px;background:linear-gradient(225deg,transparent 50%,#e2d4c1 50%,#f3ebdf 100%);box-shadow:-2px 2px 4px rgba(60,40,30,.12)}

/* nota de rodapé do mural */
.vo-rodape{grid-column:1/6;grid-row:3;align-self:end;margin-top:28px;padding-top:14px;border-top:1px solid var(--filete);font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:var(--tinta-2);max-width:30em}

/* gesto: os bilhetes pousam um a um, girando mais e assentando */
.js .vo-bil[data-rev]{filter:none;transform:translateY(34px);transition:opacity .9s var(--curva),transform 1.2s var(--curva);transition-delay:var(--atraso,0s)}
.js .vo-bil[data-rev] .wf-papel{transform:rotate(var(--de));transition:transform 1.3s var(--curva);transition-delay:var(--atraso,0s)}
.js .vo-bil[data-rev].visto{transform:none}
.js .vo-bil[data-rev].visto .wf-papel{transform:rotate(var(--giro))}
.js .vo-bil[data-rev] .vo-resp{opacity:0;transform:translateY(10px);transition:opacity .8s var(--curva),transform .9s var(--curva);transition-delay:calc(var(--atraso,0s) + .7s)}
.js .vo-bil[data-rev].visto .vo-resp{opacity:1;transform:none}
.vo-bil-2{--atraso:.18s}.vo-bil-4{--atraso:.14s}.vo-bil-5{--atraso:.28s}.vo-bil-7{--atraso:.14s}.vo-bil-8{--atraso:.28s}

@media (hover:hover) and (pointer:fine){
  .js .vo-bil[data-rev].visto{transition:opacity .9s var(--curva),transform .5s var(--curva)}
  .js .vo-bil[data-rev].visto:hover{transform:translateY(-3px);z-index:2}
  .js .vo-bil[data-rev].visto:hover .wf-papel{transform:rotate(0deg);transition-delay:0s;transition-duration:.6s}
}
@media (max-width:1100px) and (min-width:901px){
  .vo-mural{grid-template-columns:repeat(6,minmax(0,1fr))}
  .vo-bil-1{grid-column:1/6}
  .vo-bil-6,.vo-bil-7,.vo-bil-8{grid-row:auto}
  .vo-bil-2{grid-column:3/7;margin:-10px 0 0}
  .vo-bil-3{grid-column:1/4;margin-top:10px}
  .vo-bil-4{grid-column:4/7;margin-top:50px}
  .vo-bil-5{grid-column:1/4;margin-top:0}
  .vo-bil-6{grid-column:4/7;margin-top:-20px}
  .vo-bil-7{grid-column:1/4;margin:20px 0 0}
  .vo-bil-8{grid-column:4/7;margin:-10px 0 0}
  .vo-rodape{grid-column:1/-1;grid-row:auto}
}
@media (max-width:900px){
  .vo-cab{grid-template-columns:1fr;gap:20px}
  .vo-notas{grid-template-columns:1fr;margin-top:18px}
  .vo-notas li:last-child a{border-bottom:1px solid var(--filete)}
  .vo-notas a{grid-template-columns:auto auto 1fr;grid-template-rows:auto;align-items:center;padding:10px 0;min-height:56px}
  .vo-notas b{font-size:30px}
  .vo-nota-txt{grid-column:auto;text-align:right}
  .vo-palavra{grid-template-columns:1fr;margin:48px 0 36px}
  .vo-palavra-pal{font-size:clamp(60px,19vw,84px)}
  .vo-palavra-num{padding:10px 0 18px}
  .vo-mural{display:flex;flex-direction:column;gap:0}
  .vo-bil,.vo-bil-1,.vo-bil-2,.vo-bil-3,.vo-bil-4,.vo-bil-5,.vo-bil-6,.vo-bil-7,.vo-bil-8{margin:0;padding:22px 20px 18px 30px}
  .vo-bil+.vo-bil{margin-top:-4px}
  .vo-bil:nth-child(even){margin-left:16px}
  .vo-bil:nth-child(odd){margin-right:8px}
  .vo-bil-1 blockquote{font-size:19.5px}
  .vo-bil blockquote{font-size:17px;line-height:1.55}
  .vo-bil blockquote::before{left:-.58em}
  .vo-rodape{margin-top:30px}
  .vo-resp{margin:14px -8px -4px 10%;padding:12px 16px 10px 18px}
  .vo{padding-bottom:calc(var(--respiro) + 40px)}
}