/* ============================================================
   RESET BÁSICO
   ============================================================
   Faz com que o tamanho dos elementos seja calculado de maneira
   mais previsível em diferentes navegadores.
*/

* {
  box-sizing: border-box;
}


/* ============================================================
   CONFIGURAÇÃO GERAL DO DOCUMENTO
   ============================================================
*/

/*
  Faz os links internos da página rolarem suavemente.
  Exemplo: clicar em "Work" leva suavemente até #work.

  color-scheme: dark informa ao navegador que esta página foi
  projetada deliberadamente para utilizar uma interface escura.
  Isso ajuda a evitar alterações automáticas de aparência.
*/
html {
  scroll-behavior: smooth;
  color-scheme: dark;
}


/* ============================================================
   BODY
   ============================================================
   Configurações gerais da página inteira.
*/

body {

  /* Remove a margem padrão adicionada pelo navegador. */
  margin: 0;

  /* Fonte principal do site. */
  font-family: Arial, Helvetica, sans-serif;

  /*
    Cor de fundo geral.

    #0a0a0a é um preto quase absoluto, mas ligeiramente
    suavizado para não ser tão agressivo quanto #000000.
  */
  background: #0a0a0a;

  /*
    Cor padrão dos textos.

    #f5f5f2 é um branco suavizado, evitando o contraste
    excessivamente duro de #ffffff sobre preto.
  */
  color: #f5f5f2;
}


/* ============================================================
   HEADER
   ============================================================
   Cabeçalho com logo à esquerda e navegação à direita.
*/

header {

  /*
    Coloca logo e menu na mesma linha.
  */
  display: flex;

  /*
    Empurra o logo para um lado e o menu para o outro.
  */
  justify-content: space-between;

  /*
    Alinha verticalmente os elementos.
  */
  align-items: center;

  /*
    Espaçamento interno do cabeçalho.
    Primeiro valor = cima/baixo.
    Segundo valor = esquerda/direita.
  */
  padding: 24px 40px;

  /*
    Linha horizontal abaixo do cabeçalho.

    #333 cria uma divisão discreta sobre o fundo escuro.
  */
  border-bottom: 1px solid #333;
}


/* ============================================================
   LOGO
   ============================================================
*/

.logo {

  /*
    Usa a mesma cor definida no body.
  */
  color: inherit;

  /*
    Remove o sublinhado padrão dos links.
  */
  text-decoration: none;

  /*
    Peso da fonte.
    700 = negrito.
  */
  font-weight: 700;

  /*
    Ajuste do espaçamento entre as letras.
  */
  letter-spacing: -0.04em;
}


/* ============================================================
   NAVEGAÇÃO
   ============================================================
*/

nav {

  /*
    Coloca os links horizontalmente.
  */
  display: flex;

  /*
    Espaço entre cada item do menu.
    Aumente ou diminua este número para ajustar o menu.
  */
  gap: 24px;
}


/* Links dentro da navegação */

nav a {

  /*
    Usa a cor padrão do texto.
  */
  color: inherit;

  /*
    Remove o sublinhado padrão.
  */
  text-decoration: none;
}


/*
  Aparência quando o mouse passa sobre um link.
*/

nav a:hover {
  text-decoration: underline;
}


/* ============================================================
   MAIN
   ============================================================
*/

main {

  /*
    Limita a largura máxima do conteúdo em telas grandes.
  */
  max-width: 1400px;

  /*
    Centraliza o conteúdo horizontalmente.
  */
  margin: 0 auto;
}


/* ============================================================
   SEÇÕES
   ============================================================
*/

section {

  /*
    Espaço interno vertical e horizontal.

    120px = espaço em cima e embaixo.
    40px = espaço nas laterais.
  */
  padding: 120px 40px;

  /*
    Linha separando as seções.

    #333 mantém a divisão visível, mas discreta.
  */
  border-bottom: 1px solid #333;
}


/* ============================================================
   HERO
   ============================================================
   Primeira grande área da página.
*/

.hero {

  /*
    Altura mínima de aproximadamente 85% da janela.
  */
  min-height: 85vh;

  /*
    Ativa Flexbox.
  */
  display: flex;

  /*
    Coloca os elementos um abaixo do outro.
  */
  flex-direction: column;

  /*
    Centraliza verticalmente o conteúdo.
  */
  justify-content: center;
}


/* ============================================================
   EYEBROW
   ============================================================
   Pequenos identificadores como:
   "AZ STUDIOS · SÃO PAULO"
   "01 · WORK"
*/

.eyebrow {

  /*
    Remove margem superior e deixa espaço inferior.
  */
  margin: 0 0 30px;

  /*
    Tamanho pequeno.
  */
  font-size: 12px;

  /*
    Texto em negrito.
  */
  font-weight: 700;

  /*
    Aumenta o espaço entre as letras.
  */
  letter-spacing: 0.12em;
}


/* ============================================================
   H1
   ============================================================
   Título principal do site.
*/

h1 {

  /* Remove margem padrão do navegador. */
  margin: 0;

  /*
    Tamanho responsivo.

    64px = tamanho mínimo.
    11vw = acompanha a largura da tela.
    180px = tamanho máximo.
  */
  font-size: clamp(64px, 11vw, 180px);

  /*
    Altura entre as linhas.
    0.85 deixa o título propositalmente compacto.
  */
  line-height: 0.85;

  /*
    Espaçamento negativo entre letras.
    Cria o aspecto mais compacto/editorial.
  */
  letter-spacing: -0.07em;
}


/* ============================================================
   H2
   ============================================================
   Títulos das seções.
*/

h2 {

  /* Remove margem superior e cria espaço abaixo. */
  margin: 0 0 30px;

  /*
    Também é responsivo.

    48px = mínimo.
    7vw = acompanha a tela.
    100px = máximo.
  */
  font-size: clamp(48px, 7vw, 100px);

  /*
    Altura das linhas.
  */
  line-height: 0.9;

  /*
    Letras mais compactas.
  */
  letter-spacing: -0.06em;
}


/* ============================================================
   PARÁGRAFOS
   ============================================================
*/

p {

  /*
    Evita que linhas de texto fiquem largas demais.
    Isso melhora bastante a leitura.
  */
  max-width: 700px;

  /*
    Tamanho padrão dos textos.
  */
  font-size: 20px;

  /*
    Espaçamento vertical entre linhas.
  */
  line-height: 1.5;
}


/* ============================================================
   INTRO
   ============================================================
   Texto específico da abertura.
*/

.intro {

  /*
    Cria distância entre o título gigante e o texto.
  */
  margin-top: 50px;
}


/* ============================================================
   LINKS DENTRO DAS SEÇÕES
   ============================================================
*/

section a {

  /*
    Mantém a cor do texto.
  */
  color: inherit;

  /*
    Dá mais peso visual ao link.
  */
  font-weight: 700;
}


/* ============================================================
   FOOTER
   ============================================================
*/

footer {

  /*
    Espaçamento interno.
  */
  padding: 30px 40px;

  /*
    Texto pequeno.
  */
  font-size: 12px;
}