@media (max-width: 900px) {
  /* O site.css redefine .site-header para z-index:2 numa regra tardia, o que
     empata com o main e deixaria o dropdown atras do conteudo. */
  .site-header {
    z-index: 31;
  }

  /* Botao a esquerda, logo centralizada. As colunas laterais compartilham o
     mesmo minimo, entao a logo cai no centro real da viewport. */
  .header-inner {
    grid-template-columns: minmax(3rem, 1fr) auto minmax(3rem, 1fr);
    gap: 0.75rem;
    /* static para o dropdown se ancorar no .site-header (largura total) */
    position: static;
  }

  .nav-shell {
    grid-column: 1;
    justify-self: start;
    width: auto;
  }

  .brand {
    position: static;
    grid-column: 2;
    align-self: center;
    justify-self: center;
  }

  .brand img {
    width: clamp(9rem, 36vw, 12rem);
  }

  /* Botao so com o icone. O site.css zera a cor (color:#0000) para esconder o
     label do hamburguer antigo, e o stroke do SVG usa currentColor. */
  .nav-shell summary {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--ink);
  }

  /* Desliga os tracos do hamburguer legado do site.css, que eram pintados
     por cima do conteudo do botao. */
  .nav-shell summary::before,
  .nav-shell summary::after {
    content: none;
  }

  .nav-shell[open] summary {
    background: var(--paper-2);
  }

  /* Dropdown de borda a borda, alinhado a esquerda com a margem do conteudo. */
  .nav-shell nav {
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
    left: 0;
    grid-template-columns: 1fr;
    justify-content: stretch;
    justify-items: start;
    margin-top: 0;
    padding: 0.5rem 1rem 1rem;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: 0 0.75rem 1.5rem -0.75rem rgb(0 0 0 / 0.18);
  }

  .nav-shell nav a {
    width: 100%;
  }
}