/* Bruna Pazinato · trajetória */

.folha{
  position: relative;
  padding: clamp(3rem, 9vh, 6.5rem) var(--gutter) clamp(3rem, 8vh, 5.5rem);
}

.folha::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background-size: 190px 190px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.folha > *{ position: relative; z-index: 1; }

.rotulo{
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(.58rem, .68vw, .7rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--coral);
}

/* o arco */

.arco{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: center;
}

.arco__retrato{
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.arco__retrato img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  mix-blend-mode: multiply;
  filter: saturate(.92) contrast(1.03);
}

.arco__frase{
  margin-top: clamp(1.2rem, 3vh, 2rem);
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(1.45rem, 2.7vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--paper);
  text-wrap: balance;
}

.arco__corpo{
  margin-top: clamp(1.5rem, 4vh, 2.6rem);
  max-width: 40em;
  display: grid;
  gap: 1.1em;
}

.arco__corpo p{
  font-family: var(--font-sans);
  font-size: clamp(.9rem, 1.02vw, 1.02rem);
  line-height: 1.72;
  color: var(--paper-70);
}

.arco__corpo em{
  font-style: normal;
  color: var(--paper);
}

/* a crítica */

.critica{
  margin: clamp(4rem, 13vh, 9rem) auto 0;
  text-align: center;
}

.critica p{
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--paper);
  text-wrap: balance;
}

.critica cite{
  display: block;
  margin-top: 2em;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(.56rem, .66vw, .68rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper-45);
}

.critica cite em{ font-style: normal; color: var(--paper-70); }

/* a imagem do fim */

.fim{
  position: relative;
  margin: 0;
  height: clamp(460px, 88svh, 1040px);
  overflow: hidden;
  background: var(--ink);
}

.fim img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;

  transform: scale(1.12);
  filter: contrast(1.04) saturate(.86) brightness(.84);
  will-change: transform;
}

.fim::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(11, 11, 12, 0) 58%,
    var(--ink) 100%);
}

/* responsivo */

@media (max-width: 860px){

  .arco{
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 5vh, 2.4rem);
  }

  .arco__retrato{
    max-width: 78%;
    aspect-ratio: 4 / 5;
  }

}

.abertura--cheia{ text-align: center; }

.folha.claro{ text-align: center; }

.arco{
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.8rem, 5vh, 3.4rem);
}

.arco__retrato{
  width: min(100%, 380px);
  margin-inline: auto;
}

.arco__texto{ max-width: 62ch; }
.arco__texto{ text-align: center; }
.arco__frase{ margin-inline: auto; }
.arco__corpo p{ margin-inline: auto; }
.rotulo::after{ margin-inline: auto; }

.critica{
  text-align: center;
  border-left: 0;
  padding-left: 0;
}

.critica p{ margin-inline: auto; }

.critica::before{
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto clamp(1.2rem, 3vh, 2rem);
  background: var(--coral);
}

.critica__obra{
  display: block;
  margin-top: .5em;
}

.abertura--cheia .abertura__veu{
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(11,11,12,.15) 46%, rgba(11,11,12,.55) 100%),
    radial-gradient(120% 52% at 50% 62%, rgba(11,11,12,.72), rgba(11,11,12,0) 70%);
}

/* o título mais longo do site */

@media (max-width: 760px){
  .abertura--cheia .abertura__titulo{ font-size: clamp(2.2rem, 12.5vw, 4.2rem); }
}