/* Rede de segurança pra navegador que não consegue aplicar o CSS moderno do
   site (Tailwind v4 depende de recursos que só existem a partir do Safari
   16.4 — iPhone 7 pra baixo nem consegue atualizar até lá, e iPad desatualizado
   cai no mesmo caso). Quando isso acontece a página não pode virar texto
   solto ilegível com as imagens do tamanho do arquivo original.

   ⚠️ TUDO tem que ficar dentro do @supports.

   Especificidade baixa NÃO basta pra este arquivo ser inofensivo: o Tailwind v4
   põe as utilidades dentro de um @layer, e regra em layer perde pra regra FORA
   de layer por mais fraca que seja. Sem a trava abaixo, um `img { height: auto }`
   aqui derruba o `h-6` de TODA imagem do site (foi o que aconteceu: o ícone da
   Donna esticou e o vídeo do topo virou um bloco cinza).

   `color-mix` é o detector: chegou no Safari 16.2, quase junto do que o Tailwind
   v4 exige. Navegador que tem = pula este arquivo inteiro. Navegador que não
   tem = é justamente o que precisa do socorro. */

@supports not (color: color-mix(in srgb, red, blue)) {
  html, body { background: #FBF6EB; margin: 0; }
  body {
    color: #33291E;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
  }
  a { color: #9C7A3A; }
  h1, h2, h3 { color: #21160A; }
  img, video, svg { max-width: 100%; height: auto; }
  /* a logo DONNA no topo: sem a classe h-[19px] do Tailwind ela renderiza do
     tamanho real do PNG (centenas de px) — trava aqui numa altura de ícone. */
  img[alt="DONNA"] { height: 24px; width: auto; }
  nav svg, header svg, button svg, a svg { width: 20px; height: 20px; }
}