/*
Regra de layout (branch novembro, tarefa 10):
- .aside-menu fica SEMPRE acima da coluna, alinhado a largura do .main
  (menu no topo = padrao em todo desktop; mobile <=640px reempilha).
- .main fica SEMPRE centralizado na janela, largura fixa (nao reflui) ate
  o breakpoint mobile.
- .aside-menu traz so navegacao (Inicio/Curriculo/Galeria) + switch de texto;
  nome/cargo ficam no topo do .main (index/curriculo) ou como
  .article-header (artigos). Contato vive no fim da bio do index.
- Quando "↩ Inicio" esta presente, fica a esquerda da faixa; o restante
  dos itens agrupa a direita (ver style.css).
*/

body {
  position: relative;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-ink);
}

.main {
  width: var(--main-width);
  margin-inline: auto;
  padding-top: 24px;
  padding-bottom: 96px;
}

/* O espaco entre secoes pertence a secao, nao a margem do ultimo filho dela
   — assim ele nao muda conforme o conteudo que fecha cada bloco. */
.main > section {
  margin-bottom: 40px;
}

.main > section:last-child {
  margin-bottom: 0;
}

.aside-menu {
  position: static;
  margin-inline: max(24px, calc(50% - var(--main-width) / 2));
  width: var(--main-width);
  padding-top: 48px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 24px;
}

.aside-menu ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 24px;
  margin-top: 0;
  /* largura total da coluna: sem isso o margin-right:auto do Inicio
     nao tem espaco livre e o link fica colado ao restante do menu */
  width: 100%;
}

.aside-menu a {
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.aside-menu a:hover {
  color: var(--color-ink);
}