.leituras{padding:clamp(76px,10vw,140px) 0}
#leituras .rot{color:var(--papel)}
#leituras .tit{color:var(--papel)}
#leituras .lede{color:var(--branco)}

.fe-campo{inset:0;--c:var(--salvia-esc)}
.fe-luz{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 44% 18% at 50% 58%,
    rgba(255,255,255,var(--luz,.16)),rgba(255,255,255,0) 72%)}
/* máscara só de gradiente: com url() de arquivo, o Firefox por file:// recusa e os panos somem */
.fe-panos{position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,transparent 2%,
    rgba(0,0,0,.18) 13%,rgba(0,0,0,.58) 23%,#000 32%,
    #000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,
    transparent 0,transparent 2%,
    rgba(0,0,0,.18) 13%,rgba(0,0,0,.58) 23%,#000 32%,
    #000 88%,transparent 100%)}
/* largura casada com o .leituras__vao */
.fe-esq{left:-30%;top:-16%;width:46%;height:124%;--c:var(--salvia)}
.fe-dir{right:-30%;top:-14%;width:46%;height:122%;--c:var(--lavanda)}
/* a borda de dentro de cada pano ondula: três ondas suaves na altura visível da seção (o pano
   tem 124% e 122% dela, por isso 26,9% e 27,3%), somadas a um bloco cheio no resto do pano.
   Máscara só em data URI ou gradiente (ver .fe-panos) */
.fe-esq,.fe-dir{-webkit-mask-repeat:repeat-y,no-repeat;mask-repeat:repeat-y,no-repeat}
.fe-esq{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0L7.00 0.0L7.91 2.5L8.81 5.0L9.68 7.5L10.50 10.0L11.26 12.5L11.95 15.0L12.55 17.5L13.06 20.0L13.47 22.5L13.76 25.0L13.94 27.5L14.00 30.0L13.94 32.5L13.76 35.0L13.47 37.5L13.06 40.0L12.55 42.5L11.95 45.0L11.26 47.5L10.50 50.0L9.68 52.5L8.81 55.0L7.91 57.5L7.00 60.0L6.09 62.5L5.19 65.0L4.32 67.5L3.50 70.0L2.74 72.5L2.05 75.0L1.45 77.5L0.94 80.0L0.53 82.5L0.24 85.0L0.06 87.5L0.00 90.0L0.06 92.5L0.24 95.0L0.53 97.5L0.94 100.0L1.45 102.5L2.05 105.0L2.74 107.5L3.50 110.0L4.32 112.5L5.19 115.0L6.09 117.5L7.00 120.0L0 120Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0L7.00 0.0L7.91 2.5L8.81 5.0L9.68 7.5L10.50 10.0L11.26 12.5L11.95 15.0L12.55 17.5L13.06 20.0L13.47 22.5L13.76 25.0L13.94 27.5L14.00 30.0L13.94 32.5L13.76 35.0L13.47 37.5L13.06 40.0L12.55 42.5L11.95 45.0L11.26 47.5L10.50 50.0L9.68 52.5L8.81 55.0L7.91 57.5L7.00 60.0L6.09 62.5L5.19 65.0L4.32 67.5L3.50 70.0L2.74 72.5L2.05 75.0L1.45 77.5L0.94 80.0L0.53 82.5L0.24 85.0L0.06 87.5L0.00 90.0L0.06 92.5L0.24 95.0L0.53 97.5L0.94 100.0L1.45 102.5L2.05 105.0L2.74 107.5L3.50 110.0L4.32 112.5L5.19 115.0L6.09 117.5L7.00 120.0L0 120Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-size:14px 26.9%,calc(100% - 13px) 100%;mask-size:14px 26.9%,calc(100% - 13px) 100%;
  -webkit-mask-position:right top,left top;mask-position:right top,left top}
.fe-dir{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120' preserveAspectRatio='none'%3E%3Cpath d='M14 0L7.00 0.0L6.09 2.5L5.19 5.0L4.32 7.5L3.50 10.0L2.74 12.5L2.05 15.0L1.45 17.5L0.94 20.0L0.53 22.5L0.24 25.0L0.06 27.5L0.00 30.0L0.06 32.5L0.24 35.0L0.53 37.5L0.94 40.0L1.45 42.5L2.05 45.0L2.74 47.5L3.50 50.0L4.32 52.5L5.19 55.0L6.09 57.5L7.00 60.0L7.91 62.5L8.81 65.0L9.68 67.5L10.50 70.0L11.26 72.5L11.95 75.0L12.55 77.5L13.06 80.0L13.47 82.5L13.76 85.0L13.94 87.5L14.00 90.0L13.94 92.5L13.76 95.0L13.47 97.5L13.06 100.0L12.55 102.5L11.95 105.0L11.26 107.5L10.50 110.0L9.68 112.5L8.81 115.0L7.91 117.5L7.00 120.0L14 120Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120' preserveAspectRatio='none'%3E%3Cpath d='M14 0L7.00 0.0L6.09 2.5L5.19 5.0L4.32 7.5L3.50 10.0L2.74 12.5L2.05 15.0L1.45 17.5L0.94 20.0L0.53 22.5L0.24 25.0L0.06 27.5L0.00 30.0L0.06 32.5L0.24 35.0L0.53 37.5L0.94 40.0L1.45 42.5L2.05 45.0L2.74 47.5L3.50 50.0L4.32 52.5L5.19 55.0L6.09 57.5L7.00 60.0L7.91 62.5L8.81 65.0L9.68 67.5L10.50 70.0L11.26 72.5L11.95 75.0L12.55 77.5L13.06 80.0L13.47 82.5L13.76 85.0L13.94 87.5L14.00 90.0L13.94 92.5L13.76 95.0L13.47 97.5L13.06 100.0L12.55 102.5L11.95 105.0L11.26 107.5L10.50 110.0L9.68 112.5L8.81 115.0L7.91 117.5L7.00 120.0L14 120Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-size:14px 27.3%,calc(100% - 13px) 100%;mask-size:14px 27.3%,calc(100% - 13px) 100%;
  -webkit-mask-position:left top,right top;mask-position:left top,right top}
.fe-esq img{object-fit:cover;object-position:right bottom}
.fe-dir img{object-fit:cover;object-position:right bottom;transform:scaleX(-1)}
.fundo .fe-b1,.fundo .fe-b2,.fundo .fe-b3{z-index:3}
/* translate em % da própria peça: a haste some na borda e a folha fica inteira em qualquer largura */
.fe-b1{left:10%;bottom:0;width:5.5%;transform:rotate(-6deg);translate:0 22%}
.fe-b2{right:11%;bottom:-4%;width:5%;transform:rotate(12deg)}
.fe-b3{left:19%;bottom:-3%;width:4%;transform:rotate(-14deg)}
/* casado com os panos: o vão entre eles é 68% da seção (84% no celular). Em vw porque
   % aqui mede a .wrap; 64 e não 68 porque o vw conta a barra de rolagem */
.leituras__vao{width:min(880px,64vw);margin:0 auto}
.leituras__tese{font-size:clamp(27px,3.2vw,42px);margin:14px 0 16px;max-width:18ch}
.leituras__vao .lede{max-width:52ch}
.leituras__prat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px);margin:clamp(30px,4vw,52px) 0 0;padding:0;list-style:none}
.leituras__livro{margin:0;display:flex;flex-direction:column}
.leituras__capa{--alt:clamp(150px,19vw,274px);
  height:var(--alt);display:flex;align-items:flex-end;justify-content:center}
.leituras__capa img{height:100%;width:auto;max-width:100%;
  box-shadow:0 1px 0 rgba(46,42,50,.20),0 14px 30px rgba(46,42,50,.34);
  filter:grayscale(.64)}
.leituras__ficha{margin-top:14px;padding-top:10px;flex:1;
  display:flex;flex-direction:column;
  border-top:1px solid rgba(239,237,238,.34);color:var(--branco)}
.leituras__ficha b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.28;letter-spacing:-.005em}
.leituras__ficha span{display:block;margin:5px 0 9px;font-size:12.5px;line-height:1.45}
.leituras__vaga{display:block;margin-top:auto;font-family:var(--mono);
  font-style:normal;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.6;color:var(--papel);
  border:1px dashed rgba(239,237,238,.42);padding:5px 7px}
.leituras__etiqueta{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  margin-top:clamp(28px,3.4vw,44px);padding-top:10px;
  border-top:1px solid rgba(239,237,238,.34);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--papel)}
@media (max-width:1080px){
  /* as plantas aos pés da cortina sobem POR CIMA do conteúdo, nos cantos de baixo: o .fundo
     deixa de ser camada fechada; o campo, o clarão e os panos ficam embaixo do texto */
  .leituras .fundo{z-index:auto}
  .fe-luz,.fe-panos{z-index:0}
  .fe-b1{left:-2%;width:11%}
  .fe-b2{right:-1.5%;bottom:-24px;width:12.5%}
  .fe-b3{left:7%;bottom:-30px;width:7.5%}
}
@media (max-width:900px){
  .fe-esq,.fe-dir{width:38%}
  .fe-b1{left:-3%;width:15%}
  .fe-b2{right:-2%;bottom:-24px;width:17%}
  .fe-b3{left:9%;bottom:-30px;width:10%}
  .leituras__vao{width:min(880px,76vw)}
  .leituras__prat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leituras__capa{--alt:clamp(170px,26vw,280px)}
}
@media (max-width:1080px){
  /* a ficha entra por cima do canto de baixo à direita da capa, texto à direita. Sem fundo,
     por escolha: sobre as capas claras a letra fica abaixo do contraste mínimo */
  /* duas colunas onde couberem duas de 260px; senão uma, como no celular */
  .leituras__prat{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
  .leituras__livro{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;max-width:420px}
  .leituras__capa{--alt:220px;grid-area:1/1;justify-content:flex-start}
  .leituras__ficha{grid-area:1/2;z-index:1;margin:0 0 14px -44px;padding:0;border-top:0;
    text-align:right;align-items:flex-end}
  .leituras__tese{font-size:32px}
  .leituras__ficha b{font-size:16px}
  .leituras__ficha span{font-size:12px}
  .leituras__vaga,.leituras__etiqueta{font-size:11px}
}
@media (max-width:640px){
  .leituras__prat{grid-template-columns:minmax(0,1fr)}
  .leituras__tese{font-size:28px}
}