/* Forza Verde: tokens e base.
   Cores medidas nas artes originais (wordmark do flyer, brasão, escudo) e ajustadas para tela.
   Contraste WCAG conferido em fase-0/index.html. Regras de uso no fim deste bloco. */
:root {
  --noite: #06140D;        /* base de tudo */
  --mata: #0D2418;         /* superfície sobre a noite */
  --palmeiras: #006437;    /* blocos e estrutura */
  --lima: #4BD25A;         /* acento: no máximo 2 pontos por tela */
  --ouro: #C9A03A;         /* títulos de destaque e ornamentos, só sobre noite/mata */
  --ouro-tinta: #7A5A14;   /* ouro para texto sobre papel */
  --papel: #EFE8D6;        /* texto sobre escuro e fundos editoriais */
  --papel-2: #9BA190;      /* texto secundário sobre noite/mata */
  --tinta-2: #48503F;      /* texto secundário sobre papel */
  --vinho: #AD191B;        /* só dentro do brasão, nunca interface */
  --filete: rgb(239 232 214 / .16);
  --filete-forte: rgb(239 232 214 / .34);
  --filete-tinta: rgb(6 20 13 / .2);

  --f-display: 'Bodoni Moda', 'Bodoni 72', Didot, serif;
  --f-texto: 'Newsreader', Georgia, serif;
  --f-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --t-mega: clamp(5.5rem, 34vw, 23rem);
  --t-1: clamp(3.25rem, 8.6vw, 8.25rem);
  --t-2: clamp(2.125rem, 4.4vw, 4.25rem);
  --t-3: clamp(1.5rem, 2.4vw, 2.125rem);
  --t-4: clamp(1.1875rem, 1.4vw, 1.375rem);
  --t-corpo: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  --t-meta: .8125rem;

  --colunas: 4;
  --margem: clamp(16px, 5vw, 72px);
  --calha: clamp(12px, 1.6vw, 24px);
  --largura: 1600px;
  --e-1: 4px; --e-2: 8px; --e-3: 16px; --e-4: 24px; --e-5: 40px; --e-6: 64px; --e-7: 104px; --e-8: 168px;
  --topo: 72px;
  --wordmark-proporcao: 9.112; /* largura ÷ altura de img/marca/wordmark.svg; tools/wordmark.py informa o valor */

  /* grão de impressão: fica no fundo, atrás do texto, para não falhar os traços finos das letras */
  --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .91 0 0 0 0 .84 0 0 0 .36 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .024 0 0 0 0 .078 0 0 0 0 .051 0 0 0 .3 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* tamanho óptico da Bodoni nos títulos: menos contraste que o automático, traços finos mais firmes */
  --opsz-display: 'opsz' 14;
  --opsz-numeros: 'opsz' 10; /* números grandes: a diagonal do 4 não pode sumir */

  --curva: cubic-bezier(.16, .84, .24, 1);
  --dur: .9s;

  /* Uso: ouro e lima nunca dividem área grande. Ouro nunca é texto sobre papel nem sobre palmeiras
     (use --ouro-tinta no papel). Lima só sobre noite/mata. Raio 0; no máximo 2px. */
}
@media (min-width: 640px) { :root { --colunas: 6; } }
@media (min-width: 1024px) { :root { --colunas: 12; } }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--noite);
  background-image: var(--grao-claro);
  color: var(--papel);
  font: 400 var(--t-corpo)/1.55 var(--f-texto);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: inherit; }

.grade {
  display: grid;
  grid-template-columns: repeat(var(--colunas), minmax(0, 1fr));
  column-gap: var(--calha);
  padding-inline: var(--margem);
  max-width: var(--largura);
  margin-inline: auto;
}
.grade > * { min-width: 0; }
.meta {
  font: 500 var(--t-meta)/1.45 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.vo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--margem); top: -100px; z-index: 100; padding: 12px 16px; background: var(--papel); color: var(--noite); }
.pular:focus { top: 8px; }

/* wordmark por máscara: um SVG em cache, cor herdada do texto */
.wordmark {
  display: block;
  aspect-ratio: var(--wordmark-proporcao);
  background: currentColor;
  -webkit-mask: url(../img/marca/wordmark.svg) center / contain no-repeat;
  mask: url(../img/marca/wordmark.svg) center / contain no-repeat;
}
@media (forced-colors: active) { .wordmark { forced-color-adjust: none; background: CanvasText; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}