/*
 * Ateliê Arco — design de sobrancelhas e henna.
 *
 * Areia e terracota, DM Serif Display no título e DM Sans no corpo. Serifa
 * cheia e alto contraste: o oposto da haste fina da Instrument Serif do
 * Estúdio Bruna, para que os dois exemplos de sobrancelha não se confundam.
 *
 * Assinatura: a colagem sobreposta. As fotos se encavalam com deslocamento e
 * moldura de papel, como um mural de ateliê — nada de grade alinhada.
 */

:root {
  --paper: #faf4ec;
  --paper-2: #f2e6d8;
  --paper-3: #e6d3bd;
  --ink: #2b1f16;
  --ink-soft: #55432f;
  --muted: #8a7357;
  --accent: #b4552f;
  --accent-soft: #d8865e;
  --line: rgb(43 31 22 / 0.15);

  --scrim: rgb(250 244 236 / 0.96);
  --scrim-mid: rgb(250 244 236 / 0.8);
  --scrim-top: rgb(250 244 236 / 0.76);
  --scrim-flat: rgb(35 22 13 / 0.66);
  --on-media: #faf4ec;
  --hero-paper: #faf4ec;
  --hero-ink: #2b1f16;
  --hero-ink-soft: #4d3829;
  --hero-accent: #94401f;

  --display: "DM Serif Display", Georgia, serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-leading: 1.06;
  --display-tracking: -0.018em;
  --wordmark-tracking: 0.26em;
  --radius: 3px;
  --hero-focus: center 40%;

  --footer-bg: #2b1f16;
  --footer-ink: rgb(250 244 236 / 0.68);
  --footer-strong: #faf4ec;
}

.hero__title em {
  font-style: italic;
  color: var(--hero-accent);
}

.hero__media img {
  filter: saturate(0.9) sepia(0.12);
}

/* ─── assinatura: colagem de ateliê ──────────────────────────────────────── */

/*
 * No celular a colagem vira uma pilha simples com pequenos recuos alternados —
 * sobreposição de verdade em 390px viraria bagunça ilegível.
 */
.collage {
  display: grid;
  gap: var(--space-m);
}

.collage figure {
  position: relative;
  margin: 0;
  border: 0.6rem solid var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 1.2rem 2.5rem rgb(43 31 22 / 0.14);
  overflow: hidden;
}

.collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.collage figure:hover img {
  transform: scale(1.04);
}

.collage figure:nth-child(2) {
  margin-inline-start: var(--space-l);
}

.collage figure:nth-child(3) {
  margin-inline-end: var(--space-l);
}

/*
 * A sobreposição vem de células de grade compartilhadas, não de `position:
 * absolute`: assim o bloco continua reservando a própria altura e a legenda tem
 * um lugar garantido, em vez de cair por cima de uma foto escura.
 */
@media (min-width: 900px) {
  .collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 4rem;
    gap: 0;
  }

  .collage figure {
    margin: 0;
  }

  .collage figure:nth-child(1) {
    grid-area: 1 / 1 / 9 / 7;
    z-index: 1;
  }

  .collage figure:nth-child(2) {
    grid-area: 3 / 7 / 12 / 13;
    z-index: 3;
  }

  .collage figure:nth-child(3) {
    grid-area: 9 / 2 / 13 / 8;
    z-index: 2;
  }
}

/* ─── legenda manuscrita do mural ────────────────────────────────────────── */

.collage__note {
  position: relative;
  z-index: 4;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--accent);
  line-height: 1.3;
  max-width: 22ch;
}

@media (min-width: 900px) {
  .collage__note {
    grid-area: 13 / 1 / 14 / 6;
    align-self: center;
    margin-block-start: var(--space-m);
  }
}

/* ─── etapas do design, em três colunas de papel ─────────────────────────── */

.steps {
  display: grid;
  gap: var(--space-m);
}

.step {
  padding: var(--space-m);
  background: var(--paper-2);
  border-radius: var(--radius);
}

.step__n {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent);
}

.step__title {
  margin-block-start: var(--space-xs);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.step__text {
  margin-block-start: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}