/**
 * Contratos de componente — a última palavra da cascata.
 *
 * POR QUE ESTE ARQUIVO EXISTE
 *
 * Os defeitos que ele corrige não são bugs de uma regra: são consequência de
 * um mesmo componente ter sido estilizado em épocas diferentes, em arquivos
 * diferentes, sem nada dizendo qual é a versão certa. Medido no site
 * publicado, antes desta camada:
 *
 *  - 15 ícones SVG, todos na grade 24×24, desenhados em TRÊS espessuras
 *    declaradas (1,7 / 1,8 / 2,0). O mesmo componente, `.go-iconbtn`,
 *    aparecia a 2px num botão e a 1,8px no outro — lado a lado no header.
 *  - o rótulo de formato ("Review") e o de nota ("8/10") ocupam o MESMO canto
 *    do mesmo card e não compartilhavam nada: Space Mono 11,5px versaletes
 *    numa pílula de 999px contra Space Grotesk 16px num retângulo de 4px,
 *    26px de altura contra 30px.
 *  - `.go-media-label--hero-review` estava definido DUAS vezes dentro de
 *    design-polish.css (linhas ~2420 e ~3675), com desenhos incompatíveis. A
 *    segunda vencia; a primeira continuava lá, dizendo outra coisa.
 *
 * A regra de convivência aqui é: este arquivo declara o CONTRATO (forma,
 * escala, papéis tipográficos), não redecora. Quando um valor precisar mudar,
 * muda aqui, uma vez. Carrega por último de propósito — prioridade 10200,
 * depois de header-ads-architecture.css — e por isso quase não precisa de
 * `!important`: mesma especificidade, chegando depois, já vence.
 *
 * E não tem irmão `.min.css`. Isso é deliberado: verge, design-polish,
 * x35-reader-portal, style, site-upgrades e header-reference-parity todos
 * têm um `.min` que o tema prefere quando existe, e como não há build no
 * projeto, editar o `.css` desses seis não muda nada no ar. Um contrato que
 * pode ser silenciosamente ignorado não é um contrato.
 */

/* =========================================================================
   §1 — CONTRATO DE DESENHO DOS ÍCONES

   Todos os ícones do tema já nascem na grade 24×24 — isso estava certo. O
   que variava era o traço.

   1,8 é o valor canônico porque já era o mais usado entre os ícones com
   junção arredondada, e porque nos tamanhos de render (16–19px a partir de
   uma grade de 24) ele cai em ~1,3px de tela: firme sem pesar. 2,0 engrossa
   o suficiente para o ícone competir com o texto ao lado; 1,7 é
   indistinguível de 1,8 a olho nu, então mantê-lo só custava mais uma
   variante para alguém ter que respeitar depois.

   Pontas e junções arredondadas em tudo. Essa já era a assinatura dos ícones
   que declaravam alguma coisa; os que apareciam em ponta reta (`butt`,
   `miter`) não tinham escolhido isso — eram o valor inicial do CSS, ou seja,
   ninguém nunca declarou nada.

   Ícones de preenchimento (o sol/lua do tema, o aviso do toast) não são
   afetados: sem traço, `stroke-width` não desenha nada.
   ========================================================================= */

body.go-verge :is(
	.go-iconbtn,
	.go-backtop,
	.go-theme-toggle,
	.go-a11y__toggle,
	.go-offcanvas-utility__icon,
	.go-search__field-wrap,
	.go-preferred-toast__close,
	.go-preferred-toast__icon,
	.go-ad-slot__dismiss,
	.go-channel-invite__glyph,
	.go-share__btn,
	.go-card__icon,
	.go-media-label
) svg {
	--go-icon-stroke: 1.8;
	stroke-width: var(--go-icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * O `path` do botão de fechar do anúncio traz `stroke-width="2"` como
 * atributo de apresentação NO PRÓPRIO path. Atributo de apresentação perde
 * para qualquer regra CSS, mas só na disputa pelo mesmo elemento: uma regra
 * no `<svg>` pai não vence um valor declarado no filho, porque o filho nunca
 * chega a herdar. Por isso o seletor desce até os filhos.
 */
body.go-verge .go-ad-slot__dismiss svg > * {
	stroke-width: var(--go-icon-stroke, 1.8);
}

/* -------------------------------------------------------------------------
   §1b — A seta de "ver mais"

   Terceira tentativa nesta seta, e as duas primeiras erraram porque tratavam
   o sintoma.

   Como ela funciona: `assets/js/theme.js` (v29, `decorateArrows`) varre a
   página atrás de `span`/`a`/`button` cujo conteúdo seja só o caractere `→`,
   aplica `.go-ui-arrow`, e o CSS esconde o caractere com `font-size: 0` e
   desenha uma seta com dois pseudo-elementos: `::before` é a haste, `::after`
   é um quadrado com duas bordas girado 45°.

   O problema não era a proporção — era o método. Uma seta feita de haste + meio
   quadrado girado tem dois defeitos que nenhum ajuste de medida resolve:

   1. o quadrado girado ocupa `lado × √2` de largura, então a ponta nunca
      encosta na haste no ponto certo; sobra fenda ou sobra encavalamento, e a
      escolha é entre um "⟶" com a cabeça solta ou uma haste passando por dentro
      da ponta;
   2. as bordas do quadrado têm canto reto, enquanto TODOS os outros ícones do
      site têm ponta arredondada (§1). A seta era, literalmente, o único ícone
      desenhado com outra ferramenta.

   Aqui ela vira um ícone de verdade: o mesmo desenho `M4 12h15 M13 6l6 6-6 6`
   na grade 24×24, traço 1,8, pontas e junções arredondadas — idêntico ao
   contrato acima. Entra como máscara para herdar `currentColor`, então ela
   continua limão no link limão e clara no link claro, sem uma regra de cor
   sequer.

   Os pseudo-elementos são desligados com `content: none` em vez de sobrescritos:
   deixá-los vivos e invisíveis é como se acumulam as três camadas de regra que
   este arquivo existe para acabar.
   ------------------------------------------------------------------------- */

body.go-verge .go-ui-arrow {
	--go-arrow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

	display: inline-block;
	inline-size: 14px;
	min-inline-size: 14px;
	block-size: 14px;
	margin-inline-start: 6px;
	vertical-align: -2px;
	border: 0;
	/*
	 * O único `!important` desta seção, e ele é obrigatório: design-polish.min.css
	 * declara `background: none !important` nesta mesma classe. A máscara recorta
	 * o fundo no formato da seta, então sem fundo não há seta — a regra sem peso
	 * aplicava a máscara sobre coisa nenhuma e o resultado era um vão de 14px.
	 * Como aquele arquivo é minificado e não tem build no repositório, editar a
	 * fonte dele não chegaria ao navegador.
	 */
	background-color: currentColor !important;
	-webkit-mask: var(--go-arrow-glyph) center / contain no-repeat;
	mask: var(--go-arrow-glyph) center / contain no-repeat;
	font-size: 0;
	transition: transform .18s ease;
}

body.go-verge .go-ui-arrow::before,
body.go-verge .go-ui-arrow::after {
	content: none;
}

/* Sozinha num link ou botão ela é o alvo do toque, e aí precisa de área. */
body.go-verge a.go-ui-arrow,
body.go-verge button.go-ui-arrow {
	inline-size: 18px;
	min-inline-size: 18px;
	block-size: 18px;
}

/*
 * O hover antigo esticava a haste de 14px para 17px — com a haste desenhada,
 * era a única animação possível. A seta avança, que é o que "ver mais" quer
 * dizer. Quem pediu menos movimento no sistema não recebe nenhum.
 */
body.go-verge :is(a, button):hover > .go-ui-arrow,
body.go-verge :is(a, button):focus-visible > .go-ui-arrow,
body.go-verge a.go-ui-arrow:hover,
body.go-verge a.go-ui-arrow:focus-visible {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	body.go-verge .go-ui-arrow {
		transition: none;
	}

	body.go-verge :is(a, button):hover > .go-ui-arrow,
	body.go-verge a.go-ui-arrow:hover {
		transform: none;
	}
}

/* =========================================================================
   §2 — FAMÍLIA DE RÓTULOS EDITORIAIS (formato e nota)

   Cinco variantes saem de inc/template-helpers.php, e a LÓGICA delas é boa —
   vale registrar para ninguém "simplificar" isso depois achando que é
   redundância:

     --latest            palavra discreta no feed cronológico
     --review/--critique palavra em pílula nas demais superfícies
     --score             a nota substitui a palavra quando existe nota,
                         porque o número já diz o formato E informa
     --hero-review       formato e nota juntos, um bloco só, no hero
     --hero-review.is-unscored   formato sozinho, review ainda sem nota

   Nada disso muda aqui. O que muda é que as cinco passam a ser o mesmo
   objeto em cinco estados, e não cinco objetos.

   TRÊS DECISÕES

   1. Dois papéis tipográficos, fixos. Palavra de formato = mono, versalete,
      tracking aberto — é a linguagem de olho editorial que o site já usa em
      todo canto. Número = sans, tabular. Cada face está certa para o seu
      papel; o defeito era o mesmo papel falar com valores diferentes em cada
      lugar (mono 700 com tracking 1,15px num card, mono 750 com 0,14em no
      hero).

   2. Uma forma só: `--r-sm`. A pílula de 999px sai. Pílula é a linguagem dos
      FILTROS deste site — coisas em que se clica. Um marcador estático
      redondo promete um toque que não existe.

   3. Uma escada de altura, igual para todas as variantes. Antes a palavra
      media 26px e a nota 30px no mesmo canto do mesmo card; ficam ambas em
      28px. Compacto e destaque descem e sobem juntos.

   A cor continua carregando informação: preenchimento sólido no tom da faixa
   de nota (limão / amarelo / laranja), violeta para crítica. É o que diferencia
   as variantes — e é diferença que significa alguma coisa, ao contrário de
   duas fontes.
   ========================================================================= */

body.go-verge .go-media-label {
	--go-label-h: 28px;
	--go-label-pad: 10px;
	--go-label-format-size: .68rem;
	--go-label-num-size: .95rem;
	--go-label-accent: var(--lime);
	--go-label-ink: var(--ink-on-lime);

	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--go-label-h);
	padding-inline: var(--go-label-pad);
	border: 0;
	border-radius: var(--r-sm);
	background: var(--go-label-accent);
	color: var(--go-label-ink);
	font-family: var(--font-mono);
	font-size: var(--go-label-format-size);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Faixas de nota. Só o tom muda; forma e escala vêm do contrato acima. */
body.go-verge .go-media-label.is-high { --go-label-accent: var(--lime); }
body.go-verge .go-media-label.is-mid  { --go-label-accent: var(--acc-yellow); }
body.go-verge .go-media-label.is-low  { --go-label-accent: var(--acc-orange); }

/*
 * Crítica é entretenimento, não games, e o violeta separa as duas cabeças
 * editoriais sem precisar de mais uma palavra no card. O tom vem do hero, que
 * já usava #9d6cff — aqui ele deixa de ser um hexadecimal solto no meio de
 * design-polish e vira um token com nome.
 */
body.go-verge .go-media-label--critique,
body.go-verge .go-media-label--latest-critique,
body.go-verge .go-media-label--hero-critique {
	--go-label-accent: #9d6cff;
	--go-label-ink: #12091f;
}

/*
 * A nota fala em sans, com algarismos tabulares. Tabular importa de verdade
 * aqui: numa grade de cards, "8/10" e "10/10" com largura de dígito variável
 * deslocam o selo inteiro alguns pixels, e a coluna deixa de alinhar.
 */
body.go-verge .go-media-label--score,
body.go-verge .go-media-label__rating {
	gap: 1px;
	font-family: var(--font-sans);
	font-size: var(--go-label-num-size);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

body.go-verge .go-media-label__scale {
	margin-inline-start: 1px;
	font-size: .62em;
	font-weight: 700;
	opacity: .66;
}

/*
 * O bloco do hero: formato e nota num objeto só, separados por uma barra de
 * acento. Este desenho já era o melhor do sistema — o problema era ser o
 * único que ninguém mais seguia, e estar declarado duas vezes.
 *
 * O fundo escuro não é decoração: o rótulo fica sobre a arte da matéria, que
 * pode ser clara, escura ou ruidosa. Sólido limão sobre uma foto clara some.
 */
body.go-verge .go-media-label--hero-review {
	--go-label-h: 32px;

	display: inline-grid;
	grid-auto-flow: column;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .2);
	border-inline-start: 4px solid var(--go-label-accent);
	background: rgba(10, 8, 16, .88);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

body.go-verge .go-media-label--hero-review .go-media-label__format,
body.go-verge .go-media-label--hero-review .go-media-label__rating {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--go-label-pad);
}

body.go-verge .go-media-label--hero-review .go-media-label__format {
	background: transparent;
	color: #fff;
	font-family: var(--font-mono);
	font-size: var(--go-label-format-size);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body.go-verge .go-media-label--hero-review .go-media-label__rating {
	align-items: baseline;
	border-inline-start: 1px solid rgba(255, 255, 255, .16);
}

/* Sem nota ainda: sobra o formato, e aí o sólido volta — não há segunda
   metade para a barra separar. */
body.go-verge .go-media-label--hero-review.is-unscored {
	border-color: var(--go-label-accent);
	background: var(--go-label-accent);
	color: var(--go-label-ink);
}

body.go-verge .go-media-label--hero-review.is-unscored .go-media-label__format {
	color: var(--go-label-ink);
}

/* -------------------------------------------------------------------------
   A escada de tamanho

   Uma escada só, aplicada por superfície. Todas as variantes leem os mesmos
   três degraus, então um card compacto e um destaque nunca mais têm um selo
   que encolheu e outro que não.

   Os seletores repetem as cadeias longas que já existem em design-polish
   (`body.home .go-hero-visual .go-hero-visual__feature …`, (0,5,1)) porque
   especificidade menor não vence, mesmo chegando depois. A verbosidade é o
   preço de não usar `!important` — e vale pagar: `!important` aqui só
   empurraria o problema para a próxima folha.
   ------------------------------------------------------------------------- */

body.go-verge .go-tile--compact .go-media-label,
body.go-verge .go-card--compact .go-media-label {
	--go-label-h: 22px;
	--go-label-pad: 7px;
	--go-label-format-size: .62rem;
	--go-label-num-size: .82rem;
}

/* No card compacto o "/10" sai: a nota sozinha continua legível, a fração não. */
body.go-verge .go-tile--compact .go-media-label__scale {
	display: none;
}

body.go-verge .go-tile--feature .go-media-label,
body.go-verge .go-archive-feature .go-media-label,
body.go-verge .go-hero-visual__feature .go-media-label,
body.home.go-verge .go-hero-visual .go-hero-visual__feature .go-media-label--hero-review,
body.home.go-verge .go-hero-visual .go-hero-visual__feature .go-media-label--hero-review .go-media-label__format,
body.home.go-verge .go-hero-visual .go-hero-visual__feature .go-media-label--hero-review .go-media-label__rating {
	--go-label-h: 36px;
	--go-label-pad: 12px;
	--go-label-format-size: .74rem;
	--go-label-num-size: 1.22rem;
}

@media (max-width: 520px) {
	/*
	 * No celular o rótulo divide a arte com o topo do card e com o gradiente
	 * do título. Um degrau abaixo do padrão em todas as variantes ao mesmo
	 * tempo — antes só o hero encolhia, e o selo de nota ficava maior que o
	 * do destaque ao lado.
	 */
	body.go-verge .go-media-label {
		--go-label-h: 25px;
		--go-label-pad: 8px;
		--go-label-format-size: .62rem;
		--go-label-num-size: .88rem;
	}

	body.go-verge .go-tile--feature .go-media-label,
	body.go-verge .go-archive-feature .go-media-label,
	body.go-verge .go-hero-visual__feature .go-media-label,
	body.home.go-verge .go-hero-visual .go-hero-visual__feature .go-media-label--hero-review {
		--go-label-h: 30px;
		--go-label-pad: 10px;
		--go-label-format-size: .66rem;
		--go-label-num-size: 1rem;
	}
}

@media print {
	body.go-verge .go-media-label {
		border: 1px solid #000;
		background: none;
		color: #000;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* =========================================================================
   §3 — ACENTO DOS COMPONENTES DENTRO DA MATÉRIA

   Complemento do recorte feito em overdrive-rebrand.css: lá o azul deixou de
   vazar para fora dos links de prosa; aqui os componentes que estavam sendo
   pintados por ele recebem o acento certo.

   `--lime-text` e não `--lime` cravado: o token já vira azul elétrico no modo
   claro, que é o acento da marca naquela paleta. Um `#d8ff38` escrito à mão
   aqui seria limão sobre fundo branco — foi exatamente esse tipo de valor
   cravado que deixou o botão "Assinar" com 1,15:1 de contraste.
   ========================================================================= */

body.go-verge .go-article__content .go-inline-cta__share-link,
body.go-verge .go-article__content .go-inline-cta__preferred,
body.go-verge .go-article__content .go-inline-related__item {
	color: var(--lime-text);
}

/*
 * Os cards de "leia também" herdam a cor para o título, mas a linha de apoio e
 * a data continuam sendo texto secundário: um card inteiro em cor de acento
 * lê-se como anúncio, que é a queixa que já derrubou duas versões do bloco de
 * convite.
 */
body.go-verge .go-article__content .go-inline-related__meta,
body.go-verge .go-article__content .go-inline-related__copy {
	color: var(--text-secondary);
}

/* O traço do círculo acompanha o ícone, discreto — o ícone é que informa. */
body.go-verge .go-article__content .go-inline-cta__share-link:hover,
body.go-verge .go-article__content .go-inline-cta__share-link:focus-visible {
	border-color: color-mix(in srgb, var(--lime-text) 55%, transparent);
	background: color-mix(in srgb, var(--lime-text) 12%, transparent);
}

/* =========================================================================
   §4 — O BLOCO DE VEREDITO

   Medido na matéria publicada (Sparking! ZERO, `.go-review-box--review`):

     .go-review-box         fundo transparente, borda 0, raio 0
     __score                quadrado limão 88×88, número a 36px
     __score-max ("/10")    display: none
     __verdict              16,78px, peso 430, 338px de altura

   Quatro defeitos, e o primeiro explica os outros:

   1. NÃO É UMA CAIXA. Sem fundo, sem traço e sem raio, o veredito — a frase
      mais importante de uma review — fica visualmente idêntico ao parágrafo
      que veio antes dele. O leitor que percorre a página não tem como saber
      que ali está a conclusão.

   2. A nota flutua sozinha. 88×88 de limão com um número de 36px no meio é
      quase tudo espaço vazio, e empilhada ACIMA do texto ela não se lê junto
      com o veredito — são dois objetos separados que por acaso estão perto.

   3. O "/10" está escondido. Quem enxerga vê "8.5" sem escala; o "de 10" só
      existe no `aria-label`. Nota sem escala é ambígua — 8.5 de 10 é bom, de
      100 é péssimo — e a informação já está lá, só desligada.

   4. O veredito tem o corpo do texto corrido. Mesmos 16px, peso baixo: nada
      no desenho diz "isto é a conclusão", só a posição.

   O tratamento vale para a CABEÇA, não para o `<details>` de prós, contras e
   ficha técnica — aquilo tem 1199px de altura, e tingir tudo criaria um bloco
   colorido de dois terços da matéria. A caixa é do veredito; a ficha continua
   sendo consulta.

   A barra de acento na borda inicial é a mesma linguagem do selo do hero
   (§2) — mesmo vocabulário, aplicado ao mesmo tipo de informação.
   ========================================================================= */

/*
 * SOBRE O `!important` DAQUI PARA BAIXO
 *
 * Esta seção é a única do arquivo que precisa dele em quase toda declaração, e
 * a razão é verificável. As regras que ela substitui estão em
 * design-polish.min.css e já usam `!important`:
 *
 *   body.single-post .go-article--scored .go-review-box .go-review-box__score
 *     { width: 88px !important; height: 88px !important; display: grid !important }
 *   .go-review-box__score-max        { display: none !important }
 *   body.single-post .go-article--scored .go-review-box__verdict
 *     { font-size: clamp(...) !important; font-weight: 430 !important }
 *
 * Contra um `!important` só existem duas saídas: outro `!important` com
 * especificidade igual ou maior, ou editar a folha de origem — que é minificada
 * e não tem build no repositório, então editá-la não chegaria ao navegador.
 * Os seletores abaixo repetem `body`, `.go-verge` e a cadeia do bloco porque
 * (0,5,1) é o que vence (0,4,1).
 *
 * `width`/`height` físicos, e não `inline-size`/`block-size`, porque é
 * exatamente o par que está sendo derrubado. Trocar de eixo lógico aqui só
 * criaria dúvida sobre qual declaração resolve o quê.
 */

/*
 * NENHUM CONTÊINER. Isto foi decidido depois de escrever o contrário.
 *
 * A primeira versão desta seção era uma caixa: fundo tingido, canto
 * arredondado, traço de 1px e uma barra de acento de 4px na borda inicial.
 * Recusada, e com razão — selo, degradê, pílula e barra lateral são o
 * vocabulário padrão de componente de página gerada. Acabamento genérico não é
 * acabamento; é ausência de decisão com mais CSS. É a mesma crítica que já
 * derrubou duas versões do bloco de convite, e a barra à esquerda é
 * literalmente o desenho universal de CITAÇÃO, o que channel-invite.css já
 * registra como erro.
 *
 * O que separa o veredito da matéria aqui é o que separa numa revista impressa:
 * dois fios e a tipografia. A nota é o mesmo selo sólido da família de rótulos
 * (§2), um degrau acima; o veredito ganha corpo e peso. Nada de fundo, nada de
 * raio, nada de barra.
 */
/*
 * NENHUM fio, e as duas tentativas anteriores de pôr um caíram por medição.
 *
 * O de baixo era repetido: o `<details>` logo abaixo ("Prós e contras · Ficha
 * técnica") JÁ traz `border-top: 1px solid`, e ela cai 10px depois de onde a
 * minha caía. Duas réguas quase coladas dizendo a mesma coisa — e o índice,
 * na sequência, traz mais duas.
 *
 * O de cima também saiu. Era defensável no papel (é a fronteira entre a
 * mobília da matéria e o conteúdo editorial), mas o trecho já acumula três
 * réguas em pouca altura: antes do toggle, antes do índice e depois dele. Uma
 * quarta não estava separando nada que o espaço e o selo limão não separem
 * melhor.
 *
 * O que marca o bloco, então: o vazio acima, o selo sólido — o objeto mais
 * saturado da página inteira — e o veredito num corpo acima do texto corrido.
 * Três sinais, nenhum deles um traço.
 */
body.go-verge .go-review-box .go-review-box__head {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-block: 26px 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

body.go-verge .go-review-box .go-review-box__score,
body.single-post.go-verge :is(.go-article--scored, .go-article--review, .go-article--critique) .go-review-box .go-review-box__score {
	/*
	 * `aspect-ratio` e `flex-basis` são os dois pinos que sustentavam o quadrado,
	 * e nenhum aparece como largura. Derrubar só `width`/`height` não bastava: a
	 * proporção 1/1 reconstruía o quadrado a partir da altura, e a base de 88px
	 * do flex reconstruía a altura. Os três têm que cair juntos.
	 */
	flex: 0 0 auto !important;
	aspect-ratio: auto !important;
	display: inline-flex !important;
	/*
	 * Em linha, não empilhado. A regra antiga era `column` com 5px de intervalo,
	 * o que põe o "/10" debaixo do número e devolve a caixa alta que o quadrado
	 * de 88px já tinha. Em §2 o selo do card lê "8/10" numa linha só; este é o
	 * mesmo objeto um degrau acima, e tem que ler igual.
	 */
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: center;
	gap: 1px !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 9px 12px !important;
	border-radius: var(--r-sm);
	font-variant-numeric: tabular-nums;
}

body.go-verge .go-review-box .go-review-box__score .go-review-box__score-num {
	font-size: 1.7rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -.02em;
}

/*
 * O "/10" volta a aparecer. Menor e mais apagado que o número, porque é a
 * escala e não o dado — mas presente, porque sem ele o dado não significa:
 * 8,5 de 10 é bom, de 100 é péssimo, e a diferença estava só no `aria-label`.
 */
body.go-verge .go-review-box .go-review-box__score .go-review-box__score-max {
	display: inline !important;
	font-family: var(--font-mono);
	font-size: .74rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	opacity: .7;
}

body.go-verge .go-review-box .go-review-box__head-text {
	inline-size: 100%;
	min-inline-size: 0;
}

/*
 * O veredito sobe um degrau e ganha peso: é a frase que a matéria inteira
 * existe para sustentar, e antes vinha com o mesmo corpo do texto corrido.
 * `text-wrap: pretty` evita a linha órfã de uma palavra no fim, que num bloco
 * curto e destacado salta aos olhos.
 */
body.go-verge .go-review-box .go-review-box__verdict,
body.single-post.go-verge .go-article--scored .go-review-box .go-review-box__verdict {
	margin: 0;
	color: var(--text) !important;
	font-size: 1.12rem !important;
	/*
	 * 450, não 500. O veredito costuma ter seis ou sete linhas, e nesse
	 * comprimento meio ponto de peso a mais deixa de ser ênfase e vira um bloco
	 * de negrito — cansa de ler exatamente o parágrafo que mais importa. A
	 * distinção já está no corpo maior, na cor mais clara e nos dois fios.
	 */
	font-weight: 450 !important;
	line-height: 1.5 !important;
	letter-spacing: -.008em;
	text-wrap: pretty;
}

@media (max-width: 400px) {
	body.go-verge .go-review-box .go-review-box__head {
		gap: 12px;
		margin-block-start: 20px;
	}
}