/*
  Sobre mim: a história da Rafa em primeira pessoa, com a foto na janela de
  arco e a mesa servida. Cores e fontes vêm de tokens.css por base.css.
*/

main {
  padding-block: 2rem 1rem;
}

.historia {
  display: grid;
  gap: 1.6rem;
  justify-items: center;
}

.janela {
  position: relative;
  width: min(20rem, 82%);
  margin: 0;
  padding: .5rem;
  border: 1px solid color-mix(in srgb, var(--traco) 40%, transparent);
  border-radius: 999px 999px 4px 4px;
  background: var(--creme);
}

.janela::after {
  content: "";
  position: absolute;
  inset: .18rem;
  border: 1px solid color-mix(in srgb, var(--traco) 22%, transparent);
  border-radius: 999px 999px 3px 3px;
  pointer-events: none;
}

.janela img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 2px 2px;
}

.historia-texto {
  max-width: 36rem;
}

.sobrelinha {
  margin-bottom: .4rem;
  color: var(--verde);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1 {
  margin-bottom: .9rem;
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 560;
  font-variation-settings: "WONK" 1, "SOFT" 40;
  line-height: 1.1;
}

.historia-texto p:not(.sobrelinha):not(.historia-acoes) {
  margin-bottom: .9rem;
  font-size: 1.08rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.historia-texto em {
  color: var(--terracota);
  font-variation-settings: "SOFT" 60;
}

.historia-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.4rem 0 0;
}

.mesa {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linha);
}

.mesa-foto {
  margin: 0;
}

.mesa-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: .9rem;
}

.mesa h2 {
  margin-bottom: .6rem;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 570;
  font-variation-settings: "SOFT" 45, "WONK" 1;
  line-height: 1.1;
}

.mesa p {
  margin-bottom: .8rem;
  font-size: 1.04rem;
  text-wrap: pretty;
}

.mesa-texto .botao {
  margin-top: .4rem;
}

@media (min-width: 46rem) {
  .historia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: 3rem;
    justify-items: start;
  }

  .janela {
    width: min(24rem, 100%);
    justify-self: center;
  }

  .mesa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 3rem;
  }

  .mesa-foto {
    max-width: 30rem;
  }
}