/* Fontes hospedadas localmente (privacidade/LGPD: sem chamada a fonts.googleapis.com nem
   fonts.gstatic.com). Arquivos variaveis/estaticos originais do Google Fonts, subconjunto
   "latin" (cobre pt-BR/en; ver deploy/README.md sobre como regerar). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: oklch(0.985 0.004 85); --ink: #000;
  --rule: oklch(0.87 0.008 70); --rule2: oklch(0.8 0.008 70);
  --meta: oklch(0.45 0.01 60); --faint: oklch(0.52 0.012 60);
  --accent: oklch(0.48 0.11 32); --chip: oklch(0.93 0.008 75);
  --sel: oklch(0.9 0.05 80);
  --sans: Onest, system-ui, sans-serif;
  --display: 'Bricolage Grotesque', Onest, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: oklch(0.165 0.006 70); --ink: oklch(0.97 0.003 85);
  --rule: oklch(0.31 0.006 70); --rule2: oklch(0.42 0.008 70);
  --meta: oklch(0.7 0.008 70); --faint: oklch(0.62 0.008 70);
  --accent: oklch(0.76 0.115 45); --chip: oklch(0.27 0.008 70);
  --sel: oklch(0.42 0.09 60);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: oklch(0.165 0.006 70); --ink: oklch(0.97 0.003 85);
    --rule: oklch(0.31 0.006 70); --rule2: oklch(0.42 0.008 70);
    --meta: oklch(0.7 0.008 70); --faint: oklch(0.62 0.008 70);
    --accent: oklch(0.76 0.115 45); --chip: oklch(0.27 0.008 70);
    --sel: oklch(0.42 0.09 60);
    color-scheme: dark;
  }
}

/* Tamanhos em rem: a base de 125% deixa o site como o zoom de 125% do navegador (pedido do Lucas,
   26/09/2026, para quem le mal letra pequena) e respeita a fonte padrao escolhida pelo leitor. No
   celular fica 100%: la o layout proprio ja e maior e 125% estoura o cabecalho. O ponto de quebra
   do layout (1025 px) e o antigo 820 x 1,25, como o zoom faria; o globo da margem vale desde 1280. */
html { -webkit-font-smoothing: antialiased; font-size: 125%; }
@media (max-width: 640px) { html { font-size: 100%; } }
h1, h2, h3, .brand { font-family: var(--display); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--sel); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p, blockquote { text-wrap: pretty; }

.wrap { min-height: 100vh; padding: 0 1.75rem 6rem; }
.in { max-width: 70rem; margin: 0 auto; }

/* header */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.375rem 0 0.875rem; }
/* dateline em caixa mista: bloco longo de maiusculas e sinalizado pelo detector (all-caps-body) */
.dateline { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .04em; color: var(--meta); flex: 1; min-width: 0; }
.brand { font-size: 2.125rem; letter-spacing: .16em; font-weight: 600; line-height: 1; white-space: nowrap; }
.brandbox { position: relative; text-align: center; }
.brandbox .brand { display: block; }
/* a tagline fica logo abaixo do nome, fora do fluxo: nao estreita a coluna da data nem o seletor de idioma */
/* tagline em caixa mista: idem dateline (all-caps-body); 11px = piso de legibilidade */
.tagline { position: absolute; top: 100%; left: 0; transform: none; margin-top: 0.5625rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .04em; color: var(--meta); white-space: nowrap; }
.top.has-tagline { padding-bottom: 2.125rem; }
.tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; flex: 1; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; }
.tools .sep { color: var(--rule2); }
/* linha sob PT e EN nas cores das bandeiras (Portugal: verde e vermelho; Inglaterra: vermelho de Sao Jorge).
   `border-image` com gradiente e' a forma mais curta de pintar a borda; o idioma atual leva a linha mais grossa. */
.tools a[hreflang] { border-bottom: 2px solid transparent; border-image-slice: 1; padding-bottom: 2px; }
.tools a[hreflang^="pt"] { border-image-source: linear-gradient(90deg, #006600 40%, #ff0000 40%); }
.tools a[hreflang^="en"] { border-image-source: linear-gradient(90deg, #cf142b, #cf142b); }
.tools .on { color: var(--ink); border-bottom-width: 3px; }
.tools .off { color: var(--faint); }
/* icones do botao de tema: um so (lua no tema claro, sol no escuro). Ao lado do texto no desktop,
   sozinho no celular, onde "Escuro"/"Claro" nao cabe (ver o bloco de 640px). */
.theme-ico { display: none; }
:root:not([data-theme="dark"]) .theme-ico-moon, :root[data-theme="dark"] .theme-ico-sun { display: inline-block; }
#theme-toggle { display: inline-flex; align-items: center; gap: .35rem; }
.tools .off:hover { color: var(--accent); }
.lnk { background: none; border: 0; padding: 0; margin: 0 0.375rem 0 0; font: inherit; letter-spacing: inherit; color: var(--meta); cursor: pointer; }
.lnk:hover { color: var(--accent); }
.lnk-rss { color: var(--meta); font: inherit; letter-spacing: inherit; }
.lnk-rss:hover { color: var(--accent); }

.home-dateline { margin-top: 1.125rem; padding: 0.875rem 0 0; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .04em; color: var(--meta); }

/* tag cloud */
.cloudbar { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 0.875rem 0 0.9375rem; }
.cloud-label { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--meta); margin-bottom: 0.6875rem; }
.cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.chip { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--rule2); padding: 0.25rem 0.625rem 0.3125rem; display: inline-flex; align-items: baseline; }
.chip.w2 { font-size: 0.75rem; background: var(--chip); border-color: transparent; padding: 0.3125rem 0.6875rem 0.375rem; }
.chip .n { font-size: 0.6875rem; letter-spacing: .06em; color: var(--meta); margin-left: 0.375rem; }
.chip:hover { border-color: var(--accent); }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; align-items: baseline; }
.tag { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tag.accent { font-size: 0.75rem; border: 1px solid var(--accent); padding: 0.1875rem 0.5rem 0.25rem; }
.tag.accent:hover { background: var(--accent); color: var(--paper); }
.tag.soft { font-size: 0.75rem; border: 1px solid var(--rule2); padding: 0.1875rem 0.5rem 0.25rem; }
.tag.line { font-size: 0.75rem; border: 1px solid var(--rule); padding: 0.1875rem 0.5rem 0.25rem; }
.tag.soft:hover, .tag.line:hover { border-color: var(--accent); color: var(--ink); }
.lead .tags, .piece .tags { gap: 0.375rem; }
.lead .tags { margin-bottom: 0.9375rem; }
.piece .tags { margin-bottom: 1.0625rem; }
.piece .piece-tags { margin: 2rem 0 0; }  /* tags no fim da materia */
.secondary .tags { margin-bottom: 0.6875rem; }

.meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); }
.label { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }

/* home */
.lead { padding: 1.25rem 0 2rem; border-bottom: 1px solid var(--rule); max-width: 55rem; }
/* manchete com escala fluida: o piso e' o tamanho do celular (2.125rem) e o teto o de sempre (3.25rem);
   o meio acompanha a viewport, para o titulo longo nao empurrar a linha-fina para fora da primeira dobra.
   Sem override por media query: um tamanho fixo aqui criaria um degrau visivel na virada. */
.lead h1 { margin: 0; font-size: clamp(2.125rem, 2.5vw + 1.25rem, 3.25rem); line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.lead .dek { margin: 1.125rem 0 0; font-size: 1.5rem; line-height: 1.5; max-width: 41.25rem; font-weight: 300; }
.lead .meta { margin-top: 1.125rem; }

.cols { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0 2.875rem; align-items: start; }
/* DOM: materias (.col-main) antes do Fluxo (.wire); essa e' a ordem de leitura no mobile. No desktop o grid fixa as colunas (ver .cols.fluxo-esquerda abaixo) */
.col-main { grid-column: 1; grid-row: 1; min-width: 0; }
.secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.125rem; padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--rule); }
.secondary article { min-width: 0; }
.secondary h2 { margin: 0; font-size: 1.875rem; line-height: 1.18; font-weight: 600; letter-spacing: -.025em; }
.secondary p { margin: 0.6875rem 0 0; font-size: 1.125rem; line-height: 1.55; font-weight: 350; }
.secondary .meta { margin-top: 0.75rem; }
.col-main > .label { padding: 1.625rem 0 0.25rem; }
.section { padding-top: 1.625rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.25rem; }
.see-all { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); white-space: nowrap; }
.section-desc { margin: 0.25rem 0 0.5rem; font-size: 0.9375rem; line-height: 1.45; font-weight: 300; color: var(--meta); max-width: 60ch; }
.section .label:hover { color: var(--accent); }
.list-label { padding-top: 2.125rem !important; }

/* data e share ancoradas no topo da linha (align-items: start, nao baseline): com a linha-fina longa,
   a data na_baseline parava flutuando solta no canto direito, longe do bloco de texto. */
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.75rem; align-items: start; padding: 1.125rem 0; border-top: 1px solid var(--rule);
  transition: border-color .15s ease; }
.row-main { min-width: 0; }
.row h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; }
.row h2 a { transition: color .15s ease; }
.row p { margin: 0.5rem 0 0; font-size: 1.125rem; line-height: 1.55; font-weight: 350; color: var(--ink); max-width: 60ch; }
.row .tags { margin-top: 0.6875rem; }
.row .meta { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; padding-top: .15rem; }
/* foco tátil da linha: :hover para o mouse, :focus-within para quem navega pelo teclado */
.row:hover, .row:focus-within { border-top-color: var(--rule2); }
.row:hover h2 a, .row:focus-within h2 a { color: var(--accent); }

.wire { grid-column: 2; grid-row: 1; min-width: 0; border-left: 1px solid var(--rule); padding: 1.75rem 0 0 1.75rem; }
/* Fluxo na capa: painel com fundo proprio (mesmo --chip dos elementos de destaque) e barra de
   acento a esquerda, sangrando ate a borda do .wrap -- so na Home (.home .wire), nunca na pagina
   propria do Fluxo (.wire-page) nem nas listagens (.wire-list), que ficam com o tratamento simples. */
.home .wire { background: var(--chip); border-left: 0.1875rem solid var(--accent); margin-right: -1.75rem; padding: 1.75rem 1.75rem 2rem; }
.wire > .label { padding-bottom: 0.25rem; }
.home .wire > .label, .home .list-label { border-top: 2px solid var(--ink); padding-top: 0.6875rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: .18em; }
/* "Abrir ↗": leva a /fluxo/ em nova aba, a direita do rotulo do Fluxo na capa */
.wire-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.wire-open { font-size: 0.6875rem; font-weight: 400; letter-spacing: .12em; color: var(--meta); white-space: nowrap; }
.wire-open:hover, .wire-open:focus-visible { color: var(--accent); }
.wire-sub { font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); margin: 0.25rem 0 0.875rem; }
/* /fluxo/: so o Fluxo, numa coluna da largura da materia, notas inteiras e separadas por dia */
.flowview { max-width: 42.5rem; margin: 0 auto; }
.flowview .dek { margin: 0.875rem 0 0; font-size: 1.125rem; line-height: 1.5; font-weight: 300; color: var(--meta); }
.wire-page { border-left: 0; padding: 1.25rem 0 0; }
.wire-day { padding: 1.625rem 0 0.5rem; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.wire-day + .item { border-top: 0; }
.item { padding: 1.125rem 0; border-top: 1px solid var(--rule); }
.item h2, .item .wire-t { margin: 0; font-size: 1.125rem; line-height: 1.32; font-weight: 400; }
/* notas do Fluxo justificadas; hifenizacao evita rios de espaco na coluna estreita */
.wire-t { text-align: justify; hyphens: auto; }
.item h2 a, .item .wire-t a { border-bottom: 1px solid var(--meta); }
.item h2 a:hover, .item .wire-t a:hover { border-color: var(--accent); }
.item .tags { margin-top: 0.6875rem; }
.time { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .1em; color: var(--accent); margin-right: 0.25rem; }
a.time:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
.wire-copy-rest { white-space: normal; }
.wire-item-more { display: inline-flex; align-items: center; min-height: 1.75rem; margin: 0 0 0 0.5rem; padding: 2px 0; border: 0; border-bottom: 1px solid var(--accent); background: none; color: var(--accent); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; vertical-align: baseline; }
.wire-item-more:hover, .wire-item-more:focus-visible { color: var(--ink); border-color: var(--ink); }

/* Nota do Fluxo com link inline: o "Ler a analise" fica ao fim, sem quebrar linha sozinho
   (o espaco antes vem do texto em render.py; aqui so evita a quebra do proprio link). */
.wire-read { white-space: nowrap; }

/* Nuvem compacta: chips alem do primeiro grupo so aparecem com JS (botao "Ver mais"). */
.cloud-more { display: none; }
.js .cloud-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; padding: 0.3125rem 0.75rem; background: none; border: 1px solid var(--rule2); color: var(--meta); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.js .cloud-more:hover, .js .cloud-more:focus-visible { border-color: var(--accent); color: var(--accent); }
.js .chip[data-cloud-more] { display: none; }
.js .cloud-more[hidden] { display: none; }

/* Skip link: invisivel no fluxo, visivel ao receber foco */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 0.625rem 0.875rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .04em; }
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* Fluxo: "Leia mais" revela as notas seguintes. O esconderijo so existe quando
   ha JS (classe `js` no <html>) — sem JS o Fluxo aparece inteiro. */
.js .wire .item[data-wire-more] { display: none; }
.js .wire-day:has(+ .item[data-wire-more]) { display: none; }  /* dia sem nota a mostra ainda */
.wire-more { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin: 1.125rem 0 0; padding: 0.75rem 0.625rem; background: none; border: 1px solid var(--rule); color: var(--meta); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.wire-more:hover, .wire-more:focus-visible { border-color: var(--accent); color: var(--accent); }
.wire-more-count { color: var(--accent); letter-spacing: 0; }
.wire-more[hidden] { display: none; }


/* article */
.back { display: inline-block; margin: 1.625rem 0 0; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); }
.piece { max-width: 42.5rem; margin: 0 auto; padding: 1.75rem 0 0; position: relative; }
/* globo da regiao ao fundo: na materia entra pela direita atras do titulo; na capa, atras da manchete.
   Mesmo globo do cartao de previa (tools/og_maps.py). Tinta do tema via mascara, apagado para nao
   brigar com o texto (isolation + z-index -1 deixa o texto sempre por cima). Sem fronteira nem destaque. */
.piece-globe, .lead-globe, .foot-globe { display: none; }
@media (min-width: 1280px) {  /* abaixo de 1475 o globo sai mais cortado pela borda; o Lucas preferiu mante-lo */
  body { overflow-x: clip; }
  .piece, .lead { isolation: isolate; }
  .lead { position: relative; clip-path: inset(0 -100vw); }  /* corta so em cima/embaixo: nao invade o Fluxo */
  .foot { position: relative; isolation: isolate; }
  .piece-globe, .lead-globe, .foot-globe { display: block; position: absolute; z-index: -1; width: 27.5rem; aspect-ratio: 1;
    background: var(--ink); opacity: .304; pointer-events: none;
    -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .piece-globe { top: -1.25rem; left: calc(100% - 8rem); }
  .foot-globe { width: 25rem; bottom: -6rem; right: calc(100% - 13rem); }  /* canto inferior esquerdo, cortado no fim da pagina; mostra o lado oposto do mundo (GLOBO_OPOSTO) */
  .lead-globe { width: 25rem; top: 50%; transform: translateY(-50%); left: calc(100% - 13rem); }
}
.g-africa { -webkit-mask-image: url(globes/africa.png); mask-image: url(globes/africa.png); }
.g-america-do-norte { -webkit-mask-image: url(globes/america-do-norte.png); mask-image: url(globes/america-do-norte.png); }
.g-america-latina { -webkit-mask-image: url(globes/america-latina.png); mask-image: url(globes/america-latina.png); }
.g-artico { -webkit-mask-image: url(globes/artico.png); mask-image: url(globes/artico.png); }
.g-asia-do-sul { -webkit-mask-image: url(globes/asia-do-sul.png); mask-image: url(globes/asia-do-sul.png); }
.g-asia-oriental { -webkit-mask-image: url(globes/asia-oriental.png); mask-image: url(globes/asia-oriental.png); }
.g-chifre-da-africa { -webkit-mask-image: url(globes/chifre-da-africa.png); mask-image: url(globes/chifre-da-africa.png); }
.g-estreito-de-taiwan { -webkit-mask-image: url(globes/estreito-de-taiwan.png); mask-image: url(globes/estreito-de-taiwan.png); }
.g-europa-oriental { -webkit-mask-image: url(globes/europa-oriental.png); mask-image: url(globes/europa-oriental.png); }
.g-golfo { -webkit-mask-image: url(globes/golfo.png); mask-image: url(globes/golfo.png); }
.g-indo-pacifico { -webkit-mask-image: url(globes/indo-pacifico.png); mask-image: url(globes/indo-pacifico.png); }
.g-levante { -webkit-mask-image: url(globes/levante.png); mask-image: url(globes/levante.png); }
.g-magrebe { -webkit-mask-image: url(globes/magrebe.png); mask-image: url(globes/magrebe.png); }
.g-sahel { -webkit-mask-image: url(globes/sahel.png); mask-image: url(globes/sahel.png); }
.g-uniao-europeia { -webkit-mask-image: url(globes/uniao-europeia.png); mask-image: url(globes/uniao-europeia.png); }
.piece h1 { margin: 0; font-size: 2.75rem; line-height: 1.14; font-weight: 600; letter-spacing: -.03em; }
.piece .dek { margin: 1.25rem 0 0; font-size: 1.25rem; line-height: 1.5; font-weight: 300; }
.byline { margin: 1.5rem 0 0; padding: 0.75rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--meta); display: flex; flex-wrap: wrap; gap: 1.125rem; }
.piece p { margin: 1.625rem 0 0; font-size: 1.1875rem; line-height: 1.66; font-weight: 300; }
.piece a { border-bottom: 1px solid var(--meta); }
.piece a:hover { border-color: var(--accent); }
.piece ul, .piece ol { margin: 1.625rem 0 0; padding-left: 1.5rem; font-size: 1.1875rem; line-height: 1.66; font-weight: 300; }
.piece li + li { margin-top: 0.5rem; }
.piece p, .piece li { text-align: justify; hyphens: auto; }  /* texto corrido justificado */
.piece figure { margin: 2.25rem 0; }
.piece figure img { display: block; max-width: 100%; height: auto; }
.piece figcaption { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.45; color: var(--meta); }
.piece figcaption .credito { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; margin-left: 0.5rem; }
.piece figure.fig-centro { width: 70%; margin-inline: auto; }
.piece figure.fig-esq, .piece figure.fig-dir { width: 42%; margin-top: 0.5rem; margin-bottom: 1rem; }
.piece figure.fig-esq { float: left; margin-right: 1.75rem; }
.piece figure.fig-dir { float: right; margin-left: 1.75rem; }
.piece h2.sub, .piece blockquote, .piece figure.fig-largura { clear: both; }
@media (max-width: 40rem) { .piece figure.fig-centro, .piece figure.fig-esq, .piece figure.fig-dir { float: none; width: 100%; margin-inline: 0; } }
.piece h2.sub { margin: 2.5rem 0 0; font-size: 1.625rem; line-height: 1.25; font-weight: 600; }
.piece blockquote { margin: 2.25rem 0; padding: 0 0 0 1.375rem; border-left: 2px solid var(--accent); font-size: 1.5rem; line-height: 1.35; font-weight: 400; font-style: normal; }
.note h1 { font-size: 2rem; line-height: 1.3; }
.note .byline { margin-top: 1.625rem; }
.note-read { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; }
.note-read a { border: 0; color: var(--accent); }
.more { max-width: 42.5rem; margin: 3.25rem auto 0; }
.more .label { padding-bottom: 0.25rem; }
.more article { padding: 1rem 0; border-top: 1px solid var(--rule); }
.more h2 { margin: 0; font-size: 1.25rem; line-height: 1.32; font-weight: 400; }
.more .tags { margin-top: 0.625rem; }

/* compartilhar: gatilhos so existem com JS (.js); o bloco do fim da materia funciona sem */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.share { display: none; align-items: center; justify-content: center; gap: 0.4375rem; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--faint); cursor: pointer; transition: color .15s ease-out; }
.js .share { display: inline-flex; }
.share .i { width: 0.9375rem; height: 0.9375rem; flex: none; }
.share:hover, .share:focus-visible, .share[aria-expanded="true"] { color: var(--accent); }
.share:focus-visible, .share-end a:focus-visible, .share-end button:focus-visible, .share-menu a:focus-visible, .share-menu button:focus-visible { outline: 1px solid var(--accent); outline-offset: 0.1875rem; }
/* capa e Fluxo: icone discreto, area de clique maior que o desenho */
.meta .share, .item .share { width: 2rem; height: 2rem; margin: -9px -8px -9px 0.25rem; vertical-align: middle; }
.item .tags .share { margin-left: auto; align-self: center; }
/* materia: rotulo no fio do byline */
.byline .share-byline { margin-left: auto; color: var(--meta); }
.byline .share-byline:hover, .byline .share-byline:focus-visible, .byline .share-byline[aria-expanded="true"] { color: var(--accent); }
.byline .share-byline .i { width: 0.875rem; height: 0.875rem; margin-top: -2px; }

.share-end { max-width: 42.5rem; margin: 3rem auto 0; padding-top: 0.875rem; border-top: 1px solid var(--ink); }
.share-end ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 1.375rem; line-height: 1.5; margin: 0.625rem 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; }
.share-end a, .share-end button { color: var(--meta); background: none; border: 0; padding: 0.25rem 0; margin: 0; font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.share-end a:hover, .share-end button:hover { color: var(--accent); }
.share-js { display: none; }
.js .share-js { display: list-item; }
.js .share-js[hidden] { display: none; }
.share-status { margin: 0; min-height: 0; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.share-status:empty { display: none; }
.share-end .share-status { margin-top: 0.5rem; }

/* menu unico da pagina (popover); o JS posiciona junto ao gatilho */
.share-menu { display: none; position: fixed; inset: auto; margin: 0; overflow: visible; box-sizing: border-box; min-width: 12.25rem; padding: 0.375rem 0; border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); box-shadow: 0 0.625rem 1.75rem -12px oklch(0 0 0 / .28); }
.share-menu.open { display: block; }
.share-menu ul { margin: 0; padding: 0; list-style: none; }
.share-menu a, .share-menu button { display: block; box-sizing: border-box; width: 100%; padding: 0.5625rem 1rem; border: 0; background: none; text-align: left; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible { background: var(--chip); color: var(--accent); outline-offset: -1px; }
.share-menu .share-js { border-top: 1px solid var(--rule); }
.share-menu .share-js + .share-js { border-top: 0; }
.share-menu .share-status { padding: 0.375rem 1rem 0.25rem; }

/* nota aberta por link (#n-...): acende e apaga */
.item.is-target { animation: nota-alvo 2.4s cubic-bezier(.16, 1, .3, 1); }
@keyframes nota-alvo { from { background: var(--sel); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .item.is-target { animation: none; background: var(--chip); } .share { transition: none; } .row, .row h2 a { transition: none; } }

/* tag / archive / 404 */
.listing { max-width: 55rem; }
.page-title { margin: 1.375rem 0 1.125rem; font-size: 2.75rem; line-height: 1.14; font-weight: 600; letter-spacing: -.03em; }
.listing .dek { font-size: 1.25rem; line-height: 1.5; font-weight: 300; }
.wire-label { padding: 1.875rem 0 0.25rem; }
.wire-list .item h2, .wire-list .item .wire-t { font-size: 1.1875rem; }

/* footer */
.foot { margin-top: 4rem; border-top: 1px solid var(--ink); padding-top: 0.875rem; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); }
.foot nav { display: flex; gap: 1.25rem; }

@media (max-width: 1025px) {
  .wrap { padding: 0 1.125rem 4.5rem; }
  .dateline { display: none; }
  .top { padding: 1.125rem 0 0.75rem; }
  .brand { font-size: 1.75rem; }
  .brandbox { text-align: left; }
  .tagline { left: 0; transform: none; font-size: 0.6875rem; letter-spacing: .04em; margin-top: 0.4375rem; }
  .top.has-tagline { padding-bottom: 1.75rem; }
  .tools { flex: 0 1 auto; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  /* mobile empilha em ordem de DOM: materias, depois Fluxo e temas */
  .col-main, .wire { grid-column: auto; grid-row: auto; }
  .wire { border-left: 0; padding: 1.25rem 0 0; }
  /* mesmo painel do desktop, mas sangrando dos dois lados (o gutter mobile e 1.125rem, nao 1.75rem) */
  .home .wire { background: var(--chip); border-left: 0; margin: 0 -1.125rem; padding: 1.5rem 1.125rem 1.75rem; }
  .home-dateline { margin-top: 0.875rem; padding-top: 0.75rem; }
  .lead { padding: 1.125rem 0 1.5rem; }
  .lead .dek { font-size: 1.375rem; }
  .secondary h2 { font-size: 1.625rem; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .piece h1, .page-title { font-size: 2rem; }
  /* cabecalho do Fluxo no celular: voltar, titulo e descricao viram um bloco so', colado; a folga
     generosa fica entre o bloco e o primeiro dia, que e' onde o conteudo comeca */
  .flowview .back { margin-top: 0.5rem; }
  .flowview .page-title { margin: 0.25rem 0 0; line-height: 1.15; }
  .flowview .dek { margin-top: 0.5rem; }
  .flowview .wire-page { padding-top: 0.25rem; }
  .note h1 { font-size: 1.625rem; }
  .piece .dek { font-size: 1.125rem; }
  .piece p { font-size: 1.125rem; }
  .piece blockquote { font-size: 1.3125rem; }
  /* celular: o menu vira folha no pe da tela */
  .share-menu { inset: auto 0 0 0 !important; width: 100%; min-width: 0; max-width: none; padding: 0.5rem 0 max(0.75rem, env(safe-area-inset-bottom)); border-width: 1px 0 0; border-color: var(--ink); box-shadow: 0 -12px 2rem -16px oklch(0 0 0 / .35); }
  .share-menu a, .share-menu button { padding: 0.875rem 1.125rem; font-size: 0.75rem; }
}

/* Toque: alvos confortaveis sem mudar a estetica desktop (WCAG 2.5.8) */
@media (pointer: coarse) {
  .tag.soft, .tag.line, .tag.accent, .chip { padding: 0.5rem 0.75rem 0.5625rem; }
  .tags { gap: 0.5rem; }
  .cloud { gap: 0.625rem; }
  .tools .lnk { padding: 0.5rem 0.375rem; }
  .back, .see-all { padding: 0.5rem 0.25rem; }
  .wire-item-more { min-height: 2.75rem; padding: 0 0.375rem; }
  .wire-open, .lnk-rss, a.time, .site-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .meta .share, .item .share { width: 2.75rem; height: 2.75rem; margin: -14px -12px -14px 2px; }
  .share-end a, .share-end button { padding: 0.625rem 0; }
}

/* busca no acervo (plans/BUSCA_ACERVO_28092026.md) -------------------------------------------
   Só a Home recebe o campo e o painel. Tudo em rem: a base é 125% e 100% no celular.
   Só tokens: o tema escuro vem de graça, sem uma linha de cor solta. */

/* o titulo do <dialog> existe para o aria-labelledby; invisivel, nao some */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* campo do cabecalho. Nasce hidden (sem JS, nao aparece); o JS tira. */
.search-open { display: inline-flex; align-items: center; gap: .625rem; width: 100%; max-width: 20rem; height: 2.25rem; padding: 0 .75rem; border: 1px solid var(--rule2); background: var(--paper); color: var(--meta); font: inherit; font-size: .875rem; cursor: text; }
.search-open[hidden] { display: none; }
.search-open:hover { border-color: var(--accent); }
.search-open .search-ico { flex: none; }
.search-key { margin-left: auto; font-family: var(--mono); font-size: .6875rem; line-height: 1; border: 1px solid var(--rule2); padding: .1875rem .375rem; }
/* so a Home tem grade: a marca fica a esquerda, as ferramentas a direita, o campo no centro
   geometrico da pagina (colunas laterais iguais, independente da largura da marca).
   Como o campo passou a existir em TODAS as paginas, `has-search` e' a regra do `.top`. */
.top.has-search { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
.top.has-search .brandbox { justify-self: start; }
.top.has-search .search-open { justify-self: center; align-self: center; }
.top.has-search .tools { justify-self: end; }

.busca { padding: 0; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); position: fixed; inset: 5.25rem 1.75rem auto; width: auto; max-width: 70rem; margin-inline: auto; height: calc(100dvh - 7rem); box-shadow: 0 1.5rem 3.75rem oklch(0.2 0.01 60 / .16); }
.busca[open] { display: flex; flex-direction: column; }
.busca::backdrop { background: oklch(0.985 0.004 85 / .82); }
/* `::backdrop` nao herda as variaveis do tema, entao o escuro precisa de regra propria (a mesma
   dupla do resto do arquivo: escolha explicita em data-theme, ou o do sistema quando nao ha escolha) */
:root[data-theme="dark"] .busca::backdrop { background: oklch(0.165 0.006 70 / .82); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .busca::backdrop { background: oklch(0.165 0.006 70 / .82); } }
.busca-q:focus-visible, .busca-tf:focus-visible, .btag:focus-visible, .busca-active button:focus-visible, .busca-linkbtn:focus-visible, .busca-more:focus-visible, .busca-see:focus-visible, .busca-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body:has(dialog.busca[open]) { overflow: hidden; }

.busca-top { display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem 0 1.75rem; height: 4.75rem; border-bottom: 1px solid var(--ink); }
.busca-q { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--sans); font-size: 2rem; color: var(--ink); }
.busca-q:focus { outline: none; }
.busca-clear-q, .busca-close, .busca-linkbtn, .busca-more, .busca-see, .busca-tabs button, .seg-b, .btag, .busca-active button, .busca-sc-b { font: inherit; font-family: var(--mono); font-size: .78rem; cursor: pointer; }
.busca-close, .busca-clear-q { border: 1px solid var(--rule2); background: transparent; color: var(--meta); padding: .3125rem .5rem; }
.busca-close kbd { font-family: var(--mono); font-size: .6875rem; color: var(--faint); }
/* Esc nao existe no toque: some em tela de celular e em aparelho sem hover (o texto "Fechar" fica) */
@media (hover: none), (max-width: 640px) { .busca-close kbd { display: none; } }

.busca-bar { display: flex; flex-wrap: wrap; gap: .875rem 1.375rem; padding: .875rem 1.75rem; border-bottom: 1px solid var(--rule); align-items: center; }
.busca-ctl { display: flex; align-items: center; gap: .5rem; }
.busca-lab { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
.seg { display: flex; border: 1px solid var(--rule2); }
.seg-b { border: 0; background: transparent; color: var(--ink); height: 2.25rem; padding: 0 .75rem; }
.seg-b[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg-flat { border-color: transparent; }
/* o estado marcado do .seg inverte as cores; o plano do grupo "Buscar em" e' so a borda, entao
   o texto precisa voltar para --ink aqui senao fica branco sobre fundo branco (invisivel) */
.seg-flat .seg-b[aria-pressed="true"] { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.busca-shortcuts { flex: 1 1 100%; margin-left: 0; }
#busca-sc { display: flex; flex-wrap: wrap; gap: .5rem; }
.busca-sc-b { height: 2.125rem; padding: 0 .6875rem; border: 1px solid var(--rule2); background: transparent; color: var(--ink); }
.busca-sc-b:hover { border-color: var(--accent); }

.busca-tabs { display: none; }
.busca-body { display: grid; grid-template-columns: 29rem minmax(0, 1fr); flex: 1; min-height: 0; }
.busca-tags { border-right: 1px solid var(--rule); overflow: auto; padding: 1rem 1.75rem 1.5rem; }
.busca-tf { width: 100%; box-sizing: border-box; border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); font: inherit; font-family: var(--mono); font-size: .78rem; padding: .4375rem .5rem; }
.busca-help { margin: .625rem 0 0; font-family: var(--mono); font-size: .6875rem; line-height: 1.5; color: var(--meta); }
.busca-note { margin: 1.25rem 0 0; font-family: var(--mono); font-size: .6875rem; line-height: 1.5; color: var(--faint); }
.busca-help, .busca-note { text-wrap: wrap; }
.busca-gt { font-family: var(--mono); font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); margin: 0 0 .5625rem; }
#busca-groups { margin-top: 1.125rem; }
.bt-group + .bt-group { margin-top: 1.125rem; }
.bt-list { display: flex; flex-wrap: wrap; gap: .4375rem; }
.btag { height: 2.125rem; padding: 0 .6875rem; border: 1px solid var(--rule2); background: var(--chip); color: var(--ink); }
.btag .n { font-size: .6875rem; opacity: .65; margin-left: .4375rem; }
.btag[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btag:disabled { border: 1px dashed var(--rule); background: transparent; color: var(--faint); cursor: not-allowed; }

.busca-results { overflow: auto; padding: 0 1.75rem 1.5rem; }
.busca-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: .875rem; background: var(--paper); padding: .875rem 0 .625rem; }
.busca-count { font-family: var(--mono); font-size: .72rem; color: var(--meta); }
.busca-linkbtn { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 0; }
.busca-active { display: flex; flex-wrap: wrap; gap: .4375rem; }
.busca-active:not(:empty) { padding-bottom: .75rem; }
.busca-active button { height: 1.875rem; padding: 0 .625rem; border: 1px solid var(--accent); background: var(--accent); color: var(--paper); }
.busca-active .x { margin-left: .375rem; opacity: .8; }
.busca-url { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.busca-url #busca-url { font-family: var(--mono); font-size: .72rem; color: var(--meta); word-break: break-all; }
.bres { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.bres-meta { font-family: var(--mono); font-size: .72rem; color: var(--meta); }
.bres-a { color: var(--accent); letter-spacing: .08em; }
.bres-t { display: block; font-family: var(--sans); font-size: 1.45rem; line-height: 1.2; font-weight: 500; margin: .25rem 0; }
.bres-x { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.45; margin: .25rem 0; }
.bres-tags { display: flex; flex-wrap: wrap; gap: .4375rem; margin-top: .4375rem; }
.bres mark, .busca mark { background: var(--sel); color: inherit; }
button.tag.line { cursor: pointer; background: transparent; }
button.tag.line:hover { border-color: var(--accent); }
button.tag.line.on, button.tag.line[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.busca-empty { padding: 2.5rem 0; }
.busca-empty h3 { font-family: var(--sans); font-size: 1.45rem; font-weight: 500; margin: 0 0 .375rem; }
.busca-empty p { font-family: var(--mono); font-size: .72rem; color: var(--meta); margin: 0; }
.busca-more, .busca-see { border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); height: 2.125rem; padding: 0 .875rem; }
.busca-more[hidden], .busca-foot { display: none; }
.busca-foot { border-top: 1px solid var(--ink); padding: .75rem 1rem; }
.busca-see { display: block; width: 100%; }

/* Tela larga: a busca e os filtros ficam na coluna da esquerda e os resultados ocupam TODA a altura da direita
   (o topo do painel tambem e' de resultados). Sem mudar o HTML: `.busca-body` some da arvore (display: contents) e
   seus dois filhos viram itens da grade do proprio painel. Abaixo de 1025 px vale o layout de abas. */
@media (min-width: 1025px) {
  .busca[open] { display: grid; grid-template-columns: clamp(22rem, 40vw, 29rem) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .busca-body { display: contents; }
  .busca-top { grid-column: 1; grid-row: 1; padding: 0 1rem 0 1.75rem; }
  .busca-q { font-size: 1.625rem; }
  .busca-bar { grid-column: 1; grid-row: 2; }
  .busca-tags { grid-column: 1; grid-row: 3; min-height: 0; border-right: 0; }
  .busca-results { grid-column: 2; grid-row: 1 / 4; min-height: 0; border-left: 1px solid var(--rule); }
  /* o Fechar sai da coluna da esquerda e fica no canto do painel, sobre a coluna de resultados */
  .busca-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; }
  .busca-head { padding-right: 7.5rem; }
}
/* Celular e tablet: o painel e' uma coluna com o campo e as abas grudados no topo (fora da rolagem,
   para o leitor nao perder o contexto) e o restante em rolagem propria. "Resultados" e' a aba
   inicial: quem abre a busca ve a lista; os filtros (Combinar, Buscar em, Sugestoes e os grupos de
   tags) ficam so na aba "Filtros", e o rodape -- que repetiria a aba ativa -- some com os
   resultados na tela. O `data-tab` esta no <dialog> porque o rodape e' irmao do corpo. */
@media (max-width: 1024px) {
  .search-open-label, .search-key { display: none; }
  .search-open { width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; border-color: transparent; background: transparent; color: var(--ink); }
  .busca { inset: 0; height: 100dvh; border: 0; max-width: none; }
  /* Topo compacto: a barra de 4.75rem + as abas de 2.75rem comiam ~115 px antes da lista comecar.
     O "Fechar" mantem o min-height de 2.75rem da regra de toque abaixo e sobra folga no bloco, entao
     campo, limpar e fechar continuam com alvo de 44 px. As abas baixam para 2.25rem: cada caixa e'
     metade da largura da tela, entao o alvo continua grande na horizontal (piso do WCAG: 24 px). */
  .busca-top { height: 3.5rem; }
  .busca-tabs button { height: 2.25rem; }
  .busca-top, .busca-tabs, .busca-bar, .busca-foot { flex: none; }
  .busca[data-tab="resultados"] .busca-bar,
  .busca[data-tab="resultados"] .busca-tags,
  .busca[data-tab="resultados"] .busca-foot { display: none; }
  .busca[data-tab="filtros"] .busca-results { display: none; }
  .busca[data-tab="filtros"] .busca-foot { display: block; }
  .busca-body { display: block; overflow: hidden; }
  /* o filho visivel preenche a altura que sobrou e rola sozinho: o painel inteiro nao rola */
  .busca[data-tab="resultados"] .busca-results,
  .busca[data-tab="filtros"] .busca-tags { height: 100%; }
  .busca-tabs { display: flex; border-bottom: 1px solid var(--rule); }
  .busca-tabs button { flex: 1; border: 0; background: transparent; color: var(--meta); }
  .busca-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
  .busca-shortcuts { margin-left: 0; }
  /* no celular a linha "Link / Copiar link" sai: a barra do navegador ja' compartilha a URL e a linha
     tomava espaco dos resultados. O fio dela passa para o cabecalho fixo. */
  .busca-url { display: none; }
  .busca-head { border-bottom: 1px solid var(--rule); }
  .busca-q { font-size: 1.375rem; }
  .busca-top { padding: 0 1rem; }
  .busca-bar, .busca-tags, .busca-results { padding-left: 1rem; padding-right: 1rem; }
  .btag, .busca-active button, .busca-sc-b, .seg-b, .busca-more, .busca-see, .busca-clear-q, .busca-close, .busca-linkbtn { min-height: 2.75rem; }
}
@media (max-width: 640px) {
  .top.has-search { display: flex; }
  /* O icone tem alvo de toque de 2.75rem, mais alto que a marca. A margem negativa encolhe so a caixa dele no
     layout (o alvo de toque fica), e ele alinha ao centro da marca sem empurrar a tagline (position:absolute). */
  .search-open { margin-left: auto; margin-right: .5rem; margin-block: -.625rem; align-self: center; }
  /* "Escuro"/"Claro" ocupa muito espaco: no celular vira icone (lua no tema claro, sol no escuro) */
  .theme-txt { display: none; }
  /* icone de tema colado nos idiomas: sem o ponto separador (o icone ja separa), menos folga e sem a margem do .lnk */
  .tools { gap: .5rem; }
  .tools .lnk { margin: 0; }
  .tools .lnk + .sep { display: none; }
}
/* globo da regiao atras da manchete tambem no celular e no tablet (o desktop >= 1280 px tem o proprio bloco acima):
   menor, mais apagado e cortado pela borda da manchete, atras do texto */
@media (max-width: 1279px) {
  body { overflow-x: clip; }   /* o globo do rodape sai pela borda esquerda da tela */
  .foot { position: relative; isolation: isolate; }
  /* globo do rodape (regiao OPOSTA a da manchete, como nas paginas de materia): canto inferior esquerdo, cortado pela borda */
  .foot-globe { display: block; position: absolute; z-index: -1; width: 15rem; aspect-ratio: 1; bottom: -5.5rem; left: -5rem;
    background: var(--ink); opacity: .208; pointer-events: none;
    -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .lead { position: relative; isolation: isolate; overflow: hidden; }
  .lead-globe { display: block; position: absolute; z-index: -1; width: 17rem; aspect-ratio: 1; right: -5.5rem; top: 50%; transform: translateY(-50%);
    background: var(--ink); opacity: .208; pointer-events: none;
    -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
}

/* Fluxo na capa do celular: so a nota mais recente + "Expandir timeline" (o resto do Fluxo fica na pagina propria).
   O bloco existe em todas as larguras no HTML, mas so aparece ate 640 px; ali a coluna longa do Fluxo some. */
.wire-peek { display: none; }
@media (max-width: 640px) {
  .home .wire { display: none; }
  .wire-peek { display: block; margin: 0 -1.125rem; padding: 1.25rem 1.125rem 1.5rem; background: var(--chip); }
  .wire-peek .label { border-top: 2px solid var(--ink); padding-top: 0.6875rem; padding-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: .18em; }
  .wire-peek .item { border-top: 0; }
  .wire-expand { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.75rem; border: 1px solid var(--rule2); background: var(--paper); color: var(--ink);
    font-family: var(--mono); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; }
  .wire-expand:hover, .wire-expand:focus-visible { border-color: var(--accent); color: var(--accent); }
}

/* Tela larga: a coluna do Fluxo acompanha a rolagem da timeline e ocupa toda a altura visivel quando
   fica sticky. O max-height + overflow sao obrigatorios: sem eles, um elemento sticky mais alto que a
   janela gruda no topo e o fim da coluna fica fora de alcance. */
@media (min-width: 1026px) {
  .home .wire { align-self: start; position: sticky; top: 0; box-sizing: border-box; max-height: 100vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--rule2) transparent; overscroll-behavior: contain; }
}

/* site.json home_layout "fluxo-esquerda": o Fluxo vira a coluna larga da esquerda e as materias a estreita da direita.
   So afeta .cols.fluxo-esquerda (a capa com a opcao ligada); SAGIRE nao usa a classe. */
@media (min-width: 1026px) {
  .cols.fluxo-esquerda { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .cols.fluxo-esquerda > .wire { grid-column: 1; }
  .cols.fluxo-esquerda > .col-main { grid-column: 2; }
  /* painel do Fluxo espelhado (.home .wire na base tem acento a esquerda): acento a direita, sangrando para a margem esquerda */
  .home .cols.fluxo-esquerda > .wire { border-left: 0; border-right: 0.1875rem solid var(--accent); margin-left: -1.75rem; margin-right: 0; padding: 1.75rem 1.75rem 2rem 1.75rem; }
}
@media (max-width: 1025px) {
  .cols.fluxo-esquerda > .wire { order: -1; }
}
/* lista de titulos da coluna direita da capa "fluxo-esquerda" (Materias, Analises). Escopada a .home-lista: SAGIRE nao usa. */
.home-lista + .home-lista { margin-top: 1.875rem; }
.home-lista .label { border-top: 2px solid var(--ink); padding: 0.6875rem 0 0; margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: .18em; }
.home-lista ul { list-style: none; margin: 0.375rem 0 0; padding: 0; }
.home-lista li { padding: 0.875rem 0; border-bottom: 1px solid var(--rule); }
.home-lista li:last-child { border-bottom: 0; }
.home-lista a { font-size: 1.1875rem; line-height: 1.3; font-weight: 500; color: var(--ink); text-decoration: none; }
.home-lista a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* site.json home_layout "fluxo-esquerda", celular (<= 640 px): o Fluxo (.wire, inteiro) vem ANTES das materias
   e o bloco resumido .wire-peek some (repetiria). Escopado a .cols.fluxo-esquerda: SAGIRE nao muda. */
@media (max-width: 640px) {
  .home .cols.fluxo-esquerda > .wire { display: block; }
  .cols.fluxo-esquerda .wire-peek { display: none; }
}

/* menu do cabecalho (site.json "menu"; so existe no GEOPOL): linha propria sob a marca, a moda de jornal.
   Sem a chave nao ha .site-menu e nada disto se aplica. */
.top:has(.site-menu) { flex-wrap: wrap; row-gap: 0.75rem; }
.top.has-tagline:has(.site-menu) { padding-bottom: 0; }
.top .site-menu { grid-column: 1 / -1; order: 10; flex-basis: 100%; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.375rem 2rem; padding: 0.625rem 0; margin-top: 1.75rem; border-top: 3px double var(--ink);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; }
.top .site-menu a { color: var(--ink); text-decoration: none; padding: 0.25rem 0; }
.top .site-menu a:hover, .top .site-menu a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 640px) {
  /* quebra em linhas centradas: a faixa com rolagem escondia FLUXO e SOBRE sem nenhum sinal de que rolava */
  .top .site-menu { gap: 0 1.25rem; }
  .top .site-menu a { white-space: nowrap; padding: 0.5rem 0; }
}
/* "Ver mais" das listas da capa: as de indice >= inicial ficam escondidas (so com JS) ate o primeiro clique.
   O botao reaproveita .wire-more (o do Fluxo); .home-lista a nao pode vencer o tamanho dele. */
.js .home-lista li[data-lista-extra] { display: none; }
.home-lista a.lista-mais { font-family: var(--mono); font-size: 0.6875rem; line-height: inherit; font-weight: 400; color: var(--meta); text-decoration: none; margin-top: 1.125rem; }
.home-lista a.lista-mais:hover, .home-lista a.lista-mais:focus-visible { color: var(--accent); text-decoration: none; }