/* ============================================================================
   ~grec — site pessoal. Direção 2 (GREC-0030): o sistema da disciplina TMI inteiro —
   rótulo em mono, régua "rótulo ——— assunto", numeral como estrutura, fio, quatro famílias
   de tokens.css — mais as gravuras a duas tintas encomendadas ao Codex. Deriva de
   pesquisa/design/proto-c.css. Depende de tokens.css e base.css. Nenhum valor de cor solto.
   O que a página mostra sem JavaScript, na impressão e em prefers-reduced-motion é a página:
   nenhum elemento nasce com opacity: 0, nada de scroll-snap, grão, numeral-fantasma ou trilho.
   ============================================================================ */

/* ---------------------------------------------------- TRANSIÇÃO ENTRE PÁGINAS
   (atlas-tecnicas · transicao-entre-paginas, rodada 5). CSS puro, zero JavaScript: o nome no
   cabeçalho e a gravura de capítulo continuam de uma página para a outra em vez de sumir e
   reaparecer. Onde o navegador não suporta (Firefox, Safari < 18.2), a navegação acontece como
   sempre — não há JS de fallback porque não há nada para cair de volta: a página de destino já
   é a página inteira. */
@view-transition { navigation: auto; }
.marca { view-transition-name: grec-nome; }
.abre-pagina__arte { view-transition-name: grec-gravura-capitulo; }
::view-transition-group(*) { animation-duration: var(--dur-3); animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------- TOPO
   Sete itens, o menu de língua e o botão de tema não cabem numa linha até 1100 px: o nav quebra em
   duas linhas, como no TMI (medido em 24/09/2026: a 1024 px o botão saía). Língua e tema moram juntos
   em .topo__util, fora do nav: no computador, depois do nav; até 1100 px, na linha do nome, no fim (a
   pílula de língua não cabia ao lado de "Biografia" a 390 px e empurrava o tema para uma terceira linha,
   14/10/2026). Nas cópias traduzidas, com rótulos de outro tamanho, o lugar dos dois não muda. */
.topo .marca { white-space: nowrap; }
.topo nav a { white-space: nowrap; }
.topo__util { display: flex; align-items: center; gap: var(--s-4); flex: none; }
/* Língua (GREC-0002, GREC-0018): <details class="lingua">, montado por seletor_lingua() em gerar.py. Fechado,
   uma pílula do mesmo desenho do botão de tema, com a bandeira e o código; aberto, a lista presa ao fim da
   pílula. Só propriedades lógicas (inset-inline, border-inline): na cópia árabe, com dir="rtl", o menu
   espelha sozinho. O alvo de toque chega a 44 px sem mudar o desenho (::after), e no toque e até 1100 px
   a pílula tem os 44 px do botão de tema ao lado. */
.lingua { position: relative; flex: none; }
.lingua__simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.lingua__atual { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding-inline: var(--s-3) var(--s-2); border: 1px solid var(--rule-control); border-radius: var(--r-pill); list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--tr-wide); color: var(--fg); }
.lingua__atual::-webkit-details-marker { display: none; }
.lingua__atual::after { content: ""; position: absolute; inset: -7px -2px; }
.lingua__atual:focus-visible { border-radius: var(--r-pill); }
.lingua__atual:hover, .lingua[open] > .lingua__atual { border-color: var(--brand); }
.lingua__atual:hover .lingua__cod, .lingua__atual:hover .lingua__seta { color: var(--brand); }
.lingua__bandeira { display: block; flex: none; width: 21px; height: 14px; border-radius: 2px; outline: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); outline-offset: -1px; }
.lingua__seta { flex: none; color: var(--fg-muted); transition: transform var(--dur-1) var(--ease); }
.lingua[open] .lingua__seta { transform: rotate(180deg); }
.lingua__lista { position: absolute; top: calc(100% + var(--s-2)); inset-inline-end: 0; z-index: 60; min-width: 12.5rem; max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: var(--s-1); list-style: none; background: var(--bg-raised); border: var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--sh-3); }
/* Fechado, a lista sai da página de vez. O Chromium esconde o conteúdo do <details> fechado com
   content-visibility, que ainda deixa caixa medível: a lista "existia" sob o topo e o impeccable acusava o
   "English" coberto por um link da página (text-occlusion, /bio/, 14/10/2026). */
.lingua:not([open]) > .lingua__lista { display: none; }
.lingua__lista li { margin: 0; padding: 0; }
.lingua__lista a { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: var(--s-1) var(--s-3); border-inline-start: 2px solid transparent; border-radius: var(--r-xs); font-family: var(--font-text); font-size: var(--t-sm); font-weight: 500; color: var(--fg-body); text-decoration: none; white-space: nowrap; }
.lingua__lista a:hover { background: var(--bg-hover); color: var(--brand); }
.lingua__lista a:focus-visible { outline-offset: -2px; }
.lingua__lista a[aria-current="true"] { background: var(--bg-soft); border-inline-start-color: var(--brand); color: var(--fg); font-weight: 600; }
@media (pointer: coarse) {
  .lingua__atual { height: var(--alvo-min); }
  .lingua__atual::after { inset: 0; }
  .lingua__lista a { min-height: var(--alvo-min); }
}
@media (prefers-reduced-motion: reduce) { .lingua__seta { transition: none; } }
@media (max-width: 1100px) {
  .topo__interno { flex-wrap: wrap; padding-block: var(--s-2); row-gap: var(--s-1); }
  .topo nav { order: 2; flex: 1 0 100%; margin-left: 0; gap: var(--s-4); justify-content: flex-start; border-top: var(--border); padding-top: var(--s-1); flex-wrap: wrap; row-gap: 0; }
  .topo nav a { min-height: var(--alvo-min); display: inline-flex; align-items: center; }
  /* na linha do nome, língua e tema ficam com 32 px no mouse (a linha não cresce) e 44 px no toque e até
     720 px (base.css, e as regras de .lingua acima e abaixo) */
  .topo__util { order: 1; margin-inline-start: auto; }
}
@media (max-width: 720px) {
  .lingua__atual { height: var(--alvo-min); }
  .lingua__atual::after { inset: 0; }
  .lingua__lista a { min-height: var(--alvo-min); }
}
@media (max-width: 420px) { .topo__util { gap: var(--s-3); } }   /* a 360 px, nome, língua e tema cabem numa linha */
@media (max-width: 720px) { .topo nav a { font-size: var(--t-xs); } }

/* -------------------------------------------------------------- RÉGUA
   "rótulo ——— assunto": o rótulo à esquerda, a linha, o assunto à direita. É a estrutura
   que se lê em diagonal; cada seção da casa começa por ela. */
.rotulo--marca { color: var(--brand); }
.regua { display: flex; align-items: center; gap: var(--s-4); max-width: none; }
.regua::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.regua--fim::after { display: none; }
.regua .regua__assunto { margin-left: auto; order: 3; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-muted); text-align: right; }
.regua::after { order: 2; }
.regua > span:first-child { order: 1; }
@media (max-width: 560px) { .regua { flex-wrap: wrap; } .regua::after { flex-basis: 100%; order: 4; display: none; } .regua .regua__assunto { margin-left: auto; } }
.capitulo__n { font-family: var(--font-display); font-weight: 700; color: var(--numeral); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- ABERTURA (home)
   A gravura é o fundo da primeira tela; o texto mora na zona calma à esquerda, que a própria
   imagem deixou quase em branco (luminância 0,97 nos 45% esquerdos, medida). O objeto —
   o metrônomo, com alpha nativo — entra pela borda inferior direita e é cortado de propósito.

   Camadas (atlas-tecnicas · camadas-rgba, rodada 5): a cena de fundo é ela mesma dois planos —
   fundo (céu e água) e meio (ponte e armazéns), recorte por máscara de luminância a partir da
   gravura única. Pilha de trás para a frente: cena (fundo, depois meio) → véu → nome → objeto.
   O nome mora entre os planos: atrás do metrônomo, à frente da ponte. Sem JavaScript, na
   impressão e com prefers-reduced-motion, todas as camadas ficam nas posições de repouso — a
   MESMA composição, só sem o deslocamento; nada nasce escondido (GREC-0030 §11). */
.abertura { position: relative; overflow: hidden; border-bottom: var(--border); min-height: min(88svh, 720px); display: flex; align-items: center; }
.abertura__cena { position: absolute; inset: 0 0 0 5%; z-index: 0; pointer-events: none; }
.abertura__fundo, .abertura__meio { position: absolute; inset: 0; margin: 0; }
.abertura__fundo img, .abertura__meio img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.abertura__meio {
  z-index: 1;
  transform: translate3d(calc(var(--par-x, 0) * 6px), calc(var(--par-y, 0) * -10px), 0);
}
/* O véu é a zona calma (skill §5.1): fecha os 5% que faltam só atrás da coluna de texto
   (opaco até 30% da largura, aberto a partir de 52%) e não toca a cena. */
.abertura::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,.82) 0%, rgba(255,255,255,.82) 30%, rgba(255,255,255,0) 52%); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .abertura::before { background: linear-gradient(to right, rgba(22,17,15,.82) 0%, rgba(22,17,15,.82) 30%, rgba(22,17,15,0) 52%); } }
:root[data-tema="escuro"] .abertura::before { background: linear-gradient(to right, rgba(22,17,15,.82) 0%, rgba(22,17,15,.82) 30%, rgba(22,17,15,0) 52%); }
.abertura__objeto {
  position: absolute; z-index: 4; right: -3vw; bottom: -6vh; width: min(30vw, 420px); pointer-events: none; margin: 0;
  transform: translate3d(calc(var(--par-x, 0) * 16px), calc(var(--par-y, 0) * -26px), 0);
}
.abertura__txt { position: relative; z-index: 3; max-width: 31rem; padding-block: clamp(64px, 11vh, 128px) clamp(56px, 9vh, 112px); }
/* Na cópia árabe (dir="rtl") o bloco ia para a direita e caía sobre o metrônomo. A cena não se espelha (é o
   Recife): o bloco fica na zona calma, à esquerda, sob o véu, com as linhas alinhadas à direita dentro dele.
   Só acima de 900 px: abaixo disso a cena vai para cima e o texto para baixo, e o bloco fica à direita, onde a
   leitura árabe começa (sem o limite, a 800 px ele ficava encostado à esquerda com a direita vazia). */
@media (min-width: 901px) { [dir="rtl"] .abertura__txt { margin-inline-start: auto; } }
.abertura h1 { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.94; margin-top: var(--s-4); }
.abertura .olho { margin-top: var(--s-5); }
@media (max-width: 900px) {
  /* A composição lado a lado não sobrevive a 390 px: a cena vai para cima, o texto para baixo. */
  .abertura { display: block; min-height: 0; }
  .abertura::before { display: none; }
  .abertura__cena { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .abertura__fundo img, .abertura__meio img { object-position: center; }
  .abertura__objeto { right: -10vw; bottom: auto; top: 3vh; width: min(38vw, 200px); }
  .abertura__txt { padding-block: var(--s-6) var(--s-7); }
}
/* Sem transform-3d real (perspective) de propósito: o deslocamento já basta para ler os planos —
   a Apple também usa translate simples na maior parte das páginas de produto (A-SINTESE.md). */
@media (prefers-reduced-motion: reduce), print {
  .abertura__meio, .abertura__objeto { transform: none !important; }
}

/* --------------------------------------------------------------- ARTE
   As cenas são WEBP opacos sobre papel branco (o alpha do meio-tom não cabe em 250 KB).
   No claro, `multiply` faz o papel desaparecer sobre o fundo da página; no escuro,
   `invert(1) hue-rotate(180deg)` leva a tinta a quase-branco e devolve o vermelho ao vermelho,
   e `screen` funde o papel (agora preto) ao --ink-900. O objeto (peça 06) tem alpha e só inverte. */
.arte { margin: 0; }
.arte img { mix-blend-mode: multiply; }
.abertura__objeto img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .arte img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
  :root:not([data-tema="claro"]) .abertura__objeto img { mix-blend-mode: normal; }
}
:root[data-tema="escuro"] .arte img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
:root[data-tema="escuro"] .abertura__objeto img { mix-blend-mode: normal; }

/* ------------------------------------------------------ ABERTURA DE PÁGINA INTERNA
   Régua em vermelho, a pergunta como h1, o olho, e à direita a gravura do capítulo
   (ou o retrato, em preto e branco, na biografia). */
.abre-pagina { padding-block: var(--s-8) var(--s-7); border-bottom: var(--border); }
.abre-pagina__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
.abre-pagina h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); margin-top: var(--s-4); }
.abre-pagina .olho { margin-top: var(--s-5); }
.abre-pagina__arte { aspect-ratio: 3 / 2; overflow: hidden; justify-self: end; width: 100%; }
.abre-pagina__arte img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.abre-pagina__lado { display: grid; gap: var(--s-2); justify-items: start; }
.retrato { filter: grayscale(1) contrast(1.04); }
.abre-pagina__lado .retrato { width: min(100%, 280px); aspect-ratio: 3 / 4; object-fit: cover; }
.abre-pagina__lado figcaption { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
@media (max-width: 900px) {
  .abre-pagina { padding-block: var(--s-6) var(--s-6); }
  .abre-pagina__grade { grid-template-columns: 1fr; gap: var(--s-5); }
  .abre-pagina__arte { aspect-ratio: 16 / 9; order: -1; }
  .abre-pagina__lado .retrato { width: min(50%, 200px); }
}

/* ----------------------------------------------------------- CAPÍTULO / SEÇÃO
   Cada seção abre com a régua "NN · nome ——— assunto", o título e o olho; o corpo vem embaixo. */
.capitulo { padding-block: var(--s-8) var(--s-7); border-top: var(--border-strong); }
.capitulo--intro { border-top: 0; padding-top: var(--s-7); }
.capitulo--leve { padding-block: var(--s-7) var(--s-6); }
@media (max-width: 720px) { .capitulo { padding-block: var(--s-7) var(--s-6); } }
.capitulo__cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: end; margin-bottom: var(--s-6); }
.capitulo__cab--so-texto { grid-template-columns: minmax(0, 1fr); }
.capitulo__cab h2, .capitulo__cab h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); margin-top: var(--s-4); max-width: 26ch; }
.capitulo__cab .olho { margin-top: var(--s-4); }
.capitulo__arte { aspect-ratio: 3 / 2; overflow: hidden; }
.capitulo__arte img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
@media (max-width: 900px) { .capitulo__cab { grid-template-columns: 1fr; } .capitulo__arte { aspect-ratio: 16 / 9; order: -1; } }
.capitulo__corpo { display: block; }
.capitulo__mais { margin-top: var(--s-5); font-size: var(--t-sm); }
.capitulo__mais a { text-decoration: none; font-weight: 500; }

/* ------------------------------------------------------------ LINHA DO TEMPO (home)
   (.epoca, não .fase: base.css já define .fase para a espinha de quests do TMI, em flex.)
   Três fases com título; dentro, blocos por ano com o ano na margem, prosa curta e os
   artefatos linkados. Os blocos "· lugar" — a instituição no ano em que entrou — são
   uma linha só, em corpo menor: nome, papel, período. */
.epoca { padding-block: var(--s-7) var(--s-4); }
.epoca:first-of-type { padding-top: var(--s-6); }
/* Rolagem narrativa com pin e scrub (atlas-tecnicas · rolagem-narrativa, rodada 5): o cabeçalho
   da fase (numeral, título, anos) fica preso perto do topo — position: sticky puro, sem
   JavaScript e sem depender de animation-timeline — enquanto os marcos (.linha) passam por
   baixo. Funciona em todo navegador atual; o fio vermelho abaixo é que precisa do CSS nativo. */
.epoca__cab {
  position: sticky; top: calc(var(--topo-h, var(--altura-topo)) + var(--s-4)); z-index: 2;
  display: grid; grid-template-columns: var(--col-numero) minmax(0, 1fr); gap: var(--s-5); align-items: baseline;
  padding-bottom: var(--s-4); border-bottom: var(--border-strong);
  background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(8px); backdrop-filter: saturate(1.3) blur(8px);
}
.epoca__cab .capitulo__n { font-size: var(--t-2xl); line-height: 1; }
.epoca__cab h2 { font-size: var(--t-xl); letter-spacing: var(--tr-snug); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.epoca__anos { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); color: var(--fg-muted); font-weight: 500; text-transform: uppercase; }
.epoca__corpo { position: relative; }
/* O fio: uma régua entre a coluna do numeral e a dos marcos, que avança com a rolagem — o
   fio inteiro (scaleY(1)) é o estado de repouso e o de "sem suporte"; a animação só ACRESCENTA
   a progressão onde o navegador tem animation-timeline: view() (Chrome/Edge 115+, Safari 26). */
.epoca__fio { position: absolute; left: var(--col-numero); top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--rule); pointer-events: none; }
.epoca__fio i { display: block; position: absolute; inset: 0; width: 100%; background: var(--brand); transform-origin: top center; transform: scaleY(1); }
@supports (animation-timeline: view()) {
  .epoca { view-timeline: --epoca-fio block; }
  .epoca__fio i { transform: scaleY(0); animation: epoca-fio linear both; animation-timeline: --epoca-fio; animation-range: cover 10% cover 95%; }
}
@keyframes epoca-fio { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .epoca__fio i { transform: scaleY(1) !important; animation: none !important; } }
.linha { list-style: none; padding: 0; margin: 0; }
.ano { display: grid; grid-template-columns: var(--col-numero) minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-bottom: var(--border); align-items: start; }
.ano__quando { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; line-height: 1.1; letter-spacing: var(--tr-tight); color: var(--numeral); font-variant-numeric: tabular-nums; }
.ano h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-snug); line-height: var(--lh-snug); color: var(--fg); }
.ano p { margin-top: var(--s-2); font-size: var(--t-base); color: var(--fg-body); max-width: var(--measure-wide); line-height: var(--lh-normal); }
.ano__artefatos { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); margin-top: var(--s-3) !important; max-width: none !important; }
.ano__artefatos a { color: var(--brand-strong); text-decoration: none; }
.ano__artefatos a:hover { color: var(--brand); text-decoration: underline; }
.ano--lugar { padding-block: var(--s-3); }
.ano--lugar .ano__quando { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0; color: var(--fg-muted); padding-top: 0.35em; }
.ano--lugar p { margin-top: 0; font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.5; }
.ano--lugar p b { color: var(--fg-body); font-weight: 600; }
.detalhe { font-family: var(--font-serif); font-size: var(--t-md); font-weight: 300; color: var(--fg-muted); margin-top: var(--s-6); max-width: var(--measure); padding-left: calc(var(--col-numero) + var(--s-5)); }
@media (max-width: 640px) {
  .epoca__cab, .ano { grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--s-4); }
  .epoca__fio { left: 4.25rem; }
  .detalhe { padding-left: 0; }
}
@media (max-width: 420px) { .ano__quando { font-size: var(--t-base); } }

/* Listas curtas da home: orientações e textos, com o ano/data na margem. */
.lista-data { list-style: none; padding: 0; border-top: var(--border-strong); }
.lista-data li { display: grid; grid-template-columns: var(--col-numero) minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-3); border-bottom: var(--border); align-items: baseline; }
.lista-data .quando { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-data b { color: var(--fg); font-weight: 600; }
.lista-data li > span:last-child { font-size: var(--t-sm); color: var(--fg-body); }
.lista-data li > span:last-child a { color: inherit; text-decoration: none; }
.lista-data li > span:last-child a:hover { color: var(--brand); }
.lista-data .tema { color: var(--fg-muted); }
.lista-data .nivel { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); margin-left: var(--s-2); }
@media (max-width: 640px) { .lista-data li { grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--s-4); } }

/* ----------------------------------------------------------- FICHAS
   Grade de fichas de texto (o que era cartão com pictograma): fio em cima, rótulo em mono,
   nome em display, uma frase. Sem imagem quando não há imagem do trabalho. */
.fichas, .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
.ficha-g { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-2); text-decoration: none; color: inherit; border-top: 2px solid var(--fg); padding-top: var(--s-3); align-content: start; }
.ficha-g:hover .ficha-g__nome { color: var(--brand); }
.ficha-g__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.ficha-g__img img { width: 100%; height: 100%; object-fit: cover; }
.ficha-g__nome { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--fg); line-height: var(--lh-snug); }
.ficha-g p { font-size: var(--t-sm); color: var(--fg-body); margin: 0; }
.ficha-g .rotulo { margin: 0; }
.ficha-g .meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }

/* Lista numerada da casa: numeral em display, título ao lado, metadado à direita. */
.lista-n { list-style: none; padding: 0; border-top: var(--border-strong); counter-reset: item; margin-top: var(--s-3); }
.lista-n li { border-bottom: var(--border); }
.lista-n a, .lista-n span.item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); text-decoration: none; color: var(--fg); }
.lista-n a::before, .lista-n span.item::before { counter-increment: item; content: counter(item, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--numeral); font-variant-numeric: tabular-nums; }
.lista-n a:hover, .lista-n a:hover::before { color: var(--brand); }
.lista-n .meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); white-space: nowrap; }
.lista-n .desc { grid-column: 2; font-size: var(--t-sm); color: var(--fg-body); }
@media (max-width: 600px) { .lista-n a, .lista-n span.item { grid-template-columns: 2.5rem minmax(0, 1fr); } .lista-n .meta { grid-column: 2; white-space: normal; } }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }

/* Colofão (obra · onde e quando), da casa; a coluna do meio some quando não há autor. */
.colofao--curto li { grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr); }
.colofao__obra a { color: inherit; text-decoration: none; }
.colofao__obra a:hover { color: var(--brand); }
@media (max-width: 720px) { .colofao--curto li { grid-template-columns: 1fr; gap: var(--s-1); } .colofao--curto .colofao__onde { text-align: left; grid-column: 1; grid-row: auto; } }

/* --------------------------------------------------------------- MARCO
   Ficha larga (o que era .proj): período na coluna do numeral, título, papel em mono, texto. */
.espinha { border-top: var(--border-strong); margin-top: var(--s-5); }
.marco { display: grid; grid-template-columns: var(--col-numero) minmax(0, 1fr) 180px; gap: var(--s-5); align-items: start; padding-block: var(--s-6); border-bottom: var(--border); }
.marco--sem-img { grid-template-columns: var(--col-numero) minmax(0, 1fr); }
.marco__quando { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; line-height: 1.5; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.marco__titulo { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--fg); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.marco__titulo a { color: inherit; text-decoration: none; }
.marco__titulo a:hover { color: var(--brand); }
.marco__papel { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--brand-strong); margin-top: var(--s-1); }
.marco p { font-size: var(--t-sm); color: var(--fg-body); margin-top: var(--s-2); max-width: var(--measure-wide); line-height: 1.5; }
.marco__links { font-size: var(--t-sm); }
.marco__links a { text-decoration: none; font-weight: 500; }
.marco__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); border: var(--border); margin: 0; }
.marco__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .marco { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .marco__img { max-width: 260px; } }

/* -------------------------------------------------------- GALERIA DAS ENTREGAS
   O cartão de tema do TMI com a imagem real do trabalho do aluno (formato Perlin: grade
   de miniaturas, título, quem fez, semestre). Sem imagem, uma caixa tipográfica com o
   título — a grade não quebra. GREC-0003: só nome e trabalho, nunca rosto. */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: var(--s-4); margin-block: var(--s-5) var(--s-6); }
.trabalho { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-2); border: var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); text-decoration: none; color: inherit; transition: border-color var(--dur-1) var(--ease); min-width: 0; }
a.trabalho:hover { border-color: var(--brand); }
a.trabalho:hover h3 { color: var(--brand); }
.trabalho__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.trabalho__img img { width: 100%; height: 100%; object-fit: cover; }
.trabalho__img--tipo { display: grid; place-items: end start; padding: var(--s-3) var(--s-4); background: var(--bg-soft); border-bottom: var(--border); }
.trabalho__img--tipo h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.02; letter-spacing: var(--tr-tight); color: var(--fg); overflow-wrap: anywhere; text-wrap: balance; }
a.trabalho:hover .trabalho__img--tipo h3 { color: var(--brand); }
.trabalho__corpo { padding: var(--s-3) var(--s-4) 0; min-width: 0; }
.trabalho__corpo .n { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.trabalho h3 { margin-top: var(--s-1); font-size: var(--t-md); line-height: 1.25; overflow-wrap: anywhere; }
.trabalho__quem { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--fg-body); line-height: 1.4; max-width: none; }
.trabalho__desc { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.4; max-width: none; }
.trabalho__meta { padding: var(--s-2) var(--s-4) var(--s-3); font-size: var(--t-xs); color: var(--fg-muted); display: flex; flex-wrap: wrap; gap: var(--s-2); font-family: var(--font-mono); }
.trabalho__meta b { color: var(--fg); }

/* ---------------------------------------------------------------- PROSA
   O que vem de conteudo/*.md. NÃO chamar de .doc: base.css define .doc como grade de três
   colunas, e a colisão jogava toda lista para uma coluna de 17,6 px (17/09/2026). */
.prosa-grec { max-width: 74ch; display: block; }
.prosa-grec p { margin: var(--s-3) 0; line-height: 1.6; }
.prosa-grec > :first-child { margin-top: 0; }
.prosa-grec h3 { margin-top: var(--s-6); font-size: var(--t-lg); }
.prosa-grec h4 { margin-top: var(--s-5); font-size: var(--t-md); }
.prosa-grec code, .prosa-grec a { overflow-wrap: anywhere; word-break: break-word; }
.prosa-grec ol { padding-left: 1.4em; margin: var(--s-3) 0; } .prosa-grec ol li { margin: var(--s-2) 0; line-height: 1.5; }
.lista-simples { padding-left: 1.1em; margin: var(--s-2) 0; } .lista-simples li { margin: var(--s-2) 0; line-height: 1.5; }
.prosa-grec ul.lista-simples li img { display: block; margin: var(--s-3) 0; max-width: min(560px, 100%); height: auto; border-radius: var(--r-md); border: var(--border); }
.prosa-grec blockquote { margin-block: var(--s-5); }
.fig { margin: var(--s-5) 0; } .fig img { width: 100%; border-radius: var(--r-md); border: var(--border); display: block; }
.fig figcaption { font-size: var(--t-xs); color: var(--fg-muted); margin-top: var(--s-2); font-family: var(--font-mono); }
/* gráfico desenhado para 600 px de largura: fica no tamanho natural, centralizado */
.fig--grafico { max-width: 600px; margin-inline: auto; }
.fig--grafico img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .fig--grafico { max-width: 100%; } }
.tabela-wrap { overflow-x: auto; max-width: 100%; margin-top: var(--s-4); }
.tabela-wrap table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.tabela-wrap th, .tabela-wrap td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--border); vertical-align: top; }
.tabela-wrap thead th { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-muted); font-weight: 500; }
/* Ensino por tema (revisão manual de 12/10/2026, gancho G4→G1): código e turmas não quebram; semestres e
   instituição quebram (a coluna de semestres chega a doze edições). A linha de tema é o cabeçalho do
   grupo; a disciplina atual leva um filete vermelho à esquerda e fundo leve. */
.tabela--ensino td { white-space: normal; }
.tabela--ensino td:nth-child(3), .tabela--ensino td:nth-child(5) { white-space: nowrap; }
.tabela--ensino td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }
.tabela--ensino td:first-child { min-width: 14rem; }
.tabela--ensino tr.tema th {
  padding-top: var(--s-5); border-bottom: var(--border-strong); background: none;
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase;
  font-weight: 500; color: var(--brand);
}
.tabela--ensino tbody tr.tema:hover { background: none; }
.tabela--ensino tr.atual td { background: var(--bg-soft); }
.tabela--ensino tr.atual td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.pubs { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); }
.pubs li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--border); line-height: 1.45; }
.pub__ano { font-family: var(--font-mono); color: var(--fg-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .pub__aut { font-size: var(--t-sm); color: var(--fg-muted); } .pub__veic { font-size: var(--t-sm); font-style: italic; }
.pubs--curta li { padding: var(--s-2) 0; font-size: var(--t-sm); }
.fut-barra { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); font-size: var(--t-sm); color: var(--fg-muted); }
.fonte { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); margin-top: var(--s-4); max-width: none; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.mudo { color: var(--fg-muted); font-size: var(--t-sm); }

/* ---------------------------------------------------- PERGUNTAS FREQUENTES
   No fim da página, com título discreto e sem numeração; a pergunta é o cabeçalho e a
   resposta o parágrafo (GREC-0011). Alimenta o FAQPage em JSON-LD. Nunca na home. */
.capitulo--perguntas { border-top: var(--border); padding-block: var(--s-7) var(--s-6); }
.faq { display: block; max-width: 82ch; margin-top: var(--s-4); }
.faq .pergunta { padding-block: var(--s-4); border-top: var(--border); }
.faq .pergunta:first-child { border-top: 0; padding-top: 0; }
.faq .pergunta h2 { font-size: var(--t-md); line-height: 1.3; letter-spacing: var(--tr-snug); margin: 0; max-width: 58ch; font-weight: 600; }
.faq .pergunta p { margin: var(--s-2) 0 0; line-height: 1.6; color: var(--fg-body); max-width: 72ch; font-size: var(--t-sm); }

/* ------------------------------------------------------ GALERIA COM BUSCA (/galeria/) */
.gbusca { position: sticky; top: var(--altura-topo); z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: var(--s-4) 0; border-bottom: var(--border); margin-bottom: var(--s-5); }
.gbusca__linha { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
#g-q { flex: 1 1 320px; min-width: 0; max-width: 100%; font: inherit; font-size: var(--t-md); padding: .8em 1em; border: var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); }
#g-q:focus { outline: none; border-color: var(--brand); }
#g-ordem { font: inherit; font-size: var(--t-sm); padding: .6em .8em; border: var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); min-width: 0; max-width: 100%; }
#g-conta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: .08em; text-transform: uppercase; }
.gfaceta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s-3); }
.gfaceta__t { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: .1em; margin-right: var(--s-2); }
.gchip, .gtag { font: inherit; font-size: var(--t-xs); padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: transparent; color: var(--fg-body); cursor: pointer; transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1); }
.gchip:hover, .gtag:hover { border-color: var(--brand); color: var(--brand); }
.gchip--on, .gtag--on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gchip b, .gtag b { font-weight: 600; opacity: .6; }
#g-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.g-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.gcard { border: var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.gcard:hover { border-color: var(--brand); }
.gcard__img { aspect-ratio: 16/10; background: var(--bg-soft); overflow: hidden; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__img--vazia { background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 10px, transparent 10px, transparent 20px); }
.gcard__corpo { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.gcard__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
.gcard h3 { margin: 0; font-size: var(--t-md); line-height: 1.25; overflow-wrap: anywhere; }
.gcard__desc { margin: 0; font-size: var(--t-sm); color: var(--fg-body); line-height: 1.45; }
.gcard__aut { margin: 0; font-size: var(--t-xs); color: var(--fg-muted); }
.gcard__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gcard__acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.gcard mark { background: color-mix(in srgb, var(--brand) 22%, transparent); color: inherit; padding: 0 2px; border-radius: var(--r-xs); }
.g-mais { grid-column: 1 / -1; justify-self: center; margin-top: var(--s-4); }
#g-vazio { margin-top: var(--s-6); color: var(--fg-muted); }

/* ------------------------------------------------------ galeria F3: o mapa da galeria (/galeria/)
   Revisão manual de 12/10/2026, pino na lista de filtros: no lugar da parede de 80 chips, o mapa no espírito de
   /temas/ do TMI. Áreas em pílula com contagem (a escolhida em tinta cheia); entradas com disco de área proporcional
   ao número de trabalhos, alinhadas numa coluna; legenda à direita, que acompanha o mouse e o foco; no alto da lista,
   a capa do que foi escolhido e os filtros em uso, cada um com o seu x. Abaixo de 900 px a legenda sai (o toque vai
   direto à lista) e a área escolhida esconde as outras. --topo-h e --gbusca-h são medidos por galeria.js. */
#g-limpar[hidden] { display: none; }   /* .botao é inline-flex e vencia o atributo hidden */
.gbusca { top: var(--topo-h, var(--altura-topo)); }
.gm-fams { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0 0 var(--s-6); }
.gm-fams[hidden], .gm__lado[hidden], .gm-mais[hidden] { display: none; }
.gm-fam { font: inherit; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); min-height: 40px; padding: .4em .95em; border-radius: var(--r-pill); border: 1px solid var(--rule-control); background: transparent; color: var(--fg-body); cursor: pointer; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.gm-fam:hover { border-color: var(--brand); color: var(--brand); }
.gm-fam[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.gm-fam__n { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-xs); opacity: .7; font-variant-numeric: tabular-nums; }
.gm-fam__forma { width: 9px; height: 9px; background: currentColor; flex: none; }
.gm-fam:focus-visible, .gm-no:focus-visible, .gm-capa__tirar:focus-visible, .gm-ativo:focus-visible, .gm-mais summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* o mapa corre em colunas (as áreas se empilham sem buraco) e a régua vertical da legenda corre a altura toda */
.gm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: var(--s-6); align-items: stretch; }
.gm__mapa { columns: 230px 3; column-gap: var(--s-5); }
.gm-familia { min-width: 0; break-inside: avoid; margin: 0 0 var(--s-6); transition: opacity var(--dur-2) var(--ease); }
.gm-familia__t { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-muted); }
/* a área é legenda do mapa, não cabeçalho de tabela (crítica, ciclo 2): cinza, sem fio, a contagem colada ao nome;
   os discos são a figura. A área escolhida passa à tinta do texto, sem vermelho */
.gm-familia__t { gap: .7em; }
.gm-familia__n { font-variant-numeric: tabular-nums; opacity: .75; }
.gm--filtro .gm-familia:not(.gm-familia--fora) .gm-familia__t { color: var(--fg); }
.gm-nw { white-space: nowrap; }   /* "2020–2023" não parte no traço */
.gm-familia__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gm-no { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--s-3); min-height: var(--alvo-min); padding: 3px 0; text-decoration: none; color: var(--fg); border-radius: var(--r-sm); }
.gm-no__disco { justify-self: center; width: var(--d); height: var(--d); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 13%, var(--bg)); border: 1.5px solid var(--brand); transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.gm-no__n { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.gm-no__txt { display: grid; gap: 1px; min-width: 0; }
.gm-no__rot { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); line-height: 1.2; letter-spacing: var(--tr-snug); overflow-wrap: anywhere; transition: color var(--dur-1) var(--ease); }
.gm-no__anos { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.gm-no:hover .gm-no__disco, .gm-no:focus-visible .gm-no__disco, .gm-no[aria-current="true"] .gm-no__disco { background: var(--brand); transform: scale(1.06); }
.gm-no:hover .gm-no__n, .gm-no:focus-visible .gm-no__n, .gm-no[aria-current="true"] .gm-no__n { color: var(--on-brand); }
.gm-no:hover .gm-no__rot, .gm-no:focus-visible .gm-no__rot, .gm-no[aria-current="true"] .gm-no__rot { color: var(--brand); }
.gm-no--zero { opacity: .35; }
.gm--filtro .gm-familia--fora { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .gm-no__disco, .gm-familia { transition: none; } .gm-no:hover .gm-no__disco, .gm-no[aria-current="true"] .gm-no__disco { transform: none; } }

.gm__lado { border-left: var(--border); padding-left: var(--s-5); margin-bottom: var(--s-6); }
.gm__legenda { position: sticky; top: calc(var(--topo-h, var(--altura-topo)) + var(--gbusca-h, 90px) + var(--s-4)); min-height: 260px; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.gm__legenda-vazia { margin: 0; font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.45; color: var(--fg-muted); }
.gm-leg__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gm-leg__fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--border); background: var(--bg-soft); }
.gm__legenda .rotulo { margin: 0; }
.gm-leg__t { margin: 0; font-size: var(--t-lg); line-height: 1.2; letter-spacing: var(--tr-snug); }
.gm-leg__frase { margin: 0; font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.45; color: var(--fg-body); }
.gm-leg__ir { align-self: start; margin-top: var(--s-1); }
.gm-leg__pag { align-self: start; font-size: var(--t-sm); }
.gm-leg__nada { margin: 0; font-size: var(--t-sm); color: var(--fg-muted); }

.gm-res { margin-top: var(--s-8); scroll-margin-top: calc(var(--topo-h, var(--altura-topo)) + var(--gbusca-h, 90px) + var(--s-4)); outline: none; }
#g-mapa { scroll-margin-top: calc(var(--topo-h, var(--altura-topo)) + var(--gbusca-h, 90px) + var(--s-6)); }
.gm-capa { margin-bottom: var(--s-5); }
.gm-capa .regua { margin: 0 0 var(--s-3); }
.gm-capa__t { margin: 0; font-size: var(--t-2xl); line-height: 1.1; letter-spacing: var(--tr-tight); max-width: 26ch; }
.gm-capa__frase { margin: var(--s-3) 0 0; font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.5; color: var(--fg-body); max-width: var(--measure); }
.gm-capa__pag { margin: var(--s-2) 0 0; font-size: var(--t-sm); }
.gm-capa .regua__assunto { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2) var(--s-4); }
.gm-capa__volta, .gm-capa__tirar { display: inline-flex; align-items: center; min-height: 32px; color: var(--fg-muted); text-decoration: none; }
.gm-capa__tirar { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
.gm-capa__volta:hover, .gm-capa__tirar:hover { color: var(--brand); }
.gchip--on b, .gtag--on b { color: var(--on-brand); opacity: .85; }
.gm-res__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-top: var(--s-3); border-top: var(--border); }
#g-ativos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
#g-ativos:empty { display: none; }
.gm-ativos__t { margin-right: var(--s-1); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-muted); }
.gm-ativo { font: inherit; font-size: var(--t-xs); min-height: 30px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--fg); background: var(--fg); color: var(--bg); cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.gm-ativo:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gm-ativos__limpar { font: inherit; font-size: var(--t-xs); min-height: 30px; padding: 3px 6px; border: 0; background: none; color: var(--fg-muted); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.gm-ativos__limpar:hover { color: var(--brand); }
.gm-mais { margin-left: auto; max-width: 100%; }
.gm-mais[open] { flex-basis: 100%; margin-left: 0; }
.gm-mais summary { display: inline-flex; align-items: center; gap: .4em; min-height: var(--alvo-min); cursor: pointer; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-body); }
.gm-mais summary:hover { color: var(--brand); }
.gm-mais summary::-webkit-details-marker { display: none; }
.gm-mais summary::after { content: "+"; font-size: var(--t-sm); line-height: 1; }
.gm-mais[open] summary::after { content: "−"; }
#g-ativos:empty + .gm-mais { margin-left: 0; }
.gm-mais #g-facetas .gfaceta:first-child { margin-top: var(--s-1); }
/* no escuro, a busca e a ordem herdavam a superfície clara (--surface não tem versão escura) */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) #g-q, :root:not([data-tema="claro"]) #g-ordem { background: var(--bg-raised); } }
:root[data-tema="escuro"] #g-q, :root[data-tema="escuro"] #g-ordem { background: var(--bg-raised); }

/* o índice da página, sob o olho: as cinco seções numeradas, a última o mapa */
.gm-indice { display: grid; justify-items: start; gap: 2px; margin: var(--s-5) 0 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.gm-indice__t { margin-bottom: var(--s-1); color: var(--fg-muted); }
.gm-indice a { display: inline-flex; align-items: center; min-height: 30px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--rule); }
.gm-indice a b { margin-right: .5em; font-weight: 500; color: var(--brand); }
.gm-indice a:hover { color: var(--brand); border-color: var(--brand); }
section[id^="producao-"], #lista { scroll-margin-top: var(--topo-h, var(--altura-topo)); }

@media (max-width: 899.98px) {
  .gm { grid-template-columns: minmax(0, 1fr); }
  .gm__lado { display: none; }
  .gm--filtro .gm-familia--fora { display: none; }
  .gm-capa--area { display: none; }   /* o bloco da área escolhida está logo acima; a capa repetiria o nome e a conta */
  .gm-fams { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); padding-bottom: 2px; }
  .gm-fams::-webkit-scrollbar { display: none; }
  .gm-fam { flex: none; }
  .gm-no { grid-template-columns: 64px minmax(0, 1fr); }
  .gm-no__disco { width: calc(var(--d) * .85); height: calc(var(--d) * .85); }
  .gm-res { margin-top: var(--s-7); }
  .gm-capa__t { font-size: var(--t-xl); }
}
@media (max-width: 559.98px) {
  /* no celular o topo do site já ocupa três linhas: a barra de busca deixa de ficar presa (somava 291 px, um terço da
     tela) e o "limpar" dela sai, porque o da linha de filtros fica */
  .gbusca { position: static; padding: var(--s-3) 0; }
  .gbusca #g-limpar { display: none; }
}
@media print { .gm-fams, .gm__lado, .gm-mais, #g-ativos { display: none !important; } .gm { display: block; } }

/* --------------------------------------------------------------- RODAPÉ */
.rodape p { max-width: 34em; }
.rodape .rotulo + p, .rodape .rotulo + ul { margin-top: var(--s-3); }

/* URL longa em link ou código não alarga a página no celular (skill §9). */
a, code { overflow-wrap: anywhere; }
.so-leitor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Impressão: a mesma página, sem o cromo de navegação. */
@media print {
  .topo, .tema-btn, .lingua, .pular { display: none !important; }
  .abertura { min-height: 0; }
  .abertura::before { display: none; }
  .trabalho, .gcard, .ficha-g { break-inside: avoid; }
  .epoca__cab { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .epoca__fio i { transform: scaleY(1); animation: none; }
}

/* ------------------------------------------------------ MARCOS (home, rodada 10: fichas por papel)
   specs/rodada-10-marcos-em-fichas-e-correcoes.md — "a corda no começo tá estranha, as colunas
   ficaram estranhas, não dá para entender bem". Uma LINHA por papel (professor, conselheiro,
   empreendedor, consultor — MARCOS_PAPEL em gerar.py): o rótulo do papel grande à esquerda, com o
   intervalo de anos embaixo; à direita, os marcos daquele papel lado a lado (miniatura 3:2 + anos +
   nome + função, cada um leva à prancha em /trajetoria/), do mais recente ao mais antigo, e uma nota
   "e também" para o que não tem prancha. Linhas separadas por filete; "Ver trajetória →" é a última
   linha. Sem SVG, sem JavaScript, nada anima (piso GREC-0035 por construção). */
.marcos-papeis { margin-top: var(--s-6); border-top: var(--border-strong); }
.marcos-linha {
  display: grid; grid-template-columns: minmax(10rem, 13.5rem) minmax(0, 1fr);
  column-gap: var(--s-6); padding-block: var(--s-5); border-bottom: var(--border);
}
.marcos-linha__papel { display: flex; flex-direction: column; gap: var(--s-1); padding-top: 2px; }
.marcos-linha__rotulo {
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem); letter-spacing: -.01em; overflow-wrap: normal; hyphens: manual;
  color: var(--fg); text-decoration: none; transition: color .2s ease;
}
.marcos-linha__rotulo:hover, .marcos-linha__rotulo:focus-visible { color: var(--brand); }
.marcos-linha__rotulo:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.marcos-linha__anos {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide);
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.marcos-linha__corpo { min-width: 0; }
.marcos-linha__itens {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-4);
}
.marcos-linha__itens li { min-width: 0; border: 0; padding: 0; }
/* `border: 0; padding: 0` vence a regra genérica de link em lista desta seção (herdada de .capitulo--leve), que
   punha um filete e 32px sob cada cartão — o único filete da linha é o de .marcos-linha. */
.marcos-linha__itens .marco { display: flex; flex-direction: column; gap: var(--s-2); color: inherit; text-decoration: none; border: 0; padding: 0; }
/* miniatura legível (crítica da rodada 9): a gravura ocupa a largura inteira da célula — quatro
   células em ~1000px dão ~220px cada, acima do piso de 96px de altura. */
.marco__mini { margin: 0; width: 100%; aspect-ratio: 3 / 2; }
.marco__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.marco__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.marco__anos {
  font-family: var(--font-mono); font-size: .72rem; color: var(--fg-muted);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tr-wide);
}
.marco__txt b {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); line-height: 1.15;
  color: var(--fg); transition: color .2s ease;
}
.marco__papel { font-size: .82rem; line-height: 1.4; color: var(--fg-body); }
/* o que é a instituição e para que serve (anotação de 13/10/2026): entre o nome e o papel, no corpo de
   texto do site (não mono, para não se confundir com o papel), menor que o nome e na cor secundária. */
.marco__oque { font-size: .8rem; line-height: 1.4; color: var(--fg-muted); text-wrap: pretty; }
.marco:hover .marco__txt b, .marco:focus-visible .marco__txt b { color: var(--brand); }
.marco:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.marcos-linha__tambem {
  margin: var(--s-4) 0 0; font-size: .82rem; line-height: 1.45; color: var(--fg-body);
}
.marcos-linha__tambem span {
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fg-muted); margin-right: var(--s-2);
}
.marcos-linha--ver { display: flex; justify-content: flex-end; border-bottom: none; padding-block: var(--s-4) 0; }
.marcos-papeis__ver {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); line-height: 1.2; color: var(--brand);
  text-decoration: none;
}
.marcos-papeis__ver span { display: inline-block; transition: transform .25s var(--ease); }
.marcos-papeis__ver:hover span, .marcos-papeis__ver:focus-visible span { transform: translateX(5px); }
.marcos-papeis__ver:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* --------------------------------------------------------------------------- telas médias e celular
   Até 1100px os marcos ficam em 2 colunas (a célula de 4 ficaria estreita demais para nome + função);
   abaixo de 761px o rótulo do papel sobe para cima da linha e os marcos continuam em 2 colunas. */
/* cinco marcos cabem em cinco colunas (~190px cada em 1440); seis ficam em 3 × 2, para as miniaturas
   não encolherem abaixo de ~220px nem sobrar uma fila de dois. */
.marcos-linha__itens--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s-4); }
.marcos-linha__itens--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .marcos-linha__itens, .marcos-linha__itens--n5, .marcos-linha__itens--n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .marcos-linha { grid-template-columns: 1fr; row-gap: var(--s-3); padding-block: var(--s-4); }
  .marcos-linha__papel { flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .marcos-linha__itens { column-gap: var(--s-3); }
  .marcos-linha--ver { justify-content: flex-start; }
}
/* âncora direta (menu, link externo) para #marcos: o rótulo da primeira linha não pode ficar coberto
   pela barra fixa — mesma régua de .doc__corpo > article em base.css. */
#marcos { scroll-margin-top: calc(var(--altura-topo) + var(--s-4)); }
/* (revisão manual de 12/10/2026: aqui havia um "}" solto no fim do arquivo; sem efeito enquanto era a
   última coisa, mas engoliria a primeira regra acrescentada depois dele.) */

/* ------------------------------------------------------ TELEFONE (revisão manual, folha 68, R-224)
   O número nunca quebra de linha: o ramal caía sozinho no começo da linha de baixo, com a vírgula. */
.tel { white-space: nowrap; }

/* ------------------------------------------------------ ORIENTAÇÕES NA HOME (revisão manual, folha 32, R-120)
   Só os números à vista; nomes e temas num <details> que abre e fecha, sem JavaScript. */
.ori-num {
  list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: var(--border-strong);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-5);
}
.ori-num li { display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-4); border: 0; min-width: 0; }
.ori-num__n {
  font-family: var(--font-mono); font-weight: 500; color: var(--brand);
  font-size: clamp(2rem, 1.2rem + 2vw, 3.2rem); line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.ori-num__rot { font-size: var(--t-sm); line-height: 1.35; color: var(--fg-body); }
.ori-detalhe { border-top: var(--border); border-bottom: var(--border); }
.ori-detalhe > summary {
  display: flex; align-items: baseline; gap: var(--s-3); cursor: pointer; min-height: var(--alvo-min, 44px);
  padding-block: var(--s-3); font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--fg);
}
.ori-detalhe > summary::after {
  content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: var(--t-lg); line-height: 1; color: var(--fg-muted);
}
.ori-detalhe[open] > summary::after { content: "\2212"; color: var(--brand); }
.ori-detalhe > summary:hover { color: var(--brand); }
.ori-detalhe > .lista-data { margin: 0 0 var(--s-4); }
@media (max-width: 1100px) { .ori-num { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ori-num { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); } }

/* ------------------------------------------------------ DISCIPLINAS ATUAIS EM /ensino/ (R-121, R-281)
   Três fichas grandes; a captura de tela da página da disciplina entra quando existir em
   assets/ensino/capturas/ (fase 2); sem ela, a ficha é só texto, com o mesmo fio no alto. */
.disc-atuais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-block: var(--s-5) var(--s-4); }
.disc-atual { display: flex; flex-direction: column; gap: var(--s-3); border-top: 3px solid var(--brand); padding-top: var(--s-4); min-width: 0; }
.disc-atual__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: var(--border); background: var(--bg-soft); }
.disc-atual__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.disc-atual__meta { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: var(--tr-wide); }
.disc-atual__nome { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.12; }
.disc-atual__nome a { color: var(--fg); text-decoration: none; }
.disc-atual__nome a:hover, .disc-atual__nome a:focus-visible { color: var(--brand); }
.disc-atual p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-body); }
@media (max-width: 900px) { .disc-atuais { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ------------------------------------------------------ TEXTOS EM FICHAS (/textos/, R-293 e R-294)
   Cada texto do site com o trecho dele, em Newsreader; a data e o tipo no rótulo. */
.fichas--textos { margin-block: var(--s-5) var(--s-4); }
.fichas--textos .ficha-g p:not(.rotulo) { font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.38; color: var(--fg); }

/* ------------------------------------------------------ TEXTOS FORA DO SITE (/textos/, R-295 e R-296)
   Cada texto publicado fora em card: a imagem com que saiu, data e veículo no rótulo, o título com link,
   uma frase e o crédito da imagem. Quatro por linha no desktop (os sete textos em 4 + 3), um no celular. */
.fora-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-6) var(--s-5); margin-block: var(--s-5) var(--s-4); }
.fora { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.fora__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: var(--border); background: var(--bg-soft); margin-bottom: var(--s-2); }
.fora__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fora .rotulo { margin: 0; }
.fora__tit { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); line-height: var(--lh-snug); overflow-wrap: anywhere; text-wrap: balance; }
.fora__tit a { color: var(--fg); text-decoration: none; }
.fora__tit a:hover, .fora__tit a:focus-visible { color: var(--brand); }
.fora:has(.fora__img:hover) .fora__tit a { color: var(--brand); }
.fora__frase { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-body); }
.fora__frase a { overflow-wrap: anywhere; }
.fora__credito { margin: auto 0 0; padding-top: var(--s-1); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }
@media print { .fora { break-inside: avoid; } }

/* ------------------------------------------------------ PÔSTERES DOS TEXTOS DO SITE (R-297)
   Em /textos/, os cinco textos de "Neste site" no feitio dos cards de "Fora do site", com o pôster inteiro
   (retrato 2:3, sem corte). Dentro de cada texto, a figura abre a imagem em tamanho inteiro. */
.fora-grade--posteres { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.fora-grade--posteres .fora__img { aspect-ratio: 2 / 3; }
.fig--ampliavel { max-width: 640px; }
.fig__abre { display: block; cursor: zoom-in; }

/* ------------------------------------------------------ MAPA DAS ÁREAS DE TRANSFORMAÇÃO AGÊNTICA (/inovacao/, R-227)
   O SVG do GV (600 px de largura natural) abre a seção, alinhado à prosa e não centrado. */
.fig--areas { max-width: 600px; margin-inline: 0; margin-block: 0 var(--s-5); }

/* ------------------------------------------------------ PATENTES NA HOME (R-127), sob as publicações selecionadas */
.colofao-patentes { margin: var(--s-4) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-body); max-width: none; }
.colofao-patentes .rotulo { margin-right: var(--s-2); }
.colofao-patentes a { color: var(--fg); font-family: var(--font-mono); font-size: var(--t-xs); white-space: nowrap; }
.colofao-patentes a:hover { color: var(--brand); }

/* ------------------------------------------------------ SÉRIE DE VÍDEOS NA PRANCHA (/trajetoria/, R-190)
   Campo `serie` da parada (cin-ufpe: os 19 vídeos da TMI 2026.2). Faixa de miniaturas 16:9 depois da colagem, na
   largura toda da prancha: cinco por linha no desktop; no celular, rolagem lateral só da faixa, nunca da página. */
/* sem linha fixa: a faixa (e a figura depois dela) vai para a primeira linha inteira livre da grade, depois de tudo */
.prancha__serie { position: relative; z-index: 3; grid-column: 1 / -1; margin-top: var(--s-5); }
/* figura de dados da prancha (R-194): na largura em que foi desenhada, do lado do texto da prancha */
.prancha__grade > .prancha__figura { position: relative; z-index: 3; grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 600px; margin: var(--s-5) 0 0; }
.prancha--meia.prancha--a .prancha__grade > .prancha__figura { justify-self: end; }
.serie__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); border-top: 2px solid var(--pr-fg, var(--fg)); padding-top: var(--s-3); }
.serie__tit { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--pr-fg, var(--fg)); }
.serie__sub { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--pr-mute, var(--fg-muted)); }
.serie__itens { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.serie__itens li { margin: 0; min-width: 0; }
.serie__itens a, .serie__itens li > span { display: grid; gap: var(--s-1); color: var(--pr-fg, var(--fg)); text-decoration: none; }
.serie__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--pr-rule, var(--rule)); }
.serie__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.serie__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--pr-mute, var(--fg-muted)); font-variant-numeric: tabular-nums; }
.serie__itens a:hover .serie__img, .serie__itens a:focus-visible .serie__img { border-color: var(--pr-acc, var(--brand)); }
.serie__itens a:hover .serie__meta, .serie__itens a:focus-visible .serie__meta { color: var(--pr-acc, var(--brand)); }
.serie__fim { margin: var(--s-4) 0 0; font-size: var(--t-sm); }
.serie__fim a { color: var(--pr-fg, var(--fg)); }
@media (max-width: 899.98px) {
  .prancha__serie { order: 7; }
  .prancha__figura { order: 8; }
  .serie__itens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: var(--s-3); padding-bottom: var(--s-2); }
  .serie__itens li { flex: 0 0 62%; scroll-snap-align: start; }
}
@media print {
  .serie__itens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  .serie__itens li { break-inside: avoid; }
}

/* Disciplina atual sem captura (Concepção de Artefatos Digitais vive no Classroom, sem página pública): quando as
   outras têm captura, as com captura ficam duas por linha, maiores, e a sem captura vem abaixo, na largura toda,
   com o nome à esquerda e a frase à direita, em vez de uma coluna de texto solta ao lado das imagens (R-281). */
.disc-atuais:has(.disc-atual--com-img):has(.disc-atual:not(.disc-atual--com-img)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.disc-atuais:has(.disc-atual--com-img) .disc-atual:not(.disc-atual--com-img) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .disc-atuais:has(.disc-atual--com-img) .disc-atual:not(.disc-atual--com-img) .disc-atual__txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-5); align-items: start; }
  .disc-atuais:has(.disc-atual--com-img) .disc-atual:not(.disc-atual--com-img) .disc-atual__txt > p:last-child { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 899.98px) { .disc-atuais:has(.disc-atual--com-img):has(.disc-atual:not(.disc-atual--com-img)) { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ VINHETAS DOS TEMAS DE ENSINO (R-116, GV-temas)
   Na linha de tema da tabela "As disciplinas, por tema" (/ensino/ e home): a gravura a duas tintas, 96 px (72 na home e no celular),
   ao lado do nome; no escuro, invertida como as outras gravuras (.arte img). Só aparece quando o arquivo existe. */
.tabela--ensino tr.tema th .tema__cab { display: flex; align-items: center; gap: var(--s-3); }
.tabela--ensino tr.tema th .tema__vinheta { display: block; flex: none; width: 96px; height: auto; aspect-ratio: 3 / 2; mix-blend-mode: multiply; }
#ensino .tabela--ensino tr.tema th .tema__vinheta { width: 72px; }   /* na home, menor (seis vinhetas numa seção curta) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tabela--ensino tr.tema th .tema__vinheta { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
}
:root[data-tema="escuro"] .tabela--ensino tr.tema th .tema__vinheta { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
@media (max-width: 560px) { .tabela--ensino tr.tema th .tema__vinheta, #ensino .tabela--ensino tr.tema th .tema__vinheta { width: 72px; } }

/* ------------------------------------------------------ BIO PARA IMPRENSA E EVENTOS (/bio/, rodada 11)
   Gramática de página: pasta de imprensa. Na abertura, à direita, a folha de contato das sete fotos (duas tiras:
   retratos e eventos), em preto e branco, como o retrato de /sobre/: é o mundo de duas tintas da casa; a cor
   aparece embaixo, onde a foto é o que se baixa. Sob o herói, a barra de língua presa ao topo, com o índice da
   pasta à direita. Os textos são fichas numeradas (01–09) com o numeral e o botão de copiar na margem, presos
   enquanto a ficha rola; as fotos continuam a numeração (10–16). Os blocos .bio-l são as três línguas de cada
   ficha: sem JavaScript aparecem os três, com a etiqueta da língua; com JavaScript (html.bio-js, que escreve
   data-bio-lingua) só a escolhida. Nada nasce escondido: só o botão de copiar, que sem JavaScript não existe. */
/* Alturas do topo e da barra presa, para a barra pousar sob o topo e as âncoras pararem abaixo dos dois. bio.js
   mede (--topo-h, --bio-barra-h); sem ele, valem as medidas de cada faixa de largura e a barra não fica presa. */
:root { --bio-topo: var(--topo-h, 61px); --bio-barra: var(--bio-barra-h, 57px); }
@media (max-width: 1100px) { :root { --bio-topo: var(--topo-h, 98px); } }
@media (max-width: 720px) { :root { --bio-topo: var(--topo-h, 114px); } }
@media (max-width: 560px) { :root { --bio-topo: var(--topo-h, 158px); --bio-barra: var(--bio-barra-h, 45px); } }
html:not(.bio-js) { --bio-barra: 0px; }
/* O cromo da bio em três línguas (ciclo 3): cada texto de interface vem em três <span class="bio-c"> e fica o da
   língua da bio; sem JavaScript, o da língua da página (e o inglês numa cópia que não seja pt, en nem fr). */
html[data-bio-lingua="pt"] .bio-c:not([data-bio-c="pt"]), html[data-bio-lingua="en"] .bio-c:not([data-bio-c="en"]), html[data-bio-lingua="fr"] .bio-c:not([data-bio-c="fr"]),
html:not([data-bio-lingua])[lang|="pt"] .bio-c:not([data-bio-c="pt"]), html:not([data-bio-lingua])[lang|="en"] .bio-c:not([data-bio-c="en"]), html:not([data-bio-lingua])[lang|="fr"] .bio-c:not([data-bio-c="fr"]),
html:not([data-bio-lingua]):not([lang|="pt"]):not([lang|="en"]):not([lang|="fr"]) .bio-c:not([data-bio-c="en"]) { display: none; }
main:has(.bio-barra) .abre-pagina h1 { font-size: var(--t-4xl); letter-spacing: -0.04em; line-height: 0.94; }
/* /sobre/: a chamada para a bio numa linha sob a abertura (ciclo 5), rótulo à esquerda, link ao lado; quebra no
   celular, o rótulo em cima */
.bio-atalho { border-bottom: var(--border); }
.bio-atalho__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); padding-block: var(--s-4); }
.bio-atalho .rotulo { margin: 0; flex: none; }
.bio-chamada { margin: 0; flex: 0 1 38em; min-width: 0; max-width: 38em; font-size: var(--t-sm); line-height: 1.5; }   /* ~78 caracteres */
.bio-chamada a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.bio-chamada a:hover, .bio-chamada a:focus-visible { color: var(--brand-strong); text-decoration-thickness: 2px; }

.bio-contato { margin: 0; justify-self: end; width: 100%; max-width: 460px; }
.bio-contato ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-2); }
.bio-contato li { margin: 0; min-width: 0; }
.bio-contato__r { grid-column: span 4; }
.bio-contato__p { grid-column: span 3; }
.bio-contato a { display: block; overflow: hidden; background: var(--bg-soft); border: var(--border); aspect-ratio: 3 / 4; }
.bio-contato__p a { aspect-ratio: 3 / 2; }
.bio-contato img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter var(--dur-2) var(--ease); }
.bio-contato a:hover img, .bio-contato a:focus-visible img { filter: none; }
.bio-contato a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bio-contato figcaption { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); }

.bio-barra { position: sticky; top: var(--bio-topo); z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); border-bottom: var(--border); }   /* o prefixo: Safari até o 17 só conhece -webkit-backdrop-filter */
.bio-barra__in { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s-6); min-height: 56px; }
.bio-sel { display: flex; gap: var(--s-4); }
.bio-sel button { font: inherit; font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); min-height: 56px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--fg-muted); cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.bio-sel button:hover { color: var(--brand); }
.bio-sel button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--brand); }
.bio-sel button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-xs); }
.bio-barra__indice { margin: 0 0 0 auto; display: flex; gap: var(--s-5); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--tr-wide); text-transform: uppercase; max-width: none; }
.bio-barra__indice a { color: var(--fg-muted); text-decoration: none; min-height: var(--alvo-min); display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.bio-barra__indice a:hover { color: var(--brand); }
html:not(.bio-js) .bio-sel { display: none; }
html:not(.bio-js) .bio-barra { position: static; }   /* sem JavaScript a barra só tem o índice: não precisa ficar presa */
#textos, #fotos { scroll-margin-top: calc(var(--bio-topo) + var(--bio-barra)); }
.bio-v, .bio-f { scroll-margin-top: calc(var(--bio-topo) + var(--bio-barra) + var(--s-3)); }

/* `text-wrap: wrap` (não `normal`, que não é valor de text-wrap: o navegador o descartava e ficava o `pretty` de
   base.css): a etiqueta é <p> e, a 1100 px, item de grade; as miniaturas da folha de contato são <li> em grade.
   `pretty` em item de grade trava o WebKit (RODA 9). */
.bio-l__tag { margin: 0 0 var(--s-2); color: var(--brand); text-wrap: wrap; }
.bio-contato li { text-wrap: wrap; }
.bio-l + .bio-l { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--border); }
html[data-bio-lingua] .bio-l { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
html[data-bio-lingua] .bio-l__tag { display: none; }
html[data-bio-lingua="pt"] .bio-l[data-bio-l="pt"], html[data-bio-lingua="en"] .bio-l[data-bio-l="en"], html[data-bio-lingua="fr"] .bio-l[data-bio-l="fr"] { display: block; }

.bio-lista { border-top: var(--border-strong); }
.bio-v { display: grid; grid-template-columns: var(--col-numero) minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-6); border-bottom: var(--border); align-items: start; }
.bio-v__margem { position: sticky; top: calc(var(--bio-topo) + var(--bio-barra) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.bio-v__num { font-size: var(--t-2xl); line-height: 1; }
.bio-copiar[hidden], .bio-copiar__b[hidden], .bio-copiar__a[hidden] { display: none; }
.bio-copiar { min-height: var(--alvo-min); }
.bio-copiar--ok { border-color: var(--brand); color: var(--brand); }
.bio-v__corpo { min-width: 0; }
.bio-v__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.bio-v__rotulo { margin: 0; font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); max-width: none; }
.bio-v__n { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: var(--tr-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bio-v__uso { margin: var(--s-1) 0 0; font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.45; color: var(--fg-muted); max-width: 40em; }
.bio-v__texto { margin-top: var(--s-4); max-width: var(--measure-wide); }
.bio-v__texto p { margin: 0; font-size: var(--t-base); line-height: 1.6; color: var(--fg-body); max-width: none; }
.bio-v__texto p + p { margin-top: var(--s-3); }
/* De 1100 px para cima a ficha é de catálogo: numeral e botão na margem, o que é e para que serve à esquerda, o
   texto à direita, na largura toda. Abaixo disso, título sobre o texto. */
@media (min-width: 1100px) {
  .bio-v__corpo .bio-l { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-7); align-items: start; }
  .bio-v__corpo .bio-v__texto { max-width: var(--measure); }   /* ~75 caracteres por linha (a 40em davam 91) */
  .bio-v__corpo .bio-l__tag { grid-column: 1; }
  /* a ficha (título, contagem, uso) fica presa como a margem: num texto de 500 palavras, o nome da versão não some */
  .bio-v__corpo .bio-v__ficha { grid-column: 1; position: sticky; top: calc(var(--bio-topo) + var(--bio-barra) + var(--s-5)); }
  .bio-v__corpo .bio-v__cab { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .bio-v__corpo .bio-v__texto { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  html[data-bio-lingua="pt"] .bio-v__corpo .bio-l[data-bio-l="pt"], html[data-bio-lingua="en"] .bio-v__corpo .bio-l[data-bio-l="en"], html[data-bio-lingua="fr"] .bio-v__corpo .bio-l[data-bio-l="fr"] { display: grid; }
}

.bio-grupo { margin-top: var(--s-6); }
.bio-grupo:first-child { margin-top: 0; }
.bio-grupo .regua { margin-bottom: var(--s-4); }
/* Linhas alinhadas (crítica, ciclos 1 e 2; o defeito de GREC-0041): cada figura ocupa duas linhas da grade do grupo
   e herda essas linhas (subgrid). Na primeira, a moldura: igual em todo o grupo (3:4 nos retratos, 3:2 nos eventos),
   com a foto inteira dentro (contain, sem corte) e a sobra no fundo da moldura; o topo das prévias fica igual por
   linha e qualquer foto nova entra sem escada. Na segunda, legenda, ficha e botão começando juntos. Sem subgrid
   (navegador antigo), a figura fica com as próprias linhas; as molduras continuam iguais. */
.bio-grade { margin: 0; padding: 0; display: grid; gap: var(--s-6) var(--s-5); }
.bio-grade--retrato { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bio-grade--paisagem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bio-f { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s-3); min-width: 0; align-items: start; }
.bio-f__img { display: block; position: relative; width: 100%; aspect-ratio: 3 / 2; border: var(--border); background: var(--bg-soft); }
.bio-grade--retrato .bio-f__img { aspect-ratio: 3 / 4; }
.bio-f__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
/* a legenda estica na linha da grade e o botão vai ao pé da célula: legendas começam juntas e botões terminam juntos */
.bio-f__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: stretch; align-self: stretch; }
.bio-f__num { font-size: var(--t-lg); line-height: 1.25; }
.bio-f__txt { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.bio-f__txt .bio-l p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-body); max-width: 34em; }   /* ~75 caracteres: na foto em paisagem a coluna tem 600 px */
.bio-f__ficha, .bio-f__txt .bio-l p.bio-f__credito { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.6; font-variant-numeric: tabular-nums; max-width: none; }
.bio-f__txt .bio-l p.bio-f__credito { margin-top: var(--s-2); }
.bio-f__baixar { align-self: flex-start; margin-top: auto; padding-top: 0.62em; min-height: var(--alvo-min); }

@media (max-width: 1100px) { .bio-v__margem { top: calc(var(--bio-topo) + var(--bio-barra) + var(--s-4)); } }
@media (max-width: 900px) {
  .bio-contato { max-width: none; margin-top: var(--s-2); }
  .bio-grade--retrato { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-grade--paisagem { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* a ficha vira uma coluna: numeral e botão numa linha, acima do título, para o botão não ficar depois de
     430 palavras; a margem deixa de ser presa */
  .bio-v { grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-5); }
  .bio-v__margem { position: static; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .bio-v__num { font-size: var(--t-xl); }
}
@media (max-width: 560px) {
  /* no celular a barra também fica presa (trocar de língua estando nas fotos não pode exigir milhares de pixels de
     volta), mas numa linha só, de 44 px: as três línguas e o índice só com a palavra (os números saem) */
  .bio-barra__in { flex-wrap: nowrap; min-height: var(--alvo-min); gap: 0 var(--s-3); }
  .bio-sel { gap: var(--s-3); }
  .bio-sel button { font-size: var(--t-base); min-height: var(--alvo-min); }
  .bio-barra__indice { gap: var(--s-3); }
  .bio-barra__nn { display: none; }
  .bio-grade--retrato { grid-template-columns: 1fr; }
  .bio-f__cap { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  /* 375 e 360 px: as línguas apertam para o índice continuar na linha; a 320 px ele sai da barra (as miniaturas
     da abertura levam às fotos) */
  .bio-sel { gap: var(--s-2); }
  .bio-sel button { font-size: var(--t-sm); }
}
@media (max-width: 340px) { .bio-barra__indice { display: none; } }
@media print { .bio-barra, .bio-copiar, .bio-f__baixar, .bio-contato { display: none !important; } .bio-v, .bio-f { break-inside: avoid; } .bio-v__margem { position: static; } }

/* ------------------------------------------------------ ENTRADA POR INTENÇÃO (home, peça avulsa de 14/10/2026)
   Logo depois da abertura, a tira de chamadas sob o cabeçalho do jornal: a pergunta ("O que você procura?") na
   régua da casa, em display, e cinco caminhos em colunas separadas por fio vertical, na grade suíça da receita
   grade-css-moderna do atlas (subgrid: numeral, rótulo e linha alinham entre as colunas). O rótulo é o link e se
   estende pela célula inteira (::after sobre o li), então a célula toda é alvo; o link dentro da linha
   (publicações) fica por cima. Numerais por contador. Nada anima, nada nasce escondido; sem JavaScript é a mesma
   tira. Abaixo de 1100 px vira o quadro de orientação em linhas: numeral na margem, rótulo e linha lado a lado
   (tablet) ou um sob o outro (celular). `text-wrap: wrap` nos itens (não `normal`, que não é valor de text-wrap e
   o navegador descarta): são itens de grade e o `pretty` de base.css trava o WebKit (RODA 9). Foco de teclado: o
   contorno sai do texto do link e vai para a célula (o ::after), para quem navega por Tab ver o alvo inteiro. */
.procura { padding-block: var(--s-7); }
#procura { scroll-margin-top: calc(var(--topo-h, var(--altura-topo)) + var(--s-4)); }
.procura__regua { gap: var(--s-5); margin: 0; }
.procura__pergunta {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem);
  line-height: 1.1; letter-spacing: var(--tr-tight); text-transform: none; color: var(--fg);
}
.procura__caminhos {
  list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: caminho;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s-5);
}
.procura__caminho {
  position: relative; min-width: 0; grid-row: span 3;
  display: grid; grid-template-rows: subgrid; row-gap: var(--s-2); align-content: start; text-wrap: wrap;
}
.procura__caminho::before {
  counter-increment: caminho; content: counter(caminho, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); line-height: 1;
  color: var(--numeral); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums;
}
.procura__caminho + .procura__caminho { border-left: var(--border); padding-left: var(--s-5); }
.procura__rotulo {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, .85rem + .35vw, 1.125rem);
  line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg); text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.procura__rotulo::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-xs); }   /* a célula inteira é o alvo */
/* Ciclo 3 (leitura a frio): em repouso o rótulo já se lê como link, com o sublinhado do site (o mesmo das
   linhas); ao passar o mouse ou tocar, a célula inteira ganha um fio vermelho embaixo, para se ler como um
   alvo só, e o rótulo fica vermelho com o sublinhado mais grosso. */
.procura__rotulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.procura__caminho:hover .procura__rotulo, .procura__caminho:active .procura__rotulo, .procura__rotulo:focus-visible { color: var(--brand); text-decoration-thickness: 2px; }
.procura__caminho:hover .procura__rotulo::after, .procura__caminho:active .procura__rotulo::after { box-shadow: inset 0 -2px 0 var(--brand); }
.procura__rotulo:focus-visible { outline: none; }
.procura__rotulo:focus-visible::after { outline: 2px solid var(--focus); outline-offset: var(--s-2); }
.procura__linha { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-body); max-width: none; text-wrap: wrap; }
.procura__linha a { position: relative; z-index: 1; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.procura__linha a:hover, .procura__linha a:focus-visible { color: var(--brand); }
@media (max-width: 1100px) {
  .procura__caminhos { grid-template-columns: minmax(0, 1fr); border-top: var(--border-strong); }
  .procura__caminho {
    grid-row: auto; grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto;
    column-gap: var(--s-4); row-gap: var(--s-1); padding-block: var(--s-4); border-bottom: var(--border); align-items: baseline;
  }
  .procura__caminho::before { grid-column: 1; grid-row: 1; }
  .procura__rotulo { grid-column: 2; grid-row: 1; }
  .procura__linha { grid-column: 3; grid-row: 1; }
  .procura__caminho + .procura__caminho { border-left: 0; padding-left: 0; }
  /* em linhas, o contorno de foco fica entre os fios da linha e sai um pouco para os lados */
  .procura__rotulo::after { inset: 2px calc(-1 * var(--s-2)); }
  .procura__rotulo:focus-visible::after { outline-offset: 0; }
}
@media (max-width: 720px) {
  .procura { padding-block: var(--s-6); }
  .procura__caminho { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; }
  .procura__caminho::before { grid-row: 1 / span 2; padding-top: .2em; }
  /* no celular a linha sobe ao corpo do texto (16 px): é o que a pessoa lê para escolher, não legenda */
  .procura__linha { grid-column: 2; grid-row: 2; font-size: var(--t-base); }
}
@media (prefers-reduced-motion: reduce) { .procura__rotulo { transition: none; } }
/* No palco da abertura (≥ 761 px, com movimento, com animation-timeline) a faixa ocupa a última tela do palco; a
   partir de 901 px ela fica presa no pé da tela desde o primeiro quadro e se abre quando a tinta assenta. Essa
   parte mora em efeitos/abertura.css, junto do palco. */