/*
 * Página Sobre (Estúdio). Mesmo mundo da home; a composição gira em torno da
 * assinatura: o nome de margem a margem, a mesa, o texto que se escreve com o
 * scroll ao lado de quem escreve, e a cadeira do outro lado da conversa.
 */

/* ================= Assinatura ================= */
.ass { padding-top: var(--sp-7); }
.ass__nome { white-space: nowrap; line-height: .84; margin-bottom: var(--sp-8); }
.ass__linha { display: inline-block; white-space: nowrap; }
.ass__grid { row-gap: var(--sp-5); align-items: end; }
.ass__title { grid-column: 1 / 6; }
.ass__texto { grid-column: 7 / 13; max-width: 40rem; }
.ass__mesa {
  margin-top: var(--sp-8);
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100svh;
}

/* ================= Escrita ================= */
.escrita { margin-top: var(--sp-section); }
.escrita__grid { align-items: start; }
.escrita__media { grid-column: 1 / 6; align-self: stretch; }
.escrita__frame { position: sticky; top: var(--sp-6); aspect-ratio: 4 / 5; }
.escrita__corpo {
  grid-column: 7 / 13;
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-6) var(--sp-8);
}
.escrita__tese {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.3vw, 3.6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--color-ink-1);
  text-wrap: pretty;
}
.escrita__tese [data-acender-alvo] { color: var(--color-accent); }
.escrita__tese .word { color: var(--color-ghost); }
.escrita__fim { display: grid; gap: var(--sp-6); justify-items: start; max-width: 34rem; }

/* ================= Régua ================= */
.regua { margin-top: var(--sp-section); }
.regua__lista { row-gap: var(--sp-7); }
.regua__item { grid-column: span 4; }
.regua__rot { margin-top: var(--sp-4); color: var(--color-mut); }
.regua__val { margin-top: var(--sp-3); font-size: clamp(2.25rem, 3.8vw, 4rem); text-wrap: balance; }

/* ================= Juntos ================= */
.junto { margin-top: var(--sp-section); }
.junto__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.junto__texto { display: grid; gap: var(--sp-6); padding-right: var(--sp-8); }
.junto__word { margin-bottom: var(--sp-3); }
.junto__p { max-width: 34rem; font-size: clamp(1.375rem, 2.1vw, 2.125rem); line-height: 1.12; text-wrap: pretty; }
.junto__frame { height: min(100svh, 64rem); margin-right: var(--sp-3); }

/* ================= Orçamento ================= */
.orc__title { grid-column: 1 / 8; }
.orc__texto { grid-column: 1 / 6; grid-row: 2; max-width: 34rem; }

/* ================= Tablet ================= */
@media (max-width: 991px) {
  .ass__title, .ass__texto { grid-column: 1 / -1; }
  .escrita__media { grid-column: 1 / 6; }
  .escrita__corpo { grid-column: 6 / 13; padding-left: var(--sp-4); }
  .regua__item { grid-column: 1 / -1; }
  .junto__inner { grid-template-columns: 1fr; }
  .junto__texto { padding-right: var(--margin); }
  .junto__frame { order: -1; height: auto; aspect-ratio: 4 / 5; margin: 0 var(--margin) var(--sp-7); }
  .orc__title, .orc__texto, .orc__cell { grid-column: 1 / -1; grid-row: auto; }
}

/* ================= Celular ================= */
@media (max-width: 767px) {
  .ass { padding-top: var(--sp-6); }
  .ass__nome { margin-bottom: var(--sp-6); }
  .ass__mesa { aspect-ratio: 4 / 5; margin-top: var(--sp-7); }
  .ass__mesa img { object-position: 30% 50%; }
  /* no celular a mesa do topo já mostra a mesma cena: o close sai */
  .escrita__media { display: none; }
  .escrita__corpo { grid-column: 1 / -1; padding: 0; gap: var(--sp-7); }
}