/* ======================================================================
   Radar · a pedra
   Folha única do build autônomo (`radar.py --autonomo`), servido em
   reason.ia.br/radar/. Mesma língua visual do portal (mármore, tinta, ouro
   fosco, entalhe, EB Garamond): ver C:\Projetos\Portal\DESIGN.md, que é a
   norma. O Rosa de Saron continua na rosa.css, de pergaminho; as duas folhas
   não se tocam.

   O QUE ESTE ARQUIVO NÃO COPIA DO PORTAL, E POR QUÊ (leia antes de "corrigir"
   alguma divergência). O portal é uma estela: cinco linhas, uma tela, muito
   silêncio. O Radar é o oposto disso em tudo que não seja a pele — resumos de
   500 palavras, transcrições de 2.000, listas de 165 vídeos, busca. Escala e
   espaçamento de estela, aqui, viram desperdício e cansaço. Então:

     adotado    paleta, entalhe, filete, ausência de canto/sombra/gradiente,
                sobriedade, EB Garamond nas inscrições, grão de pedra
     divergido  a escala tipográfica (§3), o espaçamento (§5), e a face do
                corpo do texto (§0, com medida)

   Toda divergência está declarada no ponto onde ela acontece, com o motivo.
   A regra de desempate é uma: em texto corrido, LEGIBILIDADE GANHA.
   ====================================================================== */


/* --------------------------------------------------------- 0. famílias */
/* PAINEL DE TROCA DE FONTE. Nenhum outro ponto do arquivo cita nome de face.

   DIVERGÊNCIA DA CARTA §4 ("uma família só, EB Garamond"), medida antes de
   ser decidida. Espécime renderizado no Chrome, canvas, 12/08/2026:

     x-height por 100px de corpo ........ EB Garamond 41,0 · Cardo 44,0 (+7,3%)
     altura de maiúscula ................ EB Garamond 66,0 · Cardo 69,0
     largura do mesmo parágrafo @100px .. EB Garamond 23750 · Cardo 26539
     tinta no bloco @18px ............... EB Garamond 4,20% · Cardo 4,92% (+17%)
     tinta no bloco @16px ............... EB Garamond 3,33% · Cardo 3,87% (+16%)

   Ou seja: para chegar à mesma altura de x, a EB Garamond precisa de ~7% mais
   corpo, e mesmo aí deita menos tinta. Numa página de cinco linhas isso é
   elegância; num acervo em que se lê transcrição inteira, é texto lavado. A
   Cardo é face de classicista (Bembo de origem), já estava no projeto, tem
   latim e grego no mesmo desenho, e aguenta a maratona.

   Os PAPÉIS são fixos e não se cruzam — é isso que impede que duas garaldas
   parecidas pareçam um acidente em vez de uma decisão:

     EB Garamond   a INSCRIÇÃO: marca, navegação, títulos, rótulos em
                   caixa-alta, números, selos, botões. Tudo que é epígrafe.
     Cardo         o TEXTO: parágrafos, listas, tabelas, citações, meta,
                   transcrições. Tudo que se lê por minutos seguidos.

   Se um dia a família virar uma só, será a Cardo subindo para os títulos, não
   a EB Garamond descendo para o corpo.

   O que existe em assets/fontes-pedra/ (ver tools/rosa/baixar_fontes_pedra.py):
     EB Garamond 400/500 + itálico 400 · latin, latin-ext, greek, greek-ext
     Cardo       400/700 + itálico 400 · latin, latin-ext, greek, greek-ext  */
:root {
  --f-inscricao: "EB Garamond", Georgia, "Times New Roman", serif;
  --f-texto:     "Cardo", Georgia, "Times New Roman", serif;

  /* ---------------------------------------------- painel da marca ----
     Os parafusos da inscrição num lugar só, como no portal. A cor NÃO é a
     cor do texto: numa inscrição real a letra vale quase o mesmo que a
     pedra e quem lê é a sombra do sulco. Piso de 3:1 contra o fundo
     composto (texto grande, WCAG 1.4.3): #857c68 dá 3,44:1.
     Aqui a tinta fraca vale só para a palavra grande do topo (§6). Na
     barra do app, a 15px, ela reprovaria: lá a marca é --tinta. */
  --marca-esp:   .2em;
  --marca-cor:   #857c68;
  --marca-luz:   rgba(255, 255, 255, .78);
  --marca-sulco: rgba(28, 24, 16, .16);

  /* espacejamento das capitais miúdas: capital sem espaço é capital malfeita */
  --esp-rotulo:  .16em;
  --esp-nome:    .13em;
}


/* ------------------------------------------------------------ 1. tokens */
/* Mármore pentélico, tinta, ouro fosco e um único azul egeu. Os valores vêm
   do portal (DESIGN.md §3) e foram mantidos, inclusive a correção do grão:
   o token --pedra entra CLARO o bastante para que o pixel COMPOSTO (a pedra
   depois da camada de grão, §3) caia no valor da carta. Todo contraste citado
   em comentário aqui é medido contra o composto, nunca contra o token.

   Onde usar cada um, porque isto é o que decide acessibilidade. Medido no
   composto #eeebe2 (claro) e #191814 (escuro), com a fórmula da WCAG 2.x; o
   segundo número é o mesmo texto sobre a FAIXA de hover (--pedra-2), que é
   onde os miúdos correm risco, porque a faixa come cerca de 10% da razão:

     --tinta        13,65 / 12,21   qualquer texto
     --tinta-fraca   5,48 /  4,90   rótulos, meta, selo — passa AA nos dois
     --egeu          7,72 /  6,91   links no texto corrido
     --marca-cor     3,47 /  3,10   SÓ texto grande (>= 24px)
     --ouro          3,62 /  3,23   SÓ filete, borda e texto grande
     --sinal         4,19 /  3,75   SÓ sinal gráfico (o quadradinho de área)

   No escuro todos sobem, e o ouro em especial vai a 7,89 — mesmo assim ele
   não é promovido a cor de texto, para as duas peles terem a mesma regra.

   ---- COR COM FUNÇÃO (contrato de 12/08/2026) ---------------------------
   A folha nasceu quase monocromática e o dono reclamou, com razão, de que
   ouro, egeu e cinzas estavam DECORATIVOS: apareciam, mas não significavam
   nada estável, então o olho não aprendia a usá-los. A resposta não foi
   colorir mais; foi dar a cada tinta que já existia UM significado só, e
   repeti-lo em todas as páginas:

     --egeu         PROCEDÊNCIA. Quem falou. O nome do canal na lista, no
                    cabeçalho do documento, no cartão de canal; e os links
                    do texto corrido, que são a mesma pergunta ("de onde
                    vem isto?"). Nunca decora outra coisa.
     --ouro         PROFUNDIDADE e LUGAR. O veredito "vale aprofundar" (o
                    fio da linha e o do selo) e o estado atual da navegação
                    (aba ligada, foco, alvo da âncora). É a única tinta que
                    o olho deve procurar quando a pergunta é "abro ou não?".
     --tinta-fraca  TEMPO e QUANTIDADE. Data, duração, contagem, rótulo.
                    Tudo que orienta e nada que decide.
     --sinal e
     --linha-forte  ÁREA TEMÁTICA, e SÓ onde o nome da área está escrito ao
                    lado (o quadradinho do filtro, o topo do cartão de
                    canal, o quadrado antes do nome do canal). Cor de área
                    solta, longe do rótulo, não se aprende: era o que
                    acontecia com o fio de 2px do lado esquerdo da linha,
                    que dizia "política" a 176px do lugar onde a palavra
                    "política" aparecia. Esse fio agora carrega o veredito,
                    que é o dado pelo qual o leitor decide.

   Consequência assumida: as cinco áreas continuam mapeadas em quatro
   tokens (CATEGORIAS_PEDRA no radar.py), o que só é honesto porque a área
   nunca aparece sozinha em cor — sempre com o nome ao lado. */
:root {
  --pedra:        #f6f3ea;   /* entra aqui; compõe #eeebe2 com o grão */
  /* o COMPOSTO, medido em captura (média 5x5 fora da vinheta): é o que serve
     a qualquer superfície opaca de largura inteira, como a barra do app. Usar
     --pedra ali deixaria a barra 8 níveis mais clara do que a página, e o
     olho lê isso como uma faixa de outra cor. */
  --pedra-lisa:   #eeebe2;
  --pedra-2:      #e3dfd3;   /* faixa de hover: 1,108:1 sobre o composto */
  --pedra-3:      #d6d0c0;   /* sulco: fundo de campo escavado */
  --linha:        #cdc6b4;   /* filete gravado */
  --linha-forte:  #bcb49e;

  --tinta:        #22201b;
  --tinta-fraca:  #635d51;

  --ouro:         #927639;
  --ouro-claro:   #c0a163;
  --egeu:         #2f4a63;
  --sinal:        #5e7282;

  /* luz e sombra do entalhe. Valores propositalmente baixos: se der para ver
     conscientemente, está forte demais (carta §5). */
  --luz:          rgba(255, 255, 255, .60);
  --sulco:        rgba(28, 24, 16, .10);
  --luz-letra:    rgba(255, 255, 255, .45);
  --sulco-letra:  rgba(28, 24, 16, .055);
  --luz-filete:   rgba(255, 255, 255, .55);

  /* a única vinheta permitida: a luz que cai na pedra, vinda de cima. Aqui
     ela é FIXA na tela e não no documento (§3), senão numa transcrição de
     seis mil pixels de altura ela viraria um degradê de página inteira, que
     é exatamente o que a carta §2 proíbe. */
  --vinheta:      rgba(255, 255, 255, .38);

  --grao-mistura: multiply;
  --grao-op:      .25;

  /* ---- escala tipográfica ----------------------------------------------
     DIVERGÊNCIA DA CARTA §4 ("no máximo 4 tamanhos na página inteira").
     Quatro tamanhos bastam para cinco nomes numa laje; não bastam para um
     jornal com manchete, linha fina, rubrica de seção, corpo, lista, meta,
     rótulo e transcrição. São NOVE, e eles formam uma escala fechada —
     nenhum tamanho solto no resto do arquivo, que é o que a regra realmente
     protege (hierarquia por sistema, não por improviso).

     O corpo é 18px de Cardo, e não os 16px do portal: pela medida da §0, a
     Cardo a 18px tem a mesma mancha que a EB Garamond a 19,3px, e abaixo
     disso a leitura longa em tela começa a cobrar.

     POR QUE DOIS TAMANHOS NOVOS (12/08/2026, com medida). A escala anterior
     tinha um buraco no lugar mais importante: a MANCHETE da lista usava o
     --t-sub (1.1rem = 17,6px), que é MENOR que o corpo, e o resumo debaixo
     dela usava o --t-meta (14px). Em altura de x (o que o olho mede, §0:
     EB Garamond 0,41 · Cardo 0,44), isso dava:

       manchete  17,6 x 0,41 = 7,22px      resumo  14 x 0,44 = 6,16px
       salto manchete → resumo ............................. 17%
       rubrica da semana (21,1 x 0,41 = 8,66) sobre manchete +20%

     Ou seja: o resumo quase empatava com a manchete, e o rótulo da semana
     era a maior letra da página depois do topo — o rótulo gritava mais alto
     que a notícia. Os dois tamanhos novos desfazem isso:

       --t-manchete 22px EBG ..... x = 9,02px
       --t-resumo   15px Cardo ... x = 6,60px    salto ............ 37%
       rubrica da semana agora é caixa-alta de 15,2px (x = 6,2) ... -31%

     37% é o degrau em que a manchete vira manchete sem precisar de negrito
     (a carta §4 proíbe peso pesado) nem de outra família.

     Os títulos DENTRO da prosa tinham o mesmo defeito, e pela mesma causa:
     h2 estava em 1,32rem (x = 8,66) e h3 em 1,1rem (x = 7,22) contra um
     corpo de 18px de Cardo (x = 7,92) — o h3 era MENOR que o parágrafo que
     ele encabeçava. Subiram para 1,5rem (x = 9,84, +24% sobre o corpo) e
     1,25rem (x = 8,20, +4% mais a caixa e o espaço em branco). */
  --t-monumento: clamp(2.2rem, 1.5rem + 2.6vw, 3rem);  /* a palavra do topo */
  --t-titulo:    clamp(1.5rem, 1.15rem + 1.5vw, 2rem); /* h1 de documento */
  --t-manchete:  1.375rem;  /* 22px: o título do vídeo na lista */
  --t-secao:     1.5rem;    /* h2 dentro da prosa */
  --t-sub:       1.25rem;   /* h3, título de cartão */
  --t-corpo:     1.125rem;  /* 18px: parágrafo, lista, transcrição */
  --t-resumo:    .9375rem;  /* 15px: a linha fina sob a manchete */
  --t-meta:      .875rem;   /* meta, nota, veredito */
  --t-rotulo:    .72rem;    /* caixa-alta miúda: kicker, nav, selo, rótulo */

  /* larguras: a coluna de leitura fecha em ~68 caracteres de Cardo a 18px,
     que é a medida clássica, e NÃO cresce no monitor grande (medida larga é
     medida ruim). Quem cresce é a página em volta dela: ver §15, o desktop.
       --col-larga    a folha do índice: lista + faixa lateral
       --col-doc      o documento: faixa de referência + coluna de leitura
       --col-leitura  a medida do texto, intocável */
  --col-larga:   74rem;
  /* a folha do documento tem de caber a faixa (15) + o vão (3,25) + a
     coluna (38) + as duas margens do .container (2+2): 60,25rem é o piso,
     e 61 dá o fio de folga */
  --col-doc:     61rem;
  --col-leitura: 38rem;
  --col-rail:    15rem;     /* a faixa lateral, nas duas famílias de página */

  color-scheme: light;
}


/* --------------------------------------------------- 2. a pedra à noite */
/* Não é um "dark theme": é a mesma laje sob luz baixa. O fundo continua
   quente, o ouro brilha mais, o egeu dessatura em vez de estourar.

   POR QUE NÃO HÁ @media (prefers-color-scheme) AQUI. O tema é atributo no
   <html>, posto antes da pintura pelo script inline do <head> e alternado
   pela rosa.js — que REMOVE o atributo no tema claro. Uma media query de
   sistema brigaria com isso: quem estivesse no escuro do sistema e pedisse
   claro no botão veria a página voltar sozinha para o escuro. A carta §7
   aponta justamente este mecanismo (site/index.html do Teologia) como o
   modelo a seguir, então respeitar o sistema é trabalho do script, não do
   CSS. Consequência assumida: com JS desligado, a página é sempre clara. */
html[data-tema="escuro"] {
  --pedra:        #141310;   /* entra aqui; compõe #191814 com o grão */
  --pedra-lisa:   #191814;   /* o composto medido, para a barra do app */
  --pedra-2:      #24211b;
  --pedra-3:      #2c2820;
  --linha:        #39342a;
  --linha-forte:  #4a4335;

  --tinta:        #e6e0d0;   /* 13,5:1 */
  --tinta-fraca:  #a29a87;   /* 6,4:1 */

  --ouro:         #c9a961;   /* 7,9:1 — no escuro ele passa até em corpo miúdo */
  --ouro-claro:   #e0c68d;
  --egeu:         #8ba3b8;   /* 7,0:1 */
  --sinal:        #748797;

  /* a marca no escuro não repete o hexadecimal do claro: letra clara sobre
     pedra escura é outra relação perceptual. O que se copia é a RAZÃO de
     contraste (3,42:1 aqui contra 3,44:1 no claro). O sulco inverte de
     sinal: sobre pedra quase preta, quem cava é a luz. */
  --marca-cor:    #746c5b;
  --marca-luz:    rgba(255, 250, 235, .16);
  --marca-sulco:  rgba(0, 0, 0, .55);

  --luz:          rgba(255, 250, 235, .055);
  --sulco:        rgba(0, 0, 0, .50);
  --luz-letra:    rgba(255, 250, 235, .045);
  --sulco-letra:  rgba(0, 0, 0, .45);
  --luz-filete:   rgba(255, 250, 235, .035);

  --vinheta:      rgba(255, 244, 222, .05);

  /* multiply sobre pedra quase preta só empasta; soft-light devolve as duas
     faces do grão. Divergência da carta §5, herdada do portal, com a mesma
     medida: em L* do CIELAB o desvio é 0,87 no escuro contra 1,04 no claro,
     ou seja o escuro é um pouco MENOS texturado, não mais. */
  --grao-mistura: soft-light;
  --grao-op:      .5;

  color-scheme: dark;
}


/* -------------------------------------------------------------- 3. base */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* o fundo fica no <html>: se ficasse só no <body>, seria propagado para o
     canvas e a camada de grão não teria o que misturar */
  background: var(--pedra);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* grão da pedra e vinheta: duas camadas fixas na tela, atrás do conteúdo.
   Fixas (e não no documento) porque a página rola muito: no documento, a
   vinheta viraria um degradê de metros de altura e o grão andaria junto com
   o texto, o que dá aquele efeito de "papel de parede" que denuncia o truque.
   z-index 0 com o conteúdo em 1: o grão fica ATRÁS das letras, nunca por
   cima. Consequência a lembrar: tudo que a página pinta (faixa de hover,
   campos) sai liso sobre a pedra texturada — por isso os contrastes são
   medidos contra o composto. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grao-op);
  mix-blend-mode: var(--grao-mistura);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(120% 60% at 50% -6%, var(--vinheta), transparent 62%);
}

/* o conteúdo mora acima das duas camadas */
.appbar, main, .doc, .rodape-site { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
::selection { background: var(--egeu); color: var(--pedra); }
html[data-tema="escuro"] ::selection { color: #12110e; }

.container {
  width: 100%;
  max-width: var(--col-larga);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.container.leitura { max-width: var(--col-leitura); }

/* a "grade" do Rosa é de cartões; aqui a lista de vídeos é uma coluna só */
.grade { display: grid; gap: 0; }
.grade.uma-coluna { grid-template-columns: 1fr; }


/* ----------------------------------------------------------- 4. entalhe */
/* A letra não é escura sobre clara: é cavada. Duas sombras de 1px, uma clara
   embaixo (a luz que entra no sulco) e uma escura em cima.

   SÓ NAS LETRAS GRANDES. A carta §5 é explícita: em corpo miúdo o entalhe
   vira sujeira. O piso adotado aqui é 24px — abaixo disso, nada de sombra.
   Isso deixa de fora, de propósito: corpo, listas, transcrição, meta,
   rótulos, selos, h3 e os links do texto.

   Direção vertical (e não a diagonal da carta): o deslocamento horizontal
   de 1px cai em cima da haste da letra e sai como fio duplo; na vertical,
   cai na serifa e some. Quem quiser a diagonal troca --entalhe-x. */
:root { --entalhe-x: 0px; }

.gravado,
.hero h1,
.doc-cabeca h1,
.estatisticas .num,
.prosa h2 {
  text-shadow: var(--entalhe-x) 1px 0 var(--luz-letra),
               calc(-1 * var(--entalhe-x)) -1px 0 var(--sulco-letra);
}

/* O FILETE, que é o outro entalhe e o único "relevo" desta folha: uma linha
   de --linha com 1px de --luz-filete logo abaixo dela. Não é sombra de
   elevação; é a segunda parede do sulco. Ele não vira uma classe utilitária
   porque quem o desenha é sempre a borda de um elemento que já existe (a
   barra, o filete das seções, a linha da lista, o cabeçalho da tabela), e
   uma classe a mais no HTML seria marcação decorativa. O par a repetir é:
       border-bottom: 1px solid var(--linha);
       box-shadow:    0 1px 0 var(--luz-filete);
   e, quando a linha é interna (topo de um bloco), o mesmo com `inset`. */


/* ------------------------------------------------------- 5. barra do app */
/* A barra é uma faixa gravada no alto da laje: filete embaixo, nada mais.
   Sem sombra, sem blur de vidro (a carta §2 proíbe backdrop-filter), sem
   canto. Ela é opaca de propósito: com o grão por baixo, translucidez
   deixaria o texto da página aparecer sujo através da faixa. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pedra-lisa);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
}
.appbar .in {
  max-width: var(--col-larga);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.2rem);
  height: 52px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  font-family: var(--f-inscricao);
  font-size: .95rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-right: var(--esp-rotulo);   /* compensa o vão da última letra */
  color: var(--tinta);
}
.marca svg { width: 21px; height: 21px; flex: none; color: var(--ouro); }
.marca:hover { color: var(--ouro); }
@media (max-width: 760px) { .marca-txt { display: none; } }

.appbar nav {
  display: flex;
  gap: clamp(.3rem, 1.4vw, .9rem);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.appbar nav::-webkit-scrollbar { display: none; }
.appbar nav a {
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding: .55rem .45rem calc(.55rem - 1px);
  color: var(--tinta-fraca);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.appbar nav a:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); }
/* o estado ativo é o sulco de ouro, como no portal: sem negrito, sem pílula */
.appbar nav a.on { color: var(--tinta); border-bottom-color: var(--ouro); }

.nav-ferramentas { flex: none; display: flex; align-items: center; gap: .35rem; }
.ao-portal {
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding: .4rem .5rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
  transition: color 120ms ease;
}
.ao-portal::before { content: "\2190"; margin-right: .45em; }   /* ← */
.ao-portal:hover { color: var(--tinta); }
@media (max-width: 560px) { .ao-portal { display: none; } }

.btn-busca, .btn-tema {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--tinta-fraca);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color 120ms ease;
}
.btn-busca:hover, .btn-tema:hover { color: var(--tinta); }
.btn-busca.on { color: var(--ouro); }
.btn-busca svg, .btn-tema svg { width: 16px; height: 16px; }
html:not([data-tema="escuro"]) .so-escuro { display: none; }
html[data-tema="escuro"] .so-claro { display: none; }

/* a seta que a rosa.js mostra quando a navegação transborda */
.nav-seta {
  flex: none;
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tinta-fraca);
  font-family: var(--f-inscricao);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .2rem;
}
.nav-seta.mostra { display: block; }


/* ------------------------------------------- 6. cabeçalho das páginas */
/* Duas aberturas diferentes, e a diferença é de gênero: o índice abre por
   uma INSCRIÇÃO (uma palavra em capital espacejada, cor quase de pedra), a
   página de documento abre por um TÍTULO (frase longa, caixa mista, tinta
   cheia, porque ali o que importa é ler). */
.hero {
  padding: clamp(2.2rem, 6vh, 3.4rem) 0 clamp(1.2rem, 3vh, 1.8rem);
}
.hero .lema, .kicker {
  margin: 0 0 .9rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-right: var(--esp-rotulo);
  color: var(--tinta-fraca);
}
.hero h1 {
  margin: 0 0 .7rem;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: var(--t-monumento);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: var(--marca-esp);
  padding-left: var(--marca-esp);   /* centra a mancha: o vão sobra à direita */
  color: var(--marca-cor);
  text-shadow: var(--entalhe-x) 1px 0 var(--marca-luz),
               calc(-1 * var(--entalhe-x)) -1px 0 var(--marca-sulco);
}
.hero .sub {
  margin: 0 0 1.4rem;
  max-width: 56ch;
  color: var(--tinta-fraca);
  font-size: 1rem;
}

/* O CABEÇALHO DO ÍNDICE é um MASTHEAD de jornal, e não mais um "hero" de
   página: a palavra grande, a linha de chamada e os números correm de ponta
   a ponta da folha, e um filete grosso fecha a faixa. É o que separa "a
   cabeceira do periódico" de "o conteúdo do dia" — sem isso, com a faixa
   lateral ao lado, o topo e a lista viravam uma coisa só. */
.masthead {
  padding-bottom: clamp(1rem, 2.4vh, 1.5rem);
  border-bottom: 2px solid var(--linha-forte);
  box-shadow: 0 2px 0 var(--luz-filete);
  margin-bottom: 1.8rem;
}
.masthead .sub { margin-bottom: 1.2rem; }
@media (min-width: 62rem) {
  /* no monitor a chamada sobe para o lado da palavra grande: o masthead
     ganha duas colunas e deixa de ser uma pilha alta de coisa nenhuma */
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: end;
    gap: 0 3rem;
    padding-top: clamp(1.8rem, 4vh, 2.6rem);
  }
  .masthead .lema { grid-column: 1; margin-bottom: .5rem; }
  .masthead h1 { grid-column: 1; margin-bottom: 0; }
  .masthead .sub {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin: 0 0 .35rem;
    max-width: 46ch;
  }
  .masthead .estatisticas { grid-column: 1 / -1; margin-top: 1.4rem; }
  .masthead .links-secao { grid-column: 1 / -1; }
}
.hero .nota, .secao > .nota, .nota {
  color: var(--tinta-fraca);
  font-size: var(--t-meta);
}

/* números do alto: a única exibição de dado da casa. Filete em cima, como
   uma linha de subscrição. */
.estatisticas {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2.6rem;
  padding: 1rem 0 .2rem;
  border-top: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--luz-filete);
}
.estatisticas .num {
  display: block;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--tinta);
}
.estatisticas .rot {
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
}
@media (max-width: 560px) {
  .estatisticas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
}

/* cabeçalho de documento (vídeo, canal, transcrição). O h1 mora na coluna de
   leitura; a meta e as abas moram na faixa lateral (§15). */
.doc-cabeca { padding: clamp(1.6rem, 4vh, 2.4rem) 0 0; }
.doc-cabeca h1 {
  margin: 0 0 .6rem;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: var(--t-titulo);
  line-height: 1.18;
  letter-spacing: .005em;
  color: var(--tinta);
  text-wrap: balance;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .5rem;
  font-size: var(--t-meta);
  color: var(--tinta-fraca);
}
/* PROCEDÊNCIA em egeu (§1): o canal é a resposta a "quem falou", e ela tem
   a mesma tinta aqui, na lista e no cartão. Data e duração ficam fracas. */
.doc-meta .canal {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--egeu);
}
.doc-meta a.canal:hover { color: var(--ouro); }

/* o quadradinho de área temática. Quadrado, não bolinha: a pedra não tem
   canto redondo, e a cor vem da própria paleta (ver CATEGORIAS_PEDRA no
   radar.py) — nunca de um matiz novo. Ele só aparece colado ao nome da
   área ou ao nome do canal, nunca solto (contrato de cor, §1). */
.ponto {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  margin-right: .1rem;
  vertical-align: baseline;
}

/* abas do documento (Resumo · Análise · Transcrição · fonte): guias
   gravadas, separadas por filete, sem pílula e sem caixa */
.abas-doc {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  margin: 1.3rem 0 0;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
}
.abas-doc a {
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding: .5rem .1rem;
  margin-bottom: -1px;
  color: var(--tinta-fraca);
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.abas-doc a:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); }
.abas-doc a.on { color: var(--tinta); border-bottom-color: var(--ouro); }

/* linha de atalhos de seção (os canais, todos os vídeos). São vinte e seis
   nomes no índice: em caixa, viravam vinte e seis botões e engoliam a
   página. Aqui eles são uma LISTA INSCRITA que corre, separada por filete
   vertical de 1px — o mesmo gesto do rodapé de uma inscrição com a lista
   dos nomes. Só o hover ganha o sulco de ouro. */
.links-secao {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 0;
  margin: 1.1rem 0 0;
}
.links-secao a {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  padding: .2rem .6rem;
  color: var(--tinta-fraca);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.links-secao a:last-child { border-right: 0; }
.links-secao a:hover { color: var(--tinta); border-bottom-color: var(--ouro); }
/* a contagem é QUANTIDADE (§1): não compete com o nome. Fica em
   --tinta-fraca e não em --linha-forte, que ficaria bonito e reprovaria:
   #bcb49e sobre a pedra dá 1,9:1, e isto é texto, não ornamento. */
.links-secao .qt { color: var(--tinta-fraca); letter-spacing: 0; }


/* --------------------------------------------------------- 7. filtros */
/* Botões de filtro: retângulos gravados. O estado ativo é o sulco (fundo
   escavado + borda de ouro), não uma pílula chapada de cor. */
.filtros { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 1.2rem 0 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  padding: .35rem .7rem;
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 0;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.chip:hover { color: var(--tinta); border-color: var(--linha-forte); }
.chip.ativa {
  color: var(--tinta);
  background: var(--pedra-3);
  border-color: var(--ouro);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}
.chip .qt { color: var(--tinta-fraca); letter-spacing: 0; }
.chip.ativa .qt { color: var(--tinta); }


/* ------------------------------------------------- 8. a lista de vídeos */
/* O digest é uma LISTA INSCRITA, não uma grade de cartões (carta §6): uma
   linha por vídeo, separadas por filete, e o hover aprofunda o sulco em vez
   de levantar o cartão. Nada se desloca no hover.

   A LINHA É UMA NOTÍCIA, e por isso segue a ordem de um jornal:

     [ quando ]   CANAL (procedência, em egeu)              [ veredito ]
                  A manchete, 22px, tinta cheia
                  a linha fina, 15px, tinta fraca, duas linhas

   Quatro degraus, e cada um usa um recurso diferente para não depender só
   de tamanho: a manchete tem escala (37% de altura de x sobre a linha
   fina, §1) e tinta cheia; a procedência tem CAIXA-ALTA e cor; o tempo tem
   caixa-alta e tinta fraca; o veredito tem o fio de ouro. */
.secao { margin: 2.2rem 0 0; }

/* RUBRICA DE SEÇÃO ("Esta semana", "Filosofia & teologia"). Ela ENCOLHEU:
   era 21px de caixa mista, ou seja 20% MAIOR (em altura de x) que a
   manchete que ela apresenta — o rótulo gritava mais que a notícia. Agora
   é uma caixa-alta espacejada de 15px sobre um filete de largura inteira:
   continua o marco mais forte da vertical (porque é a única linha
   horizontal grossa da página), sem competir por tamanho de letra. */
.cap-cabeca {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  /* o espaço acima é da .secao (ou do bloco que a abriga); aqui só o de
     baixo, senão as duas margens somam e a rubrica descola do que anuncia */
  margin: 0 0 .3rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--linha-forte);
  box-shadow: 0 1px 0 var(--luz-filete);
}
.cap-cabeca h2 {
  margin: 0;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-right: var(--esp-rotulo);
  color: var(--tinta);
}
.cap-cabeca .qt {
  margin-left: auto;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
}

.vrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "quando" "onde" "tt" "tese" "selo";
  gap: .1rem 1.4rem;
  align-items: start;
  padding: .85rem .8rem .95rem;
  /* o fio do VEREDITO, à esquerda da linha (contrato de cor, §1). Era o fio
     da área temática, que ninguém conseguia ler: a cor ficava a 176px da
     palavra que a explicava. Aqui ele responde à única pergunta que a lista
     existe para responder — abro ou não abro. */
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease;
}
.vrow[data-caps="sim"] { border-left-color: var(--ouro); }
.vrow:hover, .vrow:focus-visible {
  background-color: var(--pedra-2);
  border-bottom-color: var(--ouro);
  box-shadow: 0 1px 0 var(--ouro-claro);
}

.vrow .quando {
  grid-area: quando;
  display: flex;
  gap: .55rem;                 /* na tela estreita a data e a duração correm
                                  lado a lado; no monitor a coluna as empilha */
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.vrow .quando b { font-weight: 400; }
.vrow .quando i { font-style: normal; }
.vrow .onde {
  grid-area: onde;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--egeu);          /* PROCEDÊNCIA (§1) */
}
.vrow .ponto { background: var(--cor-item, var(--linha-forte)); }
.vrow .tt {
  grid-area: tt;
  margin-top: .12rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-manchete);
  line-height: 1.22;
  color: var(--tinta);
  text-wrap: pretty;
}
.vrow .tese {
  grid-area: tese;
  margin-top: .2rem;
  font-size: var(--t-resumo);
  line-height: 1.5;
  color: var(--tinta-fraca);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vrow .selo { grid-area: selo; justify-self: start; margin-top: .35rem; }
.vrow:hover .tt { color: var(--tinta); }

/* a partir de ~740px cabem as três colunas: o tempo à esquerda (uma régua
   cronológica que se lê de cima a baixo), a notícia no meio, o veredito à
   direita, todos os fios do veredito alinhados no mesmo x */
@media (min-width: 46rem) {
  .vrow {
    /* 9,75rem na terceira coluna é a medida de "APROFUNDAR: TALVEZ" em
       caixa-alta de 11,5px com o fio e o vão: menos que isso e o selo
       vazava para fora da folha */
    grid-template-columns: 5.5rem minmax(0, 1fr) 9.75rem;
    grid-template-areas:
      "quando onde selo"
      "quando tt   selo"
      "quando tese selo";
    padding: .9rem .9rem 1rem;
  }
  .vrow .quando { flex-direction: column; gap: 0; line-height: 1.5; }
  .vrow .selo { margin-top: 0; }
}

/* selo de veredito: capital miúda com um fio à esquerda. A LETRA é sempre
   --tinta-fraca (5,4:1) e nunca o ouro (3,6:1, que reprova em corpo miúdo):
   quem carrega a cor é o fio de 2px, onde 3:1 basta (WCAG 1.4.11).

   Os três graus não têm o mesmo peso de propósito, porque não têm o mesmo
   valor para quem decide: "sim" é o único que precisa ser achado de longe
   (fio de ouro + tinta cheia), "talvez" é morno, "não" é quase o silêncio.
   O texto continua explícito nos três — quem quiser saber, lê. */
.selo {
  display: inline-block;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  white-space: nowrap;
  padding: 0 0 0 .5em;
  border-left: 2px solid var(--linha);
  color: var(--tinta-fraca);
}
.selo.forte { border-left-color: var(--ouro); color: var(--tinta); }
.selo.enf   { border-left-color: var(--linha-forte); }
.selo.crit  { border-left-color: var(--linha); }

/* cartão de canal (o índice de canais). Continua sendo um retângulo, mas
   gravado: filete de 1px, sem canto, sem sombra, e o topo marcado pela cor
   da área. O hover escava. */
.grade:not(.uma-coluna) {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .9rem;
}
/* cada cartão fecha a sua própria moldura. A alternativa (grade com fundo de
   filete e gap de 1px, que dá a grelha contínua de uma tabela gravada) foi
   testada e descartada: quando a última fileira fica incompleta, a célula
   vazia aparece como um bloco chapado de cor de filete. */
.cartao {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1.05rem 1rem;
  background: transparent;
  color: inherit;
  border: 1px solid var(--linha);
  border-top: 2px solid var(--cor-pregador, var(--linha-forte));
  transition: background-color 120ms ease, border-color 120ms ease;
}
.cartao:hover {
  background: var(--pedra-2);
  border-color: var(--linha-forte);
  border-top-color: var(--cor-pregador, var(--linha-forte));
}
.cartao .alto {
  display: flex;
  gap: .8rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
}
.cartao .alto span:last-child { margin-left: auto; }
.cartao h3 {
  margin: 0;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--tinta);
}
.cartao .quem, .cartao .veredito {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--tinta-fraca);
}
.cartao .quem { display: flex; align-items: center; gap: .4rem; }


/* --------------------------------------------------------- 9. leitura */
/* Aqui mora a divergência maior da carta, e ela é deliberada: esta parte da
   página NÃO é uma estela. É texto para dez minutos de leitura. Por isso o
   corpo é Cardo a 18px, a entrelinha é 1,68, a coluna fecha em ~68
   caracteres e o entalhe não desce até aqui. */
.prosa { padding: 1.6rem 0 3rem; }
.prosa p, .prosa li { font-size: var(--t-corpo); line-height: 1.68; }
.prosa p { margin: 0 0 1rem; }
.prosa ul, .prosa ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.prosa li { margin: 0 0 .55rem; }
.prosa li::marker { color: var(--tinta-fraca); }
.prosa strong { font-weight: 700; }
.prosa em { font-style: italic; }

.prosa h2 {
  margin: 2.4rem 0 .7rem;
  padding-top: .9rem;
  font-family: var(--f-inscricao);
  font-weight: 500;
  font-size: var(--t-secao);
  line-height: 1.22;
  letter-spacing: .01em;
  color: var(--tinta);
  border-top: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--luz-filete);
}
/* título que é link (o vídeo, na página do canal): sem filete embaixo. Em
   corpo de título o sublinhado vira uma segunda linha de base e briga com a
   serifa; o sinal de link fica para o hover. */
.prosa h2 a, .prosa h3 a {
  color: inherit;
  border-bottom: 1px solid transparent;
}
.prosa h2 a:hover, .prosa h3 a:hover { border-bottom-color: var(--ouro); }
.prosa h3 {
  margin: 1.8rem 0 .5rem;
  font-family: var(--f-inscricao);
  font-weight: 500;
  font-size: var(--t-sub);
  line-height: 1.3;
  color: var(--tinta);
}
.prosa hr {
  border: 0;
  border-top: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  margin: 2.2rem 0;
}
.prosa blockquote {
  margin: 0 0 1.1rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 2px solid var(--linha-forte);
  color: var(--tinta-fraca);
}
.prosa table {
  border-collapse: collapse;
  width: 100%;
  margin: .4rem 0 1.4rem;
  font-size: var(--t-meta);
}
.prosa th, .prosa td {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.prosa th {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
}
.prosa code {
  font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: .8em;
  background: var(--pedra-3);
  padding: .05em .35em;
}
/* grego: a Cardo já é a face de corpo e tem grego no mesmo desenho, então o
   trecho grego não troca de face — só ganha um fio de espaço */
.gr { letter-spacing: .01em; }

/* links do texto: azul egeu (7,7:1) com um filete embaixo. Sem sublinhado
   grosso e sem cor nova. */
.prosa a, .leadnote a { color: var(--egeu); border-bottom: 1px solid var(--linha-forte); }
.prosa a:hover, .leadnote a:hover { border-bottom-color: var(--ouro); }
/* citação ligada ao parágrafo da transcrição: o filete é pontilhado, para
   distinguir "isto leva ao verbatim" de "isto leva a outra página" */
.prosa a.cite { border-bottom-style: dotted; }
.prosa a.cite:hover { background: var(--pedra-2); border-bottom-style: solid; }

/* A TESE é a LINHA FINA (o standfirst do jornal): o resumo de um parágrafo
   que decide se o leitor segue. O problema que ela tinha era de identidade,
   não de estilo: em itálico, no mesmo corpo do texto e sem rótulo, ela
   parecia uma citação da análise em vez da abertura dela. Três correções:
     · rótulo em caixa-alta ("a tese"), que nomeia o gênero do bloco;
     · romano em vez de itálico, e um corpo acima do texto (19,2 contra 18),
       porque cinco linhas de itálico já cansam e a linha fina é para ser
       lida por inteiro;
     · filete de 3px em vez de 2, que a separa da citação em bloco (2px). */
.leadnote {
  margin: 0 0 1.7rem;
  padding: .1rem 0 .1rem 1.05rem;
  border-left: 3px solid var(--linha-forte);
  color: var(--tinta);
}
.leadnote p { margin: 0 0 .6rem; font-size: 1.2rem; line-height: 1.55; }
.leadnote p:last-child { margin-bottom: 0; }

/* rótulo de gênero de bloco: diz o que a coisa É antes de o leitor gastar
   tempo descobrindo. Usado na tese e no veredito. É um <span> em bloco, e
   não um <p>, para não herdar o corpo do parágrafo do bloco que o abriga. */
.rot-bloco {
  display: block;
  margin: 0 0 .3rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-right: var(--esp-rotulo);
  color: var(--tinta-fraca);
}

/* O VEREDITO ("aprofundar: sim/talvez/não" + o porquê). Antes era um
   parágrafo comum com o selo grudado no começo, e o olho lia tudo como
   texto corrido — justamente o dado que o Radar existe para entregar
   ficava invisível. Agora é um bloco escavado, com o fio de ouro do
   contrato de cor (§1) quando a resposta é sim. */
.veredito-bloco {
  margin: 0 0 1.8rem;
  padding: .7rem .9rem .8rem;
  background: var(--pedra-2);
  border-left: 3px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}
.veredito-bloco.n-sim { border-left-color: var(--ouro); }
.veredito-bloco.n-talvez { border-left-color: var(--linha-forte); }
.veredito-bloco .grau {
  margin: 0 0 .35rem;
  font-family: var(--f-inscricao);
  font-size: 1.15rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta);
}
.veredito-bloco p:last-child { margin-bottom: 0; }
.veredito-bloco p { font-size: var(--t-meta); line-height: 1.55; }

/* cada vídeo, na página do canal: separado por filete, com o título em
   caixa mista (são frases longas, e capital espacejada aqui seria ilegível).
   O título do vídeo é --t-manchete e não --t-titulo: com --t-titulo ele
   empatava com o h1 da página, e o nome do canal deixava de ser o dono da
   página. */
.radar-video { margin: 2.2rem 0 0; }
.radar-video > h2 {
  margin: 0 0 .25rem;
  padding-top: 1.1rem;
  font-weight: 400;
  font-size: var(--t-manchete);
  line-height: 1.24;
}
.radar-meta {
  margin: 0 0 .9rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
}
/* sem filete de repouso: em caixa-alta espacejada o sublinhado vira uma
   segunda linha de base e a tira inteira parece um menu. O sinal de link
   fica para o hover, e a cor (egeu) já diz que aquilo leva a outro lugar. */
.radar-meta a { color: var(--egeu); border-bottom: 1px solid transparent; }
.radar-meta a:hover { color: var(--ouro); border-bottom-color: var(--ouro); }

/* "mais deste canal": o rodapé de continuidade que faz o Radar ler como
   site de curadoria e não como arquivo. Fica DEPOIS do texto (nunca na
   margem), porque quem chega pelo link colado no Telegram tem que topar
   primeiro com o resumo do vídeo que pediu. */
.mais-canal { margin: 2.8rem 0 0; padding-bottom: 1rem; }
.mais-canal a.item {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .55rem .1rem;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.mais-canal a.item:hover {
  background: var(--pedra-2);
  border-bottom-color: var(--ouro);
}
.mais-canal .q {
  flex: none;
  width: 3.4rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
}
.mais-canal .t {
  flex: 1 1 auto;
  font-family: var(--f-inscricao);
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--tinta);
}
.mais-canal .selo { flex: none; }
.mais-canal .todos { margin: .9rem 0 0; font-size: var(--t-meta); }
.mais-canal .todos a { color: var(--egeu); border-bottom: 1px solid var(--linha-forte); }
.mais-canal .todos a:hover { border-bottom-color: var(--ouro); }


/* ---------------------------------------------------- 10. transcrição */
/* A página mais longa do site: às vezes duas mil palavras. Tudo aqui é
   decidido pela maratona — entrelinha larga, número do parágrafo apagado à
   esquerda, e o alvo da âncora marcado por sulco, não por fundo colorido. */
.transcricao { padding: .8rem 0 4rem; }
.transcricao p[id] {
  margin: 0 0 1rem;
  padding: .1rem .8rem;
  border-left: 2px solid transparent;
  scroll-margin-top: 30vh;
  font-size: var(--t-corpo);
  line-height: 1.75;
}
.transcricao p[id]:target {
  background: var(--pedra-2);
  border-left-color: var(--ouro);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}
.transcricao .pn {
  font-family: var(--f-inscricao);
  font-size: .7rem;
  color: var(--tinta-fraca);
  user-select: none;
  margin-right: .6rem;
  cursor: pointer;
}
.transcricao .pn:hover { color: var(--ouro); }
/* aviso da rosa.js depois de copiar o link do parágrafo */
.pn.copiado::after {
  content: "link copiado";
  margin-left: .5rem;
  font-size: .7rem;
  letter-spacing: var(--esp-nome);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}


/* --------------------------------------------------------- 11. busca */
.campo-busca {
  width: 100%;
  margin: .4rem 0 1.6rem;
  padding: .7rem .8rem;
  font-family: var(--f-texto);
  /* 16px é piso: abaixo disso o Safari do iPhone dá zoom ao focar o campo */
  font-size: var(--t-corpo);
  line-height: 1.4;
  color: var(--tinta);
  background: var(--pedra-3);
  border: 0;
  border-bottom: 1px solid var(--linha-forte);
  border-radius: 0;
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
  appearance: none;
}
.campo-busca:hover { border-bottom-color: var(--ouro); }

.resultado {
  display: block;
  padding: .8rem .7rem;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.resultado:hover { background: var(--pedra-2); border-bottom-color: var(--ouro); }
.resultado .alto {
  display: flex;
  gap: .8rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
}
.resultado h3 {
  margin: .2rem 0 .3rem;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: var(--t-sub);
  line-height: 1.25;
  color: var(--tinta);
}
.trecho-busca {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.55;
  color: var(--tinta-fraca);
}
/* o achado: sem fundo fluorescente. A faixa é a própria pedra escavada, com
   o fio de ouro embaixo. (Só o fio, sem a faixa, foi testado e confundia com
   link, que nesta folha também é palavra sublinhada.) */
mark {
  background: var(--pedra-3);
  color: var(--tinta);
  box-shadow: inset 0 -2px 0 var(--ouro-claro);
}


/* -------------------------------------------------------- 12. colofão */
.rodape-site {
  margin-top: auto;
  padding: 1.6rem 0 2.6rem;
  border-top: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--luz-filete);
}
.rodape-site .container { text-align: center; }
.colofao-marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-inscricao);
  font-size: var(--t-rotulo);
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
}
.colofao-marca svg { width: 15px; height: 15px; color: var(--ouro); }
.colofao {
  margin: .6rem auto 0;
  max-width: 52ch;
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--tinta-fraca);
}
.colofao a { color: var(--tinta-fraca); border-bottom: 1px solid var(--linha); }
.colofao a:hover { color: var(--tinta); border-bottom-color: var(--ouro); }

/* A rosa.js é compartilhada com o Rosa de Saron e traz gestos que a pedra
   não quer. Eles morrem aqui, por falta de regra:
     .revela/.vis      revelação ao rolar — a carta §2 proíbe animação de
                       entrada; sem CSS, a classe é inerte e nada acontece.
     .fita-leitura     só nasce em página com abas, que aqui não existe.
   O véu da troca de tema é o único que precisa ser desligado no grito: ele
   é um elemento pintado, e sem regra ficaria um bloco solto no fim do body.
   O caminho nativo (startViewTransition) continua valendo e faz um
   cross-fade curto, que não é animação de entrada de conteúdo. */
.veu-tema { display: none; }


/* --------------------------------------------------- 13. acessibilidade */
:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 0;
}
.vrow:focus-visible, .resultado:focus-visible, .cartao:focus-visible {
  outline-offset: -2px;
}
/* nenhuma página gerada hoje usa .sr; ela fica de reserva, porque a regra da
   carta §7 é que todo sinal gráfico tenha rótulo de leitor de tela, e o dia
   em que a barra ganhar um sinal novo o rótulo já tem onde morar */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---------------------------------------------------- 14. tela estreita */
/* No celular o espacejamento das capitais fecha e o ar diminui; a coluna
   continua uma só. O corpo do texto NÃO encolhe: é justamente onde ele
   precisa estar inteiro. */
@media (max-width: 34rem) {
  :root {
    --esp-rotulo: .12em;
    --esp-nome: .1em;
    --marca-esp: .16em;
  }
  .hero { padding-top: 1.6rem; }
  .prosa { padding-top: 1.2rem; }
  .vrow { padding-left: .45rem; padding-right: .45rem; }
  .grade:not(.uma-coluna) { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------- 15. o monitor */
/* A folha nasceu de uma coluna estreita e centrada, que é ótima no celular
   e pobre no monitor: a 1440px, o índice deixava 512px de pedra vazia e a
   página de leitura deixava 832px — 58% da tela sem nada. O Radar é, no
   fim, um site de curadoria de notícias, e um jornal aberto numa mesa não
   usa um terço da mesa.

   O que NÃO se fez, e por quê:
     · alargar a medida do texto — medida larga é medida ruim; a coluna de
       leitura fica em 38rem em qualquer tela (§9);
     · duas colunas de manchetes — em lista cronológica, duas colunas
       destroem a ordem de leitura (o olho não sabe se desce ou atravessa);
     · cartões flutuantes ou painéis — a carta §2 proíbe, e viraria painel
       de controle.
   O que se fez foi o que um jornal faz: uma FAIXA LATERAL. No índice ela
   guarda a navegação (canais e filtros), que antes ocupava cinco linhas de
   botões no meio do caminho entre a cabeceira e a primeira notícia. Na
   página de documento ela guarda o aparato (procedência, data, duração,
   abas), alinhado à direita contra um filete vertical, como a margem de
   uma edição crítica.

   Os dois pontos de virada são diferentes de propósito: o índice vira a
   62rem (992px), quando sobra largura para 15rem de faixa sem espremer as
   manchetes; o documento vira a 64rem (1024px), que é 15 + 3,25 + 38 mais
   as margens. Abaixo disso, os dois voltam a ser a pilha do celular, na
   mesma ordem de hoje. */

.folha > .rail { margin-top: 1.4rem; }
.folha > .fluxo { margin-top: 2rem; }
.rail-bloco + .rail-bloco { margin-top: 1.4rem; }
.rail-tit {
  margin: 0;
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: var(--t-rotulo);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-right: var(--esp-rotulo);
  color: var(--tinta-fraca);
}
/* no celular a faixa não existe: os blocos são o que já eram, uma tira de
   nomes que corre e uma tira de filtros. O rótulo some para não somar
   linha ao topo da página. */
@media (max-width: 61.99rem) {
  .rail-tit { position: absolute; width: 1px; height: 1px; overflow: hidden;
              clip-path: inset(50%); white-space: nowrap; }
  /* MELHORA DE CELULAR (não regressão): a tira com os 26 canais custava
     treze linhas entre a cabeceira e a primeira manchete. Na tela estreita
     ficam os oito maiores — a lista já vem ordenada por número de vídeos —
     e o último item, que é "todos os canais", continua ali para quem quiser
     o resto. Nada some do site: some da dobra. */
  .rail .links-secao a:nth-child(n+9):not(:last-child) { display: none; }
}

@media (min-width: 62rem) {
  .folha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--col-rail);
    gap: 0 3rem;
    align-items: start;
  }
  /* a faixa vem ANTES no HTML (é assim que o celular precisa dela, logo
     abaixo da cabeceira); no monitor a grade a manda para a direita sem
     mexer na ordem do documento nem na do leitor de tela */
  .folha > .fluxo { grid-column: 1; grid-row: 1; min-width: 0; margin-top: 0; }
  .folha > .fluxo > .secao:first-child { margin-top: 0; }
  .folha > .rail {
    grid-column: 2;
    grid-row: 1;
    margin-top: .35rem;
    position: sticky;
    top: 4.2rem;
    max-height: calc(100vh - 5.6rem);
    overflow-y: auto;
    scrollbar-width: thin;
    border-left: 1px solid var(--linha);
    padding-left: 1.5rem;
  }
  .rail-bloco + .rail-bloco {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linha);
    box-shadow: inset 0 1px 0 var(--luz-filete);
  }
  /* a lista de canais deixa de correr e vira uma coluna com a contagem
     alinhada à direita: 26 nomes empilhados leem-se de uma vez, os mesmos
     26 em tiras horizontais custavam cinco linhas e uma varredura */
  .rail .links-secao {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: .6rem 0 0;
  }
  .rail .links-secao a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .26rem 0;
    border-right: 0;
  }
  .rail .filtros { flex-direction: column; align-items: stretch; margin: .6rem 0 0; }
  .rail .chip { justify-content: flex-start; }
  .rail .chip .qt { margin-left: auto; }
}

/* --- a página de documento: aparato à margem, texto na coluna ----------- */
.doc {
  width: 100%;
  max-width: var(--col-leitura);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.doc-corpo { display: block; }

@media (min-width: 64rem) {
  .doc {
    max-width: var(--col-doc);
    display: grid;
    grid-template-columns: var(--col-rail) minmax(0, var(--col-leitura));
    grid-template-areas: "rail cabeca" "rail corpo";
    justify-content: center;
    align-items: start;
    gap: 0 3.25rem;
  }
  .doc-cabeca { grid-area: cabeca; }
  .doc-corpo { grid-area: corpo; min-width: 0; }
  .doc-rail {
    grid-area: rail;
    position: sticky;
    top: 4.2rem;
    margin-top: clamp(1.6rem, 4vh, 2.4rem);
    padding: .5rem 1.5rem 0 0;
    text-align: right;
    border-right: 1px solid var(--linha);
  }
  /* na margem, a meta empilha e continua alinhada ao filete */
  .doc-rail .doc-meta {
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
  }
  /* na margem direita o quadradinho de área fica DEPOIS do nome, encostado
     no filete: assim a coluna tem uma margem direita reta */
  .doc-rail .doc-meta .canal { flex-direction: row-reverse; }
  .doc-rail .doc-meta > span { display: block; }
  /* as abas viram uma pilha, e o sulco de ouro do estado atual passa do
     rodapé para o lado do filete: é a mesma gramática, virada 90 graus */
  .doc-rail .abas-doc {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 1.1rem -1.5rem 0 0;
    border-bottom: 0;
    box-shadow: none;
  }
  .doc-rail .abas-doc a {
    padding: .4rem 1.5rem .4rem 0;
    margin: 0 -1px 0 0;
    border-bottom: 0;
    border-right: 1px solid transparent;
  }
  .doc-rail .abas-doc a:hover { border-right-color: var(--linha-forte); }
  .doc-rail .abas-doc a.on { border-right-color: var(--ouro); }
}