/* ==========================================================================
   ESTILO DO SITE — Matteus Uchôa

   A cara do site inteiro mora nas variáveis logo abaixo. Para trocar uma cor,
   a fonte ou um tamanho no site todo, mude só a linha dele aqui em cima.
   Todo o resto deste arquivo usa esses nomes em vez de valores soltos, para
   que uma troca aqui se espalhe sozinha.
   ========================================================================== */

:root {
  /* --- Cores do modo claro (o padrão) ------------------------------------
     Fundo off-white e uma cor só de destaque: o framboesa. Todas passam no
     contraste mínimo de leitura sobre o fundo. */
  --cor-fundo:     #f2f1ef;  /* off-white levemente quente, não branco puro */
  --cor-texto:     #1b1a19;  /* quase preto: menos duro que o preto puro */
  --cor-suave:     #6f6b64;  /* números, clientes, informação de apoio */
  --cor-linha:     rgba(27, 26, 25, 0.1); /* linhas finas da lista */
  --cor-destaque:  #b8264a;  /* framboesa: seu nome e o que está selecionado */
  --contorno-avatar: none;   /* no claro o bonequinho não precisa de contorno */

  /* --- Fonte ---------------------------------------------------------------
     Uma família só, de máquina de escrever, em dois pesos (15 KB cada).
     Os arquivos ficam dentro do site, na pasta /fontes. */
  --fonte: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --peso-normal: 400;
  --peso-forte:  500;

  /* --- Tamanhos -------------------------------------------------------- */
  --tam-texto: 0.75rem;     /* 12px: quase tudo no site */
  --tam-nome:  0.9375rem;   /* 15px: seu nome no topo */
  --tam-intro: 0.8125rem;   /* 13px: a apresentação, que é texto corrido */

  /* --- Espaços e medidas ---------------------------------------------- */
  --largura-coluna: 20rem;                    /* coluna fixa da esquerda */
  --margem:         clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --espaco-capas:   0.875rem;                 /* respiro entre as capas */
  --raio:           6px;                      /* cantos das capas */
}

/* Modo escuro ("Apagar a luz").
   Vale em dois casos: quando a pessoa clicou em "Apagar a luz", ou quando o
   celular/computador dela já está no modo escuro e ela não escolheu nada.
   O framboesa fica mais claro aqui, senão some no fundo escuro. */
:root[data-tema="escuro"] {
  --cor-fundo:    #141413;
  --cor-texto:    #efece6;
  --cor-suave:    #8f8a82;
  --cor-linha:    rgba(239, 236, 230, 0.12);
  --cor-destaque: #f0748f;
  /* Contorno claro bem fino: sem ele, a roupa preta do bonequinho some no
     fundo escuro. */
  --contorno-avatar: drop-shadow(0 0 1px rgba(239, 236, 230, 0.7));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo:    #141413;
    --cor-texto:    #efece6;
    --cor-suave:    #8f8a82;
    --cor-linha:    rgba(239, 236, 230, 0.12);
    --cor-destaque: #f0748f;
    --contorno-avatar: drop-shadow(0 0 1px rgba(239, 236, 230, 0.7));
  }
}

/* --------------------------------------------------------------------------
   Arquivos da fonte. font-display: swap mostra o texto na hora com uma letra
   do sistema e troca pela DM Mono quando ela chega.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Mono";
  src: url('../fontes/DMMono-Regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url('../fontes/DMMono-Medium.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Regra de segurança: um elemento marcado como escondido some de verdade.
   Sem o !important, qualquer regra que defina display ganha dela. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--cor-fundo);
  /* Sem barra de rolagem visível: a página continua rolando normalmente
     (roda do mouse, touchpad, teclado, dedo no celular), só a barra cinza
     some. A primeira linha vale para Firefox e Chrome novo; a regra
     ::-webkit-scrollbar, logo abaixo, cobre Chrome, Edge e Safari antigos. */
  scrollbar-width: none;
  color-scheme: light dark; /* barras de rolagem acompanham o tema */
  -webkit-text-size-adjust: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.coluna::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--tam-texto);
  font-weight: var(--peso-normal);
  line-height: 1.5;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* Caixa alta aplicada pelo estilo, e não digitada no texto: o conteúdo
   continua escrito normal (bom para o Google e para leitores de tela). */
.caixa-alta { text-transform: uppercase; }

/* Contorno visível para quem navega pelo teclado. */
:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 3px;
}

/* Texto escondido da tela, mas lido por leitores de tela. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -3rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--cor-texto);
  color: var(--cor-fundo);
}
.pular:focus { top: 0.75rem; }

/* Sem JavaScript, a lista de trabalhos fica vazia: melhor nem mostrar o
   título dela, só o aviso logo abaixo. */
html:not(.js) .indice { display: none; }

/* Aviso que só aparece com o JavaScript desligado. */
.sem-js {
  max-width: 26em;
  color: var(--cor-suave);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Coluna da esquerda: você, a apresentação e a lista de trabalhos.
   No computador ela fica parada enquanto as capas rolam (regra lá embaixo).
   No celular ela é só o topo da página.
   -------------------------------------------------------------------------- */
.coluna {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: var(--margem);
  scrollbar-width: none; /* a coluna também rola sem mostrar barra */
}

.assinatura {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* O bonequinho em pixel. "pixelated" mantém os quadradinhos nítidos quando
   a imagem é mostrada maior ou menor que o tamanho original. Quando o GIF
   das suas versões ficar pronto, ele entra no lugar deste arquivo. */
.assinatura img {
  width: 2.75rem;
  height: auto;
  image-rendering: pixelated;
  filter: var(--contorno-avatar);
}
.assinatura__nome {
  font-size: var(--tam-nome);
  font-weight: var(--peso-forte);
  color: var(--cor-destaque);
  line-height: 1.2;
}
.assinatura__funcao {
  margin-top: 0.15rem;
  color: var(--cor-suave);
}

/* A apresentação é o único texto corrido da Home, então fica sem caixa alta
   e um pouco maior: maiúscula em parágrafo cansa a leitura. */
.intro {
  max-width: 28em;
  font-size: var(--tam-intro);
  line-height: 1.65;
  letter-spacing: 0;
}

.indice__titulo {
  margin-bottom: 0.65rem;
  font-size: var(--tam-texto);
  font-weight: var(--peso-normal);
  color: var(--cor-suave);
}
/* Cada linha: número, título e cliente em três colunas, como um índice
   datilografado. */
.indice a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--cor-linha);
}
.indice__num,
.indice__cliente { color: var(--cor-suave); }
.indice__cliente { text-align: right; }

/* Linha acesa: quando o mouse está nela, ou na capa do mesmo projeto
   (a classe "aceso" é colocada pelo arquivo js/site.js). */
.indice a:hover,
.indice a.aceso,
.indice a:hover span,
.indice a.aceso span { color: var(--cor-destaque); }

.coluna__pe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.coluna__pe a:hover,
.luz:hover { color: var(--cor-destaque); }
.coluna__pe .suave { color: var(--cor-suave); }

/* LinkedIn: no topo, à direita do nome, na cor do texto. O ícone pega a
   cor em volta (fill: currentColor), então acompanha o modo claro e o
   escuro sozinho, e fica framboesa quando o mouse passa. */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.icone-rede {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--cor-texto);
}
.icone-rede svg { fill: currentColor; }
.icone-rede:hover { color: var(--cor-destaque); }

/* Botão "Apagar a luz". Ele só aparece se o JavaScript funcionar, porque
   sem JavaScript ele não teria como trocar o tema: melhor não mostrar um
   botão que não faz nada. */
.luz {
  display: none;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-suave);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.js .luz { display: inline-flex; }
/* Bolinha meio cheia, meio vazia: o desenho de "claro/escuro". */
.luz::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* --------------------------------------------------------------------------
   Capas: duas colunas, com respiro, cantos levemente arredondados.
   -------------------------------------------------------------------------- */
.capas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-capas);
  padding: 0 var(--margem) var(--margem);
}
.capa {
  display: block;
  border-radius: var(--raio);
  /* A linha framboesa em volta aparece quando a capa (ou a linha da lista)
     está acesa. Ela fica desenhada desde o início, só que transparente,
     para a capa não "pular" de lugar quando acende. */
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.capa:hover,
.capa.aceso { outline-color: var(--cor-destaque); }
.capa img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--cor-linha);
}
/* No computador, quem diz o nome do projeto é a lista da esquerda; a
   legenda embaixo da capa só aparece no celular. */
.capa__legenda {
  display: none;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.capa__legenda .indice__num,
.capa__legenda .indice__cliente { color: var(--cor-suave); }

/* --------------------------------------------------------------------------
   PARTES COMUNS ÀS PÁGINAS DE PROJETO E SOBRE
   -------------------------------------------------------------------------- */

/* "← Trabalhos": a volta para a Home, logo abaixo do seu nome. */
.voltar {
  align-self: flex-start;
  color: var(--cor-suave);
}
.voltar:hover { color: var(--cor-destaque); }

/* Na coluna, o link da página em que a pessoa está fica aceso. */
.coluna__pe [aria-current="page"] { color: var(--cor-destaque); }

/* Área da direita das páginas internas: imagens, retrato e listas. */
.area {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-capas);
  padding: 0 var(--margem) var(--margem);
}

/* Títulos das seções (Ficha, Trajetória, Formação...): pequenos e cinza,
   como os rótulos de um formulário datilografado. */
.rotulo {
  margin-bottom: 0.65rem;
  font-size: var(--tam-texto);
  font-weight: var(--peso-normal);
  color: var(--cor-suave);
}

/* Linhas de dado: rótulo de um lado, valor do outro (Cliente / Disney). */
.dados {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
}
.dados dt,
.dados dd {
  margin: 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--cor-linha);
}
.dados dt { color: var(--cor-suave); }

/* Texto corrido (a ideia do projeto, o texto do Sobre): sem caixa alta e
   um pouco maior, porque maiúscula em parágrafo cansa. Linha em branco
   entre parágrafos, como num texto datilografado. */
.corrido {
  max-width: 30em;
  font-size: var(--tam-intro);
  line-height: 1.65;
  letter-spacing: 0;
}
.corrido p + p { margin-top: 1em; }

/* --------------------------------------------------------------------------
   PÁGINA DE PROJETO
   -------------------------------------------------------------------------- */
.ficha {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Na ficha, a ideia e as linhas ficam um pouco menores e mais juntas, para
   caber o máximo possível na altura de um notebook. Se mesmo assim não
   couber, a coluna rola sozinha (sem barra) com o mouse em cima dela. */
.ficha .corrido {
  font-size: var(--tam-texto);
  line-height: 1.55;
}
.ficha .dados dt,
.ficha .dados dd { padding: 0.28rem 0; }
.ficha .rotulo { margin-bottom: 0.35rem; }
.ficha__num { color: var(--cor-suave); }
.ficha__titulo {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: var(--peso-forte);
  line-height: 1.3;
}
.ficha .origem { color: var(--cor-destaque); }

/* Todas as mídias têm a MESMA largura, numa coluna só, como no Thiago Egg:
   é isso que deixa a página calma. Cada uma mantém a proporção própria,
   então só a altura muda de uma para outra. */
.midia {
  margin: 0;
}
.midia img {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  background: var(--cor-linha);
}
/* Vídeos (YouTube ou Vimeo) sempre em 16:9. Por enquanto é só um espaço
   reservado; o vídeo de verdade entra na etapa 3. */
.midia--video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio);
  /* Enquanto não há vídeo, o espaço é um cinza discreto, que não pesa. */
  background: var(--cor-linha);
  color: var(--cor-suave);
}

/* Quando há link, o player do YouTube/Vimeo ocupa a caixa 16:9 inteira. */
.midia--video { position: relative; overflow: hidden; }
.midia--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Próximo projeto": no fim das mídias, leva para o seguinte da lista. */
.proximo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espaco-capas);
  align-items: end;
  margin-top: 2.5rem;
  padding-top: var(--espaco-capas);
  border-top: 1px solid var(--cor-linha);
}
.proximo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
}
.proximo__texto { display: flex; flex-direction: column; gap: 0.35rem; }
.proximo__rotulo { color: var(--cor-suave); }
.proximo:hover .proximo__rotulo,
.proximo:hover .proximo__titulo { color: var(--cor-destaque); }

/* --- A história do projeto (área da direita) --------------------------- */

/* Frase de abertura: a ideia em uma frase, maior que o resto. */
.abertura-projeto {
  max-width: 26em;
  margin-bottom: 1rem;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Bloco de texto entre as peças: rótulo pequeno em cima e o texto em
   letra normal (sem caixa alta), com mais espaço em volta do que entre
   duas peças, para o texto respirar e marcar as "partes" da história. */
.bloco-texto {
  max-width: 34em;
  margin-block: 1.25rem;
  font-size: var(--tam-intro);
  line-height: 1.65;
  letter-spacing: 0;
}
.bloco-texto p + p { margin-top: 1em; }

/* Legenda embaixo de uma peça: pequena e cinza, para não competir. */
.legenda {
  max-width: 40em;
  margin-top: 0.6rem;
  color: var(--cor-suave);
  font-size: var(--tam-texto);
  line-height: 1.5;
  letter-spacing: 0;
}

/* Duas imagens lado a lado, dividindo a largura. A legenda ocupa a linha
   de baixo inteira. */
.par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--espaco-capas);
}
.par .legenda { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   PÁGINA SOBRE
   -------------------------------------------------------------------------- */
/* O retrato grande. Por enquanto é o bonequinho em pixel, aumentado sem
   borrar; quando houver foto, ela entra no mesmo lugar. */
.retrato {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  /* Altura limitada para Trajetória e Formação aparecerem logo abaixo,
     sem a pessoa precisar rolar muito. */
  height: clamp(15rem, 48vh, 26rem);
  border-radius: var(--raio);
  background: var(--cor-linha);
}
.retrato img {
  width: auto;
  height: 82%;
}
/* Só o bonequinho em pixel é aumentado sem borrar; uma foto não precisa. */
.retrato img.retrato--pixel {
  image-rendering: pixelated;
  filter: var(--contorno-avatar);
}
.secoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--espaco-capas);
  margin-top: 1.5rem;
}
/* Linhas de trajetória e formação: quando, o quê e onde, em colunas. */
.linhas li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--cor-linha);
}
.linhas .quando,
.linhas .onde { color: var(--cor-suave); }
.linhas .onde { grid-column: 2; }
.linhas a:hover { color: var(--cor-destaque); }

/* --------------------------------------------------------------------------
   Computador (a partir de 1024px): a coluna fica presa à esquerda e as
   capas rolam ao lado. Abaixo disso, tudo vira uma página que desce.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .coluna {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--largura-coluna);
    /* Se um dia a lista crescer mais que a tela, a coluna rola sozinha
       em vez de cortar os últimos projetos. */
    overflow-y: auto;
  }
  .coluna__pe { margin-top: auto; }
  .capas,
  .area {
    margin-left: var(--largura-coluna);
    padding: var(--margem) var(--margem) var(--margem) 0;
  }
  /* Página de projeto com respiro: as peças ficam numa coluna de largura
     fixa (no máximo 54rem, uns 860px), com fundo sobrando à direita e um
     espaço pequeno e sempre igual entre elas. */
  .area--projeto {
    gap: 1.5rem;
    padding: var(--margem) var(--margem) clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 3vw, 3.5rem);
  }
  .area--projeto > * { max-width: 54rem; }
}

/* Celular e tablet: a lista de trabalhos sai do topo (as capas com legenda
   já cumprem esse papel) e cada capa ganha o nome embaixo. */
@media (max-width: 63.99rem) {
  .indice { display: none; }
  .capa__legenda { display: grid; }
  /* Sobre, luz e e-mail lado a lado, para as capas subirem na tela. */
  .coluna__pe { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
}

/* Celular: uma capa por linha, senão ficam pequenas demais. As seções do
   Sobre também empilham. */
@media (max-width: 40rem) {
  .capas { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .par { grid-template-columns: minmax(0, 1fr); row-gap: var(--espaco-capas); }
  .secoes { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   COLUNA QUE SEMPRE CABE NA TELA (computador)
   Tudo dentro da coluna é medido a partir de um tamanho só, que depende de
   --escala. Em tela alta, --escala vale 1 (letra de 12px). Em tela mais
   baixa, o arquivo js/site.js diminui --escala aos pouquinhos até a coluna
   inteira caber, sem rolar: letras e espaços encolhem juntos, na mesma
   proporção. Sem JavaScript, as duas regras de altura logo abaixo já
   deixam a coluna menor em telas baixas.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .coluna {
    --escala: 1;
    font-size: calc(0.75rem * var(--escala));
    gap: 2em;
    padding: calc(var(--margem) * var(--escala)) var(--margem);
  }
  .coluna .assinatura { gap: 1em; }
  .coluna .assinatura img { width: 3.667em; }
  .coluna .assinatura__nome { font-size: 1.25em; }
  .coluna .assinatura__funcao { margin-top: 0.2em; }
  .coluna .icone-rede svg { width: 1.833em; height: 1.833em; }
  .coluna .intro,
  .coluna .corrido { font-size: 1.0833em; }
  .coluna .ficha .corrido { font-size: 1em; }
  .coluna .indice__titulo,
  .coluna .rotulo { font-size: 1em; margin-bottom: 0.55em; }
  .coluna .indice a {
    grid-template-columns: 3em minmax(0, 1fr) auto;
    gap: 0.667em;
    padding: 0.533em 0;
  }
  .coluna .dados { grid-template-columns: 8.667em minmax(0, 1fr); }
  .coluna .dados dt,
  .coluna .dados dd { padding: 0.533em 0; }
  .coluna .ficha { gap: 1.667em; }
  .coluna .ficha .dados dt,
  .coluna .ficha .dados dd { padding: 0.375em 0; }
  .coluna .ficha .rotulo { margin-bottom: 0.3em; }
  .coluna .ficha__titulo { font-size: 1.1667em; margin-top: 0.25em; }
  .coluna .coluna__pe { gap: 0.667em; }
}
@media (min-width: 64rem) and (max-height: 640px) { .coluna { --escala: 0.9; } }