/* topo.css: a marca em Anton à esquerda e o menu em linha à direita, com a lupa e, no telefone, os três tracinhos.
   No início e no Sobre a barra fica transparente por cima do vídeo (.topo--sobre-video); nas outras páginas é
   uma faixa grafite com uma linha embaixo. O menu do telefone mora no modal do comum (.menu-telefone).
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.topo {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--margem);
  background: var(--fundo); border-bottom: 1px solid var(--linha);
}

.topo--sobre-video { position: absolute; inset: 0 0 auto; background: none; border-bottom: 0; }

/* ------------------------------------------------------------ a marca */

.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--letra-titulo); font-size: 22px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto); text-decoration: none; white-space: nowrap;
}

/* a luz de gravando, antes do nome */
.marca::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--laranja); }

/* ------------------------------------------------------------ o menu em linha */

.topo__nav { display: flex; align-items: center; gap: 2px; }

.topo__links { display: none; }

.topo__links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--texto-suave);
}
.topo__links a:hover { color: var(--texto); }
.topo__links a[aria-current="page"] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--laranja); }

.topo__icone {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--raio-pequeno);
  background: none; color: var(--texto);
}
.topo__icone:hover { background: rgba(242, 242, 240, .08); }
.topo__icone svg { width: 22px; height: 22px; }

/* o menu do telefone, dentro do modal */
.menu-telefone { display: grid; }
.menu-telefone a {
  display: block; padding: 14px 8px; border-bottom: 1px solid var(--linha);
  font-family: var(--letra-titulo); font-size: 28px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
.menu-telefone a:last-child { border-bottom: 0; }
.menu-telefone a:hover { color: var(--laranja); }

@media (min-width: 900px) {
  .topo { padding: 18px 32px; }
  .marca { font-size: 26px; }
  .topo__links { display: flex; gap: 4px; }
  .topo__menu { display: none; }
}