.escuta{padding:clamp(76px,10vw,140px) 0}
.escuta .wrap{max-width:1150px}

.fb-corte{inset:0;--c:var(--salvia-esc);
  /* 101% e não 100%: rente, a borda cai em meio pixel e abre um fio de linho */
  clip-path:polygon(0 84%,100% 14%,100% 101%,0 101%)}
.fb-b1{left:2%;bottom:5%;width:9%;transform:rotate(-8deg)}
.fb-b2{right:2.5%;top:3%;width:8%;transform:rotate(160deg)}
.fb-b3{right:14%;top:9%;width:5.5%;transform:rotate(-22deg)}

.escuta__folha{--fio:clamp(15px,1.7vw,23px);
  position:relative;background:var(--papel);
  padding:clamp(30px,4vw,58px);
  box-shadow:0 1px 0 rgba(46,42,50,.10),0 22px 48px rgba(46,42,50,.30)}
.escuta__folha::before{content:'';position:absolute;inset:var(--fio);
  border:1px solid rgba(46,42,50,.2);pointer-events:none}
.escuta__canto{position:absolute;z-index:2;width:24px;height:24px;
  border:1px solid rgba(46,42,50,.26);background:rgba(46,42,50,.05)}
.escuta__c1{left:var(--fio);top:var(--fio);clip-path:polygon(0 0,100% 0,0 100%)}
.escuta__c2{right:var(--fio);top:var(--fio);clip-path:polygon(0 0,100% 0,100% 100%)}
.escuta__c3{left:var(--fio);bottom:var(--fio);clip-path:polygon(0 0,0 100%,100% 100%)}
.escuta__c4{right:var(--fio);bottom:var(--fio);clip-path:polygon(100% 0,100% 100%,0 100%)}

.escuta__grade{display:grid;grid-template-columns:1.1fr .9fr 168px;
  gap:clamp(22px,3.2vw,54px);align-items:start}

.escuta__tese{font-size:clamp(29px,3.5vw,49px);margin:14px 0 0;max-width:15ch}
.cor{color:var(--lilas);font-style:italic}
.escuta__fichas{margin:clamp(26px,3.6vw,42px) 0 0;padding:0;list-style:none;
  font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.45;
  max-width:34ch}
.escuta__fichas li{padding:13px 0;border-top:1px solid rgba(124,104,143,.38)}
.escuta__fichas li:first-child{border-top:0;padding-top:0}

.escuta__prosa p{max-width:42ch}
.escuta__sub{font-family:var(--serif);font-style:italic;font-weight:300;
  /* piso de 24px: abaixo disso o lilás sobre o papel reprova contraste */
  font-size:clamp(24px,2.1vw,29px);line-height:1.2;
  margin:clamp(22px,2.6vw,32px) 0 17px;padding-bottom:16px;
  display:inline-block;max-width:18ch;
  color:var(--lilas);
  background-repeat:no-repeat;background-position:left bottom;
  background-size:100% 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4C34 3.1 62 10.6 96 6.2c30-3.9 62 2.4 102 1.1' fill='none' stroke='%237D688F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}

.escuta__col{display:grid;gap:clamp(18px,2.4vw,32px)}
.escuta__mold{background:var(--branco);padding:11px;
  box-shadow:0 1px 0 rgba(46,42,50,.14)}
.escuta__mold .esp__rot{margin-top:10px}
.esp__rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-fraca);display:block;margin-top:10px;padding-top:7px;
  border-top:1px solid rgba(46,42,50,.16)}
.escuta__obj{position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:4/5;background:var(--c,var(--papel))}
.escuta__obj img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.escuta__mold .escuta__obj{outline:1px solid rgba(46,42,50,.16)}
.escuta__obj--traco{aspect-ratio:1/1}
/* o .escuta__mold na frente é pra ganhar do `.escuta img{height:auto}`.
   trico-1.png e novelo-1-tratado.png já vêm com gamma no arquivo (originais em prototipo/assets) */
.escuta__mold .escuta__obj--traco img{height:100%;object-fit:contain;
  padding:6%;filter:grayscale(1) brightness(.86)}
.escuta__obj--novelo{--c:color-mix(in srgb,var(--lavanda) 70%,var(--papel))}
.escuta__mold .escuta__obj--novelo img{padding:2%}
.escuta__obj--trico{--c:var(--salvia)}

.escuta__fecho{display:flex;justify-content:flex-end;align-items:flex-end;
  margin-top:clamp(24px,3vw,40px);padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(46,42,50,.22)}
.escuta__etiq{flex:none;background:var(--papel);
  border:1px solid rgba(46,42,50,.22);padding:8px 12px;min-width:150px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-fraca);line-height:1.85}
.escuta__etiq b{display:block;font-weight:400;color:var(--tinta);letter-spacing:.2em}

.escuta img{height:auto}

@media (max-width:1080px){
  .escuta__tese{font-size:32px}
  .escuta__fichas{font-size:16px}
  .esp__rot{font-size:11px;letter-spacing:.12em}
  .escuta__etiq{font-size:11px}
  /* as plantas sobem POR CIMA da folha, cruzando as bordas: o .fundo deixa de ser camada
     fechada, as plantas vão acima da folha e o talho fica embaixo */
  .escuta .fundo{z-index:auto}
  .escuta .fundo .bot{z-index:2}
  .fb-b1{display:none}
  .fb-b2{right:-3%;top:1.5%;width:10%;transform:rotate(160deg)}
  .fb-b3{left:-3%;right:auto;top:auto;bottom:2.5%;width:11%;transform:rotate(-14deg)}
}
@media (max-width:900px){
  .fb-corte{clip-path:polygon(0 74%,100% 40%,100% 101%,0 101%)}
  .fb-b2{right:-3%;top:1.5%;width:13%;transform:rotate(160deg)}
  .fb-b3{left:-3%;right:auto;top:auto;bottom:2.5%;width:15%;transform:rotate(-14deg)}
  .escuta__grade{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .escuta__col{grid-template-columns:1fr 1fr;gap:18px;max-width:340px}
  .escuta__folha{--fio:11px;padding:clamp(20px,5vw,30px)}
  .escuta__canto{width:17px;height:17px}
}
@media (max-width:640px){
  .fb-b2{right:-4%;width:20%}
  .fb-b3{left:-5%;width:24%}
  .escuta__tese{font-size:28px}
}