/* juau.dev
   Estilo de homepage de pesquisador: coluna unica estreita, fonte de sistema,
   link azul sublinhado, nenhuma caixa. A hierarquia vem de tamanho e peso.
   Zero requisicao externa, zero JavaScript, zero animacao. */

/* Somente tema claro, por decisao do autor. Nenhuma das referencias
   (jamie-wong, joschu, karpathy, hugocbp, vmnog) tem dark mode. */
/* Paleta quente, medida do hugocbp.com: fundo #fafaf9 e texto #1c1917 em vez
   de branco e preto puros. Link na cor do texto, como ele faz, mas SUBLINHADO:
   ele tira o sublinhado tambem, e ai nao da para saber o que e clicavel. */
:root {
  --bg:     #fafaf9;
  --text:   #1c1917;
  --muted:  #6b6560;
  --link:   #1c1917;
  --rule:   #e0ddd8;
  --code:   #f0efec;
  /* Cinza mais claro que --muted, so para as etiquetas de secao da home. */
  --faint:  #a8a29e;
  /* Azul da bandeira da Suecia no sobrenome do topo. O hugocbp.com usa
     vermelho #7f1d1d no lugar equivalente. */
  --accent: #006aa7;
  /* Padding lateral do corpo. Fica em variavel porque o rodape precisa do
     mesmo valor com sinal trocado para sangrar o fio ate a borda. */
  --pad-h:  1.25rem;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; }

/* 660px de largura, corpo 17.6px e entrelinha 1.70: as medidas do hugocbp.com.
   Ele usa Inter; aqui fica a pilha do sistema, para nao buscar fonte externa. */
body {
  margin: 0 auto;
  max-width: 41.25rem;
  padding: 2.5rem var(--pad-h) 4rem;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif;
  font-size: 17.6px;
  line-height: 1.7;
}

/* ---------- cabecalho e rodape ---------- */

/* Tres colunas, e nao flex com space-between: a coluna do meio precisa ficar no
   centro da BARRA, nao no meio da sobra. Com 1fr auto 1fr as duas laterais
   crescem igual e o grupo central fica centrado mesmo com o nome curto de um
   lado e o seletor de idioma largo do outro. */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
  /* 5em = 88px, o vao que o hugocbp.com deixa entre a barra e o h1 da home
     (nav com padding-top 44px, hero com padding-top 88px). Nosso era 28px. */
  margin-bottom: 5em;
  /* Sem font-size aqui: os filhos usam em contra os 17.6px do body para cair
     nas medidas do hugocbp.com. Uma base no container comporia por cima e
     encolheria tudo (0.85em de 14.4px da 12.24px, nao 14.96px). */
}

.topbar .secoes { justify-self: center; }
.topbar .langs  { justify-self: end; }

/* Assinatura do topo, no formato do hugocbp.com: nome em duas cores, sem
   sublinhado. Medidas dele: 14.96px, peso 500, letter-spacing -0.01em. */
.nav-name {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: -0.01em;
}
.nav-accent { color: var(--accent); }

.secoes { display: flex; align-items: baseline; gap: 0.9rem; }

/* Links de secao: 14.08px e cinza, como os dele. Sem sublinhado nem no hover --
   na barra do topo a afordancia vem da posicao, nao do sublinhado. */
.secoes a { color: var(--muted); text-decoration: none; font-size: 0.8em; }

.langs { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.langs > * { display: inline-flex; align-items: center; gap: 0.3rem; }
.langs svg { display: block; flex: none; border: 1px solid var(--rule); }

/* O idioma atual fica apagado e sem sublinhado; o outro e link de verdade,
   com nome por extenso para nao depender so da bandeira. */
.langs .on { color: var(--muted); }
.langs .on svg { opacity: 0.45; }
/* Unico lugar da barra que ainda sublinha no hover: o idioma inativo. Aqui a
   afordancia vale, porque a bandeira apagada nao diz sozinha que e clicavel. */
.langs a { text-decoration: none; }
.langs a:hover span { text-decoration: underline; }

footer {
  /* Mesmo ritmo das secoes: 52.8px antes do fio, 35.2px depois, que e o
     border-top + padding-top de 2rem do rodape dele. rem, nao em: o footer
     esta em 0.88rem e em mediria contra 14.08px. */
  margin-top: 3.3rem;
  padding-top: 2.2rem;
  /* O fio do rodape e mais largo que os das secoes, como no hugocbp.com: la o
     footer tem padding lateral e as sections nao, entao a borda dele sangra ate
     a borda do container. Aqui o mesmo efeito puxando o rodape para fora do
     padding do body e devolvendo por dentro -- o fio cresce, o texto nao anda. */
  margin-inline: calc(-1 * var(--pad-h));
  padding-inline: var(--pad-h);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- texto ---------- */

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 650;
  margin: 0 0 0.75rem;
}

/* Na pagina de projetos: h2 e o nome do projeto, h3 as secoes dele, h4 as
   subsecoes do detalhe tecnico. O h2 ganha respiro extra em cima para separar
   um projeto do outro sem precisar de <hr> nem borda. */
h2 { font-size: 1.35rem; font-weight: 650; margin: 3rem 0 0.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.08rem; font-weight: 650; margin: 1.9rem 0 0.4rem; }
h4 { font-size: 0.95rem; font-weight: 650; margin: 1.4rem 0 0.35rem; color: var(--muted); }

/* Ancora nao encosta no topo da janela ao chegar por /projetos.html#bananablet */
h2[id], h3[id] { scroll-margin-top: 1.5rem; }

/* Nome do cliente ao lado do titulo do projeto, na mesma linha e em segundo
   plano. O travessao vai no MARKUP, nao em ::before: conteudo gerado por CSS
   nao entra no textContent, e quem raspa a pagina leria os dois grudados. */
h2 .cliente {
  font-weight: 400;
  font-size: 0.72em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- home: saudacao e etiquetas de secao ----------
   Medidas tiradas do hugocbp.com. O h1 dele mistura dois pesos na mesma linha:
   a saudacao em 300 e o nome em 700, no mesmo tamanho e na mesma cor.

   Aqui o tamanho vem em em, e nao em rem: rem resolve contra os 16px do <html>,
   entao 2.25rem daria 36px, 10% menor que os 39.6px dele. em herda o corpo de
   17.6px do body e cai exatamente na medida (2.25 x 17.6 = 39.6). */

h1.hero {
  font-size: 2.25em;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 1.25rem;
}

h1.hero .leve { font-weight: 300; }

.tagline {
  /* 4.4rem = 70.4px, o padding-bottom do hero dele. Colapsa com o margin-top do
     primeiro h2 e prevalece por ser maior, entao o fio de AGORA fica na mesma
     altura relativa que o dele. rem pelo mesmo motivo do h2: este p esta em
     0.95em, e em aqui mediria contra 16.72px. */
  margin: 0 0 4.4rem;
  color: var(--muted);
  font-size: 0.95em;   /* 16.72px, a medida dele */
  line-height: 1.6;
}

/* Na home o h2 e etiqueta de secao, nao titulo: pequeno, caixa alta, cinza
   claro. Na pagina de projetos o h2 e o nome do projeto e continua grande --
   por isso a regra depende da classe que o build poe no <main> da home.

   O fio que separa as secoes e dele: section { padding: 3rem 0; border-top }.
   Nosso markdown nao gera <section>, so uma lista plana de h2 e conteudo, entao
   a borda vai no proprio h2. O desenho fica igual -- conteudo, 52.8px, fio,
   52.8px, etiqueta -- sem precisar embrulhar nada no build. */
main.home h2 {
  font-size: 0.7em;    /* 12.32px, e o letter-spacing de 0.12em cai nos 1.48px dele */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  border-top: 1px solid var(--rule);
  /* 3.3rem = 52.8px. Aqui e rem, nao em: em num margin/padding resolve contra
     o font-size DO PROPRIO elemento, e este h2 esta em 0.7em (12.32px), entao
     3em daria 36.96px. rem resolve contra os 16px do html e cai na medida. */
  margin: 3.3rem 0 1.5rem;
  padding-top: 3.3rem;
}

/* Linha de contato do rodape da home, no formato dele: links soltos, lado a lado.
   O sublinhado NAO e text-decoration: e border-bottom na cor de regua, 2px
   abaixo do texto, que escurece ate a cor do texto no hover. Duas vantagens
   sobre o sublinhado normal: a linha fica solta dos glifos, entao nenhum "g" ou
   "j" a atravessa, e o hover acende uma linha que ja estava la em vez de fazer
   uma aparecer do nada. flex-wrap continua wrap, que ele nao usa, porque o
   e-mail e comprido e precisa quebrar no celular. */
.contatos { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5em; }

.contatos a {
  font-size: 0.9em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}

.contatos a:hover { border-color: var(--text); }

p { margin: 0 0 0.8rem; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 1.75rem 0; }

ul, ol { margin: 0 0 0.8rem; padding-left: 1.4rem; }
li { margin-bottom: 0.35rem; }

/* ---------- projetos na home ----------
   Formato do hugocbp.com: titulo, stack, descricao, e um link explicito no fim.
   Lista vertical de blocos, sem card e sem borda. */

/* Linha entre projetos, medida dele: 2.25rem de respiro dos dois lados do fio.
   Vai como border-TOP no irmao seguinte, e nao border-bottom com :last-child:
   os .projeto nao sao os ultimos filhos do main (vem h2 e mais divs depois),
   entao :last-child nao pegaria o certo e :last-of-type pegaria o .contatos.
   Com o combinador de irmao adjacente, o fio so existe ENTRE dois projetos. */
.projeto { margin: 0 0 2.25em; }

.projeto + .projeto {
  padding-top: 2.25em;
  border-top: 1px solid var(--rule);
}

/* Nome, stack e ano na MESMA linha. Em tela estreita o conjunto quebra
   naturalmente, com o ano indo para a linha de baixo. */
.projeto h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}

.projeto h3 a { color: var(--text); text-decoration: none; }
.projeto h3 a:hover { text-decoration: underline; }

.stack { font-weight: 400; font-size: 0.82rem; color: var(--muted); }

/* Empurra o ano para a direita da linha. */
.ano {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
}

.projeto p { margin: 0 0 0.4rem; }
.projeto p:last-child { margin-bottom: 0; }

.mais { font-size: 0.9rem; text-decoration: none; }
.mais:hover { text-decoration: underline; }
.mais::after { content: " \2192"; }

blockquote {
  margin: 1rem 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}

blockquote p:last-child { margin-bottom: 0; }

/* ---------- codigo ---------- */

code {
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
  background: var(--code);
  padding: 0.1em 0.3em;
}

pre {
  background: var(--code);
  padding: 0.75rem 0.85rem;
  overflow-x: auto;
  margin: 0 0 0.9rem;
  line-height: 1.4;
}

pre code { background: none; padding: 0; font-size: 0.8rem; }

/* ---------- tabelas ---------- */

.table-scroll { overflow-x: auto; margin: 0 0 1rem; }

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }

th, td {
  text-align: left;
  padding: 0.35rem 0.7rem 0.35rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th { color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ---------- responsivo ---------- */

@media (max-width: 640px) {
  /* Sobrescreve a variavel, e nao so o padding do body: o rodape le a mesma
     medida para sangrar o fio, entao os dois tem que andar juntos. */
  :root { --pad-h: 1rem; }
  body { padding: 1.5rem var(--pad-h) 3rem; font-size: 16px; }
  h1 { font-size: 1.45rem; }
  h1.hero { font-size: 1.9em; }
  .tagline { margin-bottom: 2.4rem; }
  /* As tres colunas nao cabem em 320px. Nome e idioma dividem a primeira
     linha, as secoes descem inteiras para a segunda. O vao encolhe para 3.5em,
     a mesma proporcao que ele usa abaixo de 640px. */
  .topbar { grid-template-columns: auto 1fr; row-gap: 0.75rem; margin-bottom: 3.5em; }
  .topbar .nav-name { grid-area: 1 / 1; }
  .topbar .langs    { grid-area: 1 / 2; }
  .topbar .secoes   { grid-area: 2 / 1 / 2 / -1; justify-self: start; }
  /* h2 tem que continuar acima do h3, senao a hierarquia empata no mobile */
  h2 { font-size: 1.2rem; margin-top: 2.4rem; }
  h3 { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}

@media print {
  .topbar nav, footer { display: none; }
  body { max-width: none; font-size: 10.5pt; color: #000; background: #fff; }
  a { color: #000; }
}