/* ========================================================================== Jorge Maia — rebrand "jorge_maia" (terminal) Estética derivada do logo: janela de terminal charcoal quente, wordmark mono-slab cream, traffic lights, carimbo âmbar tracejado, humor de CLI. Dark = estúdio/terminal · Light = editorial em papel cream. ========================================================================== */ :root { --term: #2b2a27; /* fundo da janela (logo) */ --term-deep: #201f1d; /* fundo de página escuro / header */ --term-pane: #343330; /* painel elevado */ --cream: #f2efe4; /* wordmark (logo) */ --out-gray: #a6a39a; /* output de terminal (logo) */ --red: #ef5b51; /* traffic light */ --amber: #f6b03d; /* traffic light + carimbo v.31+ */ --green: #43c24f; /* traffic light */ --paper: #faf7ef; /* seções editoriais */ --paper-2: #f2eee2; --text-dark: #26251f; --text-muted: #5c5a52; --amber-ink: #8a6100; /* âmbar legível sobre paper (5.3:1) */ --red-ink: #b3261e; /* vermelho legível sobre paper (6.1:1) */ --font-mono: "Space Mono", "Consolas", monospace; --font-body: "Hanken Grotesk", "Segoe UI", sans-serif; --max-w: 1160px; /* A coluna do artigo. Cabecalho, capa, ficha tecnica e galeria ficam nesta largura -- antes a capa vinha em .container (1160px), o texto em 46em (~780px) e a ficha tecnica em largura nenhuma, indo de ponta a ponta da viewport. Eram tres larguras empilhadas na mesma pagina. O `94vw` e o que faz a pagina ocupar a mesma fatia de tela que ocupava a 1160px sob zoom de 150% -- que era a proporcao pedida. O teto de 1400px existe para monitor ultrawide, onde 94vw passaria de 2000px. */ --max-w-artigo: min(1400px, 94vw); /* A prosa para aqui. Alinha com a coluna ate onde a linha continua legivel; imagem, galeria, 
 e ficha usam a coluna inteira. */
  --max-w-prosa: 54em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 12px;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--red-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* elementos focáveis não podem parar embaixo do header sticky */
a, button, input, summary, .section, .now, main, .site-footer { scroll-margin-top: calc(var(--header-h) + 1rem); }

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--paper);
  color: var(--text-dark);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
}

/* --- Traffic lights ------------------------------------------------------- */
.tl { display: inline-flex; gap: 7px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; }
.tl .r { background: var(--red); }
.tl .a { background: var(--amber); }
.tl .g { background: var(--green); }

/* --- Eyebrow: comando de terminal ------------------------------------------ */
.topic {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--topic-color, var(--amber-ink));
  margin: 0 0 1rem;
}
.topic::before { content: "$ "; color: var(--topic-prefix, var(--text-muted)); }
.hero, .now, .on-ink, .post-header, .site-footer {
  --topic-color: var(--amber);
  --topic-prefix: var(--out-gray);
}

/* --- Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--term-deep) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ffffff14;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.brand:hover { text-decoration: none; }
.brand .cursor { margin-left: 0.05em; }
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  /* nenhum rotulo quebra em duas linhas: a barra tem altura fixa e um item em
     duas linhas empurra os vizinhos e desalinha o botao */
  white-space: nowrap;
}

/* O card do logo NAO empurra a nav.
   
   Ele e `position: fixed` -- flutua sobre a barra, fora do fluxo, e por
   definicao nao ocupa espaco. Uma versao anterior reservava a largura dele com
   padding-left no container do header, e o efeito era o oposto do desejado: a
   nav era empurrada para a direita e "sobre" saia do lugar.
   
   O que evita a sobreposicao agora e a barra ter cinco rotulos curtos em vez de
   treze. Com o container em 1160px, a nav ocupa cerca de 500px a direita e
   comeca por volta dos 660px; o card vai ate 950 * 0.48 = 456px mais o gutter.
   Sobra folga. Nos breakpoints o --logo-scale cai junto (0.38 e 0.3), e abaixo
   de 900px a nav vira 
 -- nao ha o que sobrepor.
   
   Se um item novo entrar na barra, e a conta acima deixar de fechar, a saida e
   encurtar rotulo ou marcar `topbar: false` no _data/nav.yml. Nao voltar a
   empurrar o header. */
.site-nav a {
  color: var(--out-gray);
  font-size: 0.95rem;
  font-family: var(--font-mono);
}
.site-nav a:hover { color: var(--cream); text-decoration: none; }
.site-nav a.nav-cta {
  background: var(--amber);
  color: var(--term-deep);
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 8px;
}
.site-nav a.nav-cta:hover { background: #ffc45e; }

/* --- Grupo de nav: submenu que abre no hover e no foco ---------------------------
   O nav.yml tem sete itens de topo, tres deles com filhos. Achatar tudo colocava
   treze links na barra -- apertado, e o card do hero passava por cima.

   Sem JS de proposito, no mesmo espirito do menu mobile em 
: abre no
   :hover e no :focus-within, entao teclado e leitor de tela chegam la. O grupo
   inteiro e um 
 com um