@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: var(--rhythm);
    position: relative;
  }

  .section--elev {
    background: var(--bg-elev);
  }

  /* Queda de luz nas emendas da seção.
     Preto chapado num monitor não lê como respiro: lê como "a página
     acabou". Os dois radiais devolvem uma poça de luz muito fraca perto do
     topo e da base, de modo que o corte entre uma seção e a seguinte
     deixe de ser preto contra preto.
     Amplitude deliberadamente baixa: o pico fica em torno de #0b0b0b,
     ainda dentro da paleta, e é neutro — nenhuma matiz entra.

     Os dois lineares, por cima, levam a borda exata da seção de volta a
     preto puro. Sem eles a luz começava com força na própria borda e,
     encostada no preto da vizinha, desenhava um degrau: uma linha reta
     atravessando a tela, medida de 6 para 11 de luminância em 4px. */
  .section--luz {
    background-image:
      linear-gradient(to bottom, var(--bg), rgba(0, 0, 0, 0) 7rem),
      linear-gradient(to top, var(--bg), rgba(0, 0, 0, 0) 7rem),
      radial-gradient(120% 58% at 50% 0%, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 72%),
      radial-gradient(120% 45% at 50% 100%, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 72%);
  }

  .section--tight {
    padding-block: var(--s-9);
  }

  .section--xl {
    padding-block: var(--rhythm-xl);
  }

  /* ---------- Layout assimétrico ----------
     A assinatura do projeto. Em 1440px: título 416px, coluna vazia de
     80px, conteúdo 752px. O vazio é intencional — não preencher. */
  .split {
    display: grid;
    gap: var(--s-7);
  }

  .split__head {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }

  .split__head .t-h1,
  .split__head .t-h2 {
    max-width: 18ch;
  }

  @media (min-width: 1024px) {
    .split {
      grid-template-columns: 4fr 1fr 7fr;
      gap: var(--grid-gap);
      align-items: start;
    }

    .split__head {
      grid-column: 1 / 2;
      position: sticky;
      top: calc(var(--header-h) + var(--s-7));
    }

    .split__body {
      grid-column: 3 / 4;
    }
  }

  /* ---------- Grades ---------- */
  .grid {
    display: grid;
    gap: var(--grid-gap);
  }

  .grid--2 {
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .grid--2 {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--s-6);
      row-gap: var(--s-7);
    }
  }

  /* Duas pessoas. Largura travada em 880px e centralizada, senão cada
     retrato 4:5 passaria de 600px de largura no desktop. */
  .grid--team {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    max-width: 880px;
    margin-inline: auto;
  }

  /* minmax(0, 1fr) e não 1fr: o nome em Fifties Movies tem largura mínima
     diferente em cada card, e com 1fr puro as colunas saíam desiguais —
     269px contra 222px, medido. O minmax zera esse piso. */
  @media (min-width: 640px) {
    .grid--team {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--s-7);
    }
  }

  .grid--depo {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  @media (min-width: 768px) {
    .grid--depo {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .stack {
    display: flex;
    flex-direction: column;
  }

  .stack-4 { gap: var(--s-4); }
  .stack-5 { gap: var(--s-5); }
  .stack-6 { gap: var(--s-6); }
  .stack-7 { gap: var(--s-7); }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
  }

  /* Textura topográfica — só no hero e no CTA final. Ver specs/design.md. */
  .topo {
    position: absolute;
    inset: 0;
    background-image: url("../assets/svg/topografia.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
  }

  /* ---------- Grão de filme ----------
     Uma camada só, fixa, sobre a página inteira. É o elemento que faz o
     preto do site ter superfície em vez de ser um vazio chapado, e é o
     que toda peça de cinema tem por natureza do suporte.
     Fixa e não absoluta de propósito: grão que rola junto com a página
     vira textura de papel de parede; grão parado atrás da imagem em
     movimento é o que o olho lê como filme. */
  .grao {
    position: fixed;
    inset: 0;
    z-index: var(--z-grao);
    pointer-events: none;
    background-image: url("../assets/svg/grao.svg");
    background-repeat: repeat;
    background-size: 220px 220px;
    opacity: var(--grao);
  }

  .section > .container,
  .section > .container-full {
    position: relative;
    z-index: 1;
  }
}